Directo · Flash EnterprisePainel web da indústria · design e códigoleitura de 5 min
O painel saiu do Ant Design em uma semana.
O painel da marca na mídia de varejo, desenhado e codado com o mesmo design system dos aplicativos
- Cliente
- Directo
- Período
- Outubro de 2026
- Papel
- Pesquisa, design e front-end
- Escopo
- Painel web da indústria
- 197 → 0
- arquivos do painel importando Ant Design, em uma semana.O painel passou a usar o design system dos aplicativos.
- 51
- peças do design system na web, com a mesma cor, tipo e componente do Flutter.
- 34
- telas clicáveis no protótipo, em seis fluxos, antes da primeira linha de código.
- 185
- telas no Figma: o painel como estava codado e a versão nova.
00 Arquivo
| Cliente | Directo, cliente da Diletta |
| Produto | Flash Enterprise · o painel web onde a marca acompanha os próprios shoppers, produtos e campanhas |
| Papel | Product Designer Sênior na Diletta Solutions, a empresa onde eu trabalho. Pesquisa, protótipo, design system e o front-end da versão 1 |
| Escopo | a pesquisa de mercado, o protótipo de 34 telas, seis versões de estilo, a versão web do design system e a migração do painel |
| Validação | com Renato Garcia e a equipe da Directo, tela por tela |
| Plataforma | web, desktop |
| Ferramentas | Figma, FigJam, React, web components, Claude Code |
| Período | outubro de 2026 |
01 Resumo
Problema. O painel da Directo foi feito para o varejista e estava em Ant Design, uma biblioteca de componentes pronta, sem relação com o design system dos aplicativos. A Directo passou a vender para a indústria, e a indústria não se via nele.
Papel. Fiz a pesquisa, o protótipo e as versões de estilo. Depois levei o design system dos aplicativos para a web e migrei o painel com o Claude Code, em branch, com a revisão do time.
A decisão. Prometer transparência sobre o investimento, nunca performance. O painel mostra quem é o shopper e quanto do engajamento vira compra, e não promete retorno.
Resultado. Em uma semana, os 197 arquivos que importavam Ant Design caíram para zero. O painel e os aplicativos passaram a ter o mesmo design system.
Estado. A nova versão está na branch de release. O Shopper insights roda com dados fictícios até a API existir, e a primeira validação é com o Café Cajubá.
02 Contexto
A Directo liga mídia à venda física. A marca paga para aparecer no aplicativo do varejista e quer saber se isso vendeu.
Na reunião em que o foco virou a indústria saíram três dores: a verba vai às cegas, a marca não conhece nenhum dos seus clientes, e há muito dado e pouca orientação do que fazer com ele.
03 Restrição
A performance não se promete. A frase é do cliente: transparência no investimento sim, performance não. O painel não podia sugerir um retorno que a mecânica não mede.
O painel estava em produção. Migrar não podia parar o time, então tudo entrou em branch, peça por peça, com uma contagem que só podia descer.
Dado de verdade ainda não existe. A API dos insights vem depois. A tela tinha que ser decidida com dados fictícios, sem fingir que eram reais.
04 O problema em número
197 arquivos do painel importavam Ant Design. Cada tela nova repetia cor, espaçamento e componente à mão, e nada disso conversava com os aplicativos.
05 Exploração
Pesquisa, protótipo e seis versões
Comecei pela pesquisa de mercado e por uma sessão de design thinking com a Directo. O modelo de referência foi o de aplicativos de recompensa por nota fiscal, que medem a compra de quem viu e de quem não viu o anúncio.
O protótipo saiu com 34 telas em seis fluxos, todas clicáveis. Depois vieram seis versões de estilo, da identidade oficial em azul até a versão final com planos por nível. A regra que ficou da versão 5: o nível do plano só aparece onde muda permissão, limite ou dinheiro.
06 Decisões
D1 · O perfil é do público escolhido
Quatro públicos no topo: engajados, seguidores e lovers, que vivem no aplicativo do varejista, e compradores, que vêm de todas as redes. Escolher um troca o perfil e a evolução embaixo.
Por quê: "quem é o meu shopper" não tem resposta única. O seguidor e o comprador são pessoas diferentes, e misturar os dois esconde exatamente o que a marca quer ver.
D2 · Índice contra a rede, não número solto
Cada fatia do perfil traz um índice: 100 é a média da rede, acima de 110 é afinidade, abaixo de 90 é ausência.
Por quê: "64% mulheres" não diz nada sem saber quanto é na rede inteira. O índice transforma o dado em decisão de campanha.
D3 · Um gráfico por dado, e a forma vem de uma regra
Rosca quando há maioria clara, barras quando os valores são próximos. Quem escolhe é uma regra do design system, e não quem monta a tela.
Por quê: com cinco gráficos por tela, cada escolha a olho vira cinco estilos diferentes em um mês.
D4 · A versão 1 é o que o cliente consegue reagir
Ficaram quatro métricas, três filtros e o perfil do cadastro: gênero, idade, renda e filhos. O ciclo de vida do comprador ficou para a versão 2.
Por quê: recompra de repelente acontece duas vezes por ano, e a de requeijão três vezes por semana. A regra de novo, recorrente e fiel muda por categoria e por marca, e decidir isso sem cliente seria chute.
Abri mão de: a tela mais completa. Ganhei uma tela que vai à frente do cliente agora.
D5 · A web passou a usar o design system dos aplicativos
O design system nasceu em Flutter, para celular. Levei a mesma cor, o mesmo tipo e os mesmos componentes para a web como web components, e o painel trocou Ant Design por eles.
Por quê: manter dois sistemas é corrigir tudo duas vezes. Com um só, uma correção no design system chega ao aplicativo e ao painel na mesma versão.
07 Craft
Dois cartões de gráfico na mesma linha saíam com 310 e 290 pixels de altura. O defeito estava no cartão do design system, que não ocupava a altura da linha. Corrigi lá, publiquei uma versão nova, e o painel recebeu a correção junto com os outros produtos.
08 Resultado
197 arquivos com Ant Design viraram zero em uma semana, de 10 a 16 de outubro. O design system chegou a 51 peças na web, e o painel passou a usar a mesma fonte de cor, tipo e componente dos aplicativos.
No Figma ficaram 185 telas: as 83 do painel como estava codado e as 102 da versão nova.
O Shopper insights ainda não tem número de uso. A validação começa com o Café Cajubá.
09 O que eu faria diferente
Eu teria fechado o contrato de dados com a engenharia antes da quarta versão de estilo. Algumas telas pediam números que a API não vai ter, e só descobri isso desenhando o Shopper insights.
E mediria com o cliente o tempo até a primeira decisão de campanha, que é o número que diz se o painel funciona.