Feed de ofertas · em dupla com Renato Garcialeitura de 11 min
Directo · TicTac
Treze modelos de card para o feed do TicTac, decididos por dado
- 39
- combinações desenhadas, e nenhuma medida nova no sistema.
- 11 de 13
- modelos rodam com a foto que o lojista já tem, sem produção paga.
- 40
- componentes com 113 variantes na entrega para engenharia.
- 1 semana
- do briefing à entrega da primeira rodada.
Em dupla com o designer Renato Garcia. Cliente: Directo. Produto: TicTac. Período: agosto e setembro de 2026.
00 Arquivo
| Cliente | Directo |
| Produto | TicTac · feed de ofertas de loja física |
| Papel | product design em dupla com Renato Garcia. Pesquisa, modelos, comparação e decisão feitos a dois, do início ao fim |
| Com | Renato Garcia · designer parceiro, processo dividido |
| Escopo | os treze modelos de card, a comparação, o contrato de dados e o redesenho do feed |
| Validação | com a equipe do cliente, decisão por decisão |
| Plataforma | mobile, e um painel na web |
| Ferramentas | Figma, FigJam |
| Período | agosto e setembro de 2026 |
Uma linha. Treze modelos de card em três formatos dão 39 combinações. Todas foram desenhadas, e nenhuma pediu uma medida nova: altura, largura, espaçamento e botão são os que o produto já tinha. A comparação não provou que o desenho era bonito, provou que a estrutura existente aguentava tudo o que o produto queria vender.
01 Resumo
Problema. O feed do TicTac precisava de dez modelos de card diferentes para cobrir os tipos de oferta e os dois ramos do produto. Dez modelos mantidos à mão é dívida garantida: cada um vira um componente próprio, e daí em diante toda correção é feita dez vezes.
O que eu fiz. Na primeira semana, a pesquisa, os treze modelos de card, uma comparação que os mede em números, e o contrato de dados de cada um: quais campos o sistema precisa entregar para o card existir. Em setembro voltei ao feed para mudar o tamanho do card e partir a leitura em dois modos.
Resultado. 39 combinações desenhadas sem uma medida nova. Onze dos treze modelos rodam com a foto que o lojista já tem, sem produção paga. Sete decisões fechadas com a equipe, e a entrega para engenharia com 40 componentes e 113 variantes.
A segunda frente. O feed só tem oferta se alguém produzir a oferta dentro da loja. Essa parte virou projeto próprio, e está no case do Creator, o aplicativo de quem produz a oferta.
Papel. Product design em dupla com o Renato Garcia. Pesquisa, comparação, os modelos e o contrato de dados saíram dos dois, e cada decisão de desenho foi discutida entre nós antes de ir para a equipe do cliente, que validou uma por uma.
02 Contexto
O TicTac é um feed de ofertas de loja física. Quem anuncia é o varejo e a indústria; quem compra é a pessoa que está perto da loja; e quem produz o conteúdo da oferta é o que o mercado chama de creator, a pessoa que fotografa e escreve sobre o produto na gôndola.
O dinheiro dessa cadeia tem nome: verba de mídia de varejo, que é o valor que a indústria paga para aparecer no canal onde a compra acontece. Foi o mercado que cresceu mais rápido no Brasil nos últimos três anos.
Isso importa para o card porque ele anuncia uma prateleira a alguns minutos de distância, e não uma entrega. No lugar de frete e prazo, o desenho carrega retirada, validade e estoque daquela loja, cada um como campo do sistema.
03 Restrição
O CPF Seguro, o produto da casa que protege contra fraude, roda dentro deste, embarcado com a marca da Directo. São dois cases que se encontram no mesmo aplicativo.
Uma semana para a primeira rodada. Pesquisa, dez modelos, comparação, decisão e validação. O prazo é a restrição que explica o método: sem tempo para iterar por opinião, a decisão tinha que sair de número.
O card não mora num app só. O feed é entregue como pacote dentro de centenas de aplicativos de clientes. Trocar o desenho do card é atualizar todos eles, então o que é regra de negócio não pode ficar congelado dentro do pacote. Essa restrição é técnica na origem e de produto na consequência: ela decide o que vira componente e o que continua sendo servido de fora.
Dois designers, o processo dividido. Eu e o Renato somos parceiros de desenho. Pesquisa, decisão e tela passaram pelos dois, e nenhuma decisão de produto aqui foi tomada sozinha. Quando a gente discordava, a régua era o dado, não quem tinha mais tempo de casa.
Dois ramos no mesmo feed. Compras e alimentação, com ações diferentes: em compras o usuário compra, em alimentação ele ativa uma oferta e retira na loja.
Feed que já existia. A tela de origem estava no ar. Não era desenho novo.
04 Exploração
A entrega foi um quadro de decisão, não um arquivo de telas
A entrega foi um quadro no Figma com dez seções em sequência vertical, feito para fechar as escolhas com o outro designer e com a equipe do cliente. Nenhuma tela final nele. A ordem das seções é o argumento:
00 capa
01 o sistema tabela dos componentes que já existiam
02 os três formatos
03 os dez modelos
04 a comparação em números <- é aqui que a decisão nasce
05 os tipos de retirada os 4 passos do fluxo físico
06 a análise fluidez, padronização, escalabilidade, robustez
e arquitetura, cada um com medida objetiva
E o que ainda é frágil
07 o contrato de dados
08 as sete decisões cada uma com recomendação
09 anexo a comparação desenhada peça por peça
Duas coisas nesse quadro são incomuns e valem o case inteiro:
A seção 06 declara o que ainda é frágil. Análise que só lista o que ficou bom é folheto. Nomear a fragilidade é o que permite a equipe decidir com o risco à vista.
A seção 07 é contrato de dados, não layout. Card sem contrato de dados é card que quebra na primeira oferta real. Definir o dado antes do pixel é o que fez quatro tipos de card cobrirem treze modelos.
A comparação, e por que ela não tem casa vazia
Treze modelos por três formatos dão 39 combinações. Todas desenhadas, nenhuma vazia, de propósito. A razão está escrita no quadro e é a melhor frase do projeto:
Casa vazia esconde formato, e quem lê conclui que o modelo não roda ali quando ele roda com outro recorte.
O que separa uma combinação da outra não é layout. É custo de foto: quanto o lojista precisa gastar para produzir a imagem que aquele card pede.
| 39 | combinações desenhadas · treze modelos em três formatos, nenhuma vazia |
| 11 | rodam com a foto que a loja já tem · produto em fundo neutro, recomposto pelo sistema, sem produção paga |
| 1 | pede produção paga · o modelo de marca, bancado por verba da indústria |
| 1 | não tem foto nenhuma · o modelo de cupom, em que o valor ocupa o quadro da imagem |
| 0 | medidas novas · card, imagem, botão, prazo e o bloco pequeno de listagem, tudo idêntico |
O que a comparação prova. Que a estrutura aguenta. Os mesmos campos, ou seja, cabeçalho, imagem, ícones, prova social, forma de pagamento, prazo de validade, botão e o motivo da oferta, carregam relógio de shopping, desconto por quantidade e preço por quilo sem crescer um pixel.
O que ela expõe. Que o formato de tela cheia é o mais caro. Cinco dos treze modelos têm cena fotografada de verdade; os outros oito rodam com produto em fundo neutro e rendem menos ali. O gargalo do formato não é layout, é produção de foto.
Essa última linha é o resultado do projeto. A pergunta chegou como "qual formato de card", e a comparação devolveu "o formato não é o seu problema, o custo da foto é".
O ramo de alimentação não inventou tela nova
A regra que fechou o escopo: alimentação copia o card de compras e troca o conteúdo. Nada de desenho novo para um ramo que tem a mesma estrutura de decisão.
05 Decisões
D1 · Nenhuma medida nova, e isso é a entrega
Treze modelos em três formatos, e card, imagem, botão, prazo e o bloco pequeno de listagem ficaram idênticos. A variação toda mora no conteúdo e no custo da foto.
Por quê: cada medida nova é um componente novo, e componente novo é custo permanente. Zero medida nova quer dizer que os treze modelos entram no sistema que já existe, sem dívida.
Abri mão de: liberdade de proporção. Nenhum modelo ganhou o tamanho que pedia; todos couberam no que existia.
D1b · O formato em coluna entra primeiro
Dos três formatos, o em coluna foi a recomendação de entrada.
Por quê: todo lojista tem a foto que ele pede. O de tela cheia fica por último, porque depende de cena fotografada, e cena fotografada é o gargalo.
D2 · Bloco de informação travado
Card de 390 × 490 com o bloco de informação travado em 130 pixels de altura.
Por quê: altura variável nesse bloco destrói o ritmo da lista. Travar a informação é o que permite o card variar na imagem sem quebrar o feed.
D3 · Declarar por nome mais que a cor
51 variáveis e 26 estilos na rodada em que a decisão foi tomada. Espaçamento, raio de canto, tipografia e sombra também passam a ser declarados por nome, não escritos como valor solto em cada tela.
Achado: os doze estilos antigos do arquivo nunca chegaram a ser aplicados. Existiam no arquivo e não existiam nas telas. Sistema declarado não é sistema adotado, e a diferença só aparece quando alguém mede.
D4 · A caixa do nome da loja deixa de ser fixa
Estava fixa em 75 pixels e centralizada. Vira flexível, nos dois ramos.
Por quê: é correção de robustez, não de estética. Nome de loja é dado de terceiro, e dado de terceiro não respeita a sua caixa.
D5 · Arrumar o arquivo antes de desenhar mais um modelo
Cor e tipografia estavam escritas como valor solto. A recomendação foi declarar tudo por nome agora, antes de desenhar mais nada.
Por quê: é trabalho de arquivo, não de desenho. Se entrar modelo novo antes, o custo de arrumar multiplica.
D6 · A sacola surpresa entra, com o risco declarado
Ela vende com um campo só, e por isso é a porta de entrada do ramo de alimentação. O risco também está escrito: o produto pode virar isso e mais nada.
Por quê: decisão com o risco à vista é decisão da equipe. Decisão com o risco escondido é decisão do designer fingindo que é da equipe.
D7 · O tamanho do card é decisão de negócio, não de estética
O card encolheu para caber um card inteiro mais um pedaço do próximo. E o feed passou a ter dois modos: o contínuo, com o cabeçalho e o botão sempre fora da mídia, e o de tela cheia, um card por tela, com os botões sobre a mídia.
Por quê: card grande empurrava o cabeçalho e o botão de compra para fora da tela. Card menor mostra mais oferta por sessão, e oferta vista é a moeda do produto.
Abri mão de: mídia grande como padrão. Ela virou um modo, escolhido por quem está olhando, em vez de ser a única forma.
D8 · A palavra "feed" saiu da tela
A arquitetura tem um feed por aplicativo parceiro, e isso continua verdade por baixo. Na tela, essa palavra desapareceu: quem usa escolhe raio e lugar.
Por quê: feed é conceito de dentro do produto. Distância é conceito da vida de quem compra e de quem vende. A decisão saiu de uma conversa com o designer da Directo e é das poucas do projeto que mudou vocabulário em vez de layout.
06 Craft e sistema
- Card de referência na proporção 3:4. Grade de 8 pixels. Escala de tamanhos com 12 degraus.
- Cinco tipos de card no fim, com linha de etiquetas, botão de 40 pixels em preto e selo em três níveis.
- O botão de referência foi definido antes dos modelos, não depois.
- Ícone é desenho vetorial de verdade, não caractere de fonte. E componente do sistema usado de verdade, nunca cópia visual colada.
- Página própria no Figma com tudo o que a engenharia precisa para construir.
07 Resultado
- 39 combinações desenhadas, 0 medidas novas. Os treze modelos entram no sistema que já existe.
- 11 dos 13 rodam sem produção paga de foto, com produto em fundo neutro recomposto pelo sistema.
- O achado que reposicionou o primeiro problema: o gargalo não é layout, é produção de foto.
- Sete decisões fechadas com a equipe na primeira rodada, cada uma com recomendação e com o risco declarado.
- Dois modos de leitura no feed, o contínuo e o de tela cheia, com o card encolhido para caber um inteiro mais um pedaço do próximo.
- Entrega para engenharia fechada em 40 componentes, 113 variantes, 53 mais 1 variáveis, 27 estilos de texto e nenhuma cor sólida solta.
- A primeira rodada levou uma semana, do briefing à entrega para engenharia.
08 O que eu faria diferente
A comparação mede os modelos entre si, não contra uso real. Ela responde "qual modelo aguenta qual oferta" e não responde "qual modelo vende mais". Em uma semana não cabia instrumentar o feed, mas o número que faltou é esse.
A validação foi com a equipe do cliente, não com usuário. Sete decisões fechadas com quem conhece o negócio é bom para risco de produto e não substitui teste com quem compra. Está escrito assim no quadro de propósito.
O achado chegou tarde. A descoberta de que o gargalo é o custo da foto apareceu na análise, no fim da semana. Se tivesse aparecido no começo, o recorte do projeto teria sido outro: menos modelo de card, mais desenho de como a loja produz imagem.