Directo · TicTacFeed de ofertas · em dupla com Renato Garcialeitura de 7 min
O gargalo do feed era o custo da foto.
Treze modelos de card para o feed do TicTac, escolhidos comparando todas as combinações
- Cliente
- Directo
- Período
- Ago. e set. de 2026
- Papel
- Em dupla com Renato Garcia
- Escopo
- Feed de ofertas do TicTac
- 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.
- 1 semana
- do briefing à entrega da primeira rodada.
00 Arquivo
| Cliente | Directo, cliente da Diletta |
| Produto | TicTac · feed de ofertas de loja física |
| Papel | Product Designer Sênior na Diletta Solutions, a empresa onde eu trabalho, em pair designing com Renato Garcia do início ao fim |
| 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 |
01 Resumo
Problema. Cada tipo de oferta do TicTac pedia um card próprio, e o pedido chegou com dez modelos. Mantidos à mão, eles viram dez componentes, e cada correção é feita dez vezes.
Papel e time. Sou Product Designer Sênior na Diletta, e a Directo é cliente da Diletta. Trabalhei em pair designing com o Renato Garcia: reunião todo dia, e os elementos a gente trabalhava junto pra aproveitar melhor e entregar mais rápido. A equipe da Directo validou cada decisão.
A decisão. Medir os modelos pelo que a loja gasta com a foto. O gargalo não é o card, é o custo da foto.
Resultado. No desenho, 11 dos 13 modelos rodam com a foto que o lojista já tem. Um pede produção paga e um não usa foto. Nenhum pediu medida nova.
Estado. Desenho entregue para engenharia em uma semana e validado com a equipe do cliente. Ainda não está no ar. A outra metade do projeto é o app de quem produz a oferta: case do Creator.
02 Contexto
O TicTac é um feed de ofertas de loja física. O varejo e a indústria anunciam, quem está perto da loja compra, e o creator produz a oferta: fotografa e escreve sobre o produto na gôndola. O dinheiro vem da verba de mídia de varejo, o que a indústria paga para aparecer onde a compra acontece.
Por isso o card anuncia uma prateleira a poucos minutos, e não uma entrega. No lugar de frete, ele carrega retirada, validade e o estoque daquela loja.
O CPF Seguro, o produto da casa que protege contra fraude, roda dentro deste mesmo aplicativo com a marca da Directo.
03 Restrição
Uma semana para a primeira rodada. Pesquisa, modelos, comparação e validação, tudo na mesma semana. Sem tempo para iterar por opinião, a decisão tinha que sair de número. Foi o prazo que escolheu o método.
O card não mora num app só. O feed é entregue como pacote dentro de centenas de aplicativos de clientes, e mudar o card é atualizar todos eles. Regra de negócio não pode ficar congelada no pacote. Isso decide o que vira componente e o que continua vindo de fora.
Dois ramos no mesmo feed. Em compras, o usuário compra. Em alimentação, ele ativa a oferta e retira na loja, com o mesmo card.
O feed já estava no ar. Redesenhei uma tela em uso.
04 Exploração
Um quadro de decisão no Figma, sem tela final
A entrega da primeira rodada foi um quadro no Figma com dez seções, feito para fechar as escolhas com o Renato e com a equipe do cliente. Ele sai dos componentes que já existiam, passa pelos formatos e modelos, e chega na comparação em números, na análise, no contrato de dados e nas decisões.
Duas seções eu defenderia em qualquer projeto. A análise tem um trecho só para o que ainda é frágil, porque a equipe precisava decidir olhando o risco. E o contrato de dados vem antes do pixel: quais campos o sistema tem que entregar para cada card existir. Foi isso que deixou cinco tipos de card cobrirem os treze modelos.
Quando eu e o Renato discordávamos, valia o número da comparação.
A comparação desenhou as 39 combinações
Treze modelos em três formatos dão 39 combinações, e a gente desenhou todas. Uma casa vazia faria quem lê achar que o modelo não roda ali, quando ele roda com outro recorte da foto.
Com tudo desenhado, apareceu o que separa uma combinação da outra: quanto o lojista gasta 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 |
| 1 | pede produção paga · o modelo de marca, bancado por verba da indústria |
| 1 | não tem foto · o cupom, em que o valor ocupa o lugar da imagem |
| 0 | medidas novas · card, imagem, botão, prazo e bloco de listagem idênticos |
A estrutura aguentou. Os mesmos campos carregam relógio de shopping, desconto por quantidade e preço por quilo sem crescer um pixel. O que a comparação expôs foi o formato de tela cheia, que pede cena fotografada de verdade e por isso é o mais caro para a loja.
A pergunta chegou como "qual formato de card?". O formato estava resolvido. O que travava a oferta era a foto.
05 Decisões
D1 · Nenhuma medida nova
Card, imagem, botão, prazo e bloco de listagem ficaram idênticos nos treze modelos. A variação mora no conteúdo e na foto.
Por quê: medida nova vira componente novo, e componente novo é custo para sempre. Sem ela, os treze entram no sistema que já existe.
Abri mão de: proporção livre. Nenhum modelo ganhou o tamanho que pedia.
D2 · O formato em coluna entra primeiro
Por quê: todo lojista já tem a foto que ele pede. O de tela cheia fica por último porque depende de cena fotografada, que é o que custa caro.
D3 · Bloco de informação travado
Card de 390 × 490 com o bloco de informação travado em 130 pixels.
Por quê: se esse bloco muda de altura, a lista perde o ritmo. Travado, ele deixa o card variar na imagem sem quebrar o feed.
D4 · Tudo declarado por nome antes do próximo modelo
Cor e tipografia estavam como valor solto. Recomendei declarar por nome cor, espaçamento, raio, tipografia e sombra antes de desenhar mais um modelo.
Por quê: cada modelo feito em cima de valor solto encarece a arrumação depois.
Achado: os doze estilos antigos do arquivo nunca tinham sido aplicados. Existiam na biblioteca e em nenhuma tela.
D5 · A caixa do nome da loja deixa de ser fixa
Tinha 75 pixels, centralizada. Virou flexível nos dois ramos.
Por quê: nome de loja é dado de terceiro, e dado de terceiro não respeita a sua caixa.
D6 · A sacola surpresa entra, com o risco escrito
Ela vende com um campo só e abre o ramo de alimentação. O risco ficou escrito ao lado: o produto pode virar isso e mais nada.
Por quê: quem decide é a equipe do cliente, e ela só decide de verdade com o risco na mesa.
D7 · Card menor e dois modos de leitura
Em setembro voltei ao feed. O card encolheu até caber um inteiro e um pedaço do próximo. E o feed ganhou dois modos: o contínuo, com cabeçalho e botão fora da mídia, e o de tela cheia, um card por tela.
Por quê: o card grande empurrava o botão de compra para fora da tela. Card menor mostra mais oferta por sessão, e o produto vive de oferta vista.
Abri mão de: mídia grande como padrão. Ela virou um modo que a pessoa escolhe.
D8 · A palavra "feed" saiu da tela
A arquitetura continua com um feed por aplicativo parceiro. Na tela, a pessoa escolhe raio e lugar.
Por quê: feed é palavra de quem constrói o produto. Quem compra pensa em distância. A ideia saiu de uma conversa com o designer da Directo.
06 Craft e sistema
Card de referência em 3:4, grade de 8 pixels, escala de tamanhos com 12 degraus. No fim ficaram cinco tipos de card, com botão de 40 pixels em preto e selo em três níveis.
A entrega para engenharia, contada no arquivo:
- 40 componentes em quatro camadas, todos com descrição
- 113 variantes
- 27 estilos de texto, medidos nos componentes
- 0 cores sólidas soltas
07 Resultado
- 11 dos 13 modelos rodam, no desenho, com a foto que a loja já tem. Um pede produção paga, bancada pela indústria, e um não usa foto. Como o produto não está no ar, isso ainda não virou gasto medido.
- 39 combinações desenhadas e 0 medidas novas. Os treze modelos entram no sistema que já existia.
- 8 decisões, de D1 a D8, validadas com a equipe do cliente, cada uma com o motivo escrito.
- 2 modos de leitura no feed a partir de setembro.
08 O que eu faria diferente
Medir contra uso real. A comparação diz qual modelo aguenta qual oferta. Qual vende mais, ela não diz, e esse é o número que falta.
Testar com quem compra. Validar com a equipe do cliente reduz risco de produto, mas não substitui teste com usuário.
Procurar o gargalo mais cedo. O custo da foto só apareceu na análise, no fim da semana. Se eu tivesse visto isso no primeiro dia, o projeto teria menos modelo de card e mais desenho de como a loja produz a imagem.