Directo · Local AdsApp de anúncio local · fluxo e códigoleitura de 5 min
Do fluxo ao aplicativo rodando em quatro dias.
Anúncio para a loja do bairro, do fluxo ao aplicativo rodando em quatro dias
- Cliente
- Directo
- Período
- Set. e out. de 2026
- Papel
- Fluxo, design system e código
- Escopo
- App de anúncio local
- 4 dias
- do fluxo no FigJam ao aplicativo navegável no simulador.
- 65
- telas de fluxo, e nenhum botão sem destino, contado por script.
- 85
- rotas no aplicativo em Flutter, lendo as mesmas cores e componentes das telas.
- 1.908 → 1.633
- componentes no design system do produto depois da limpeza para a engenharia.
00 Arquivo
| Cliente | Directo, cliente da Diletta |
| Produto | Local Ads · anúncio por raio para loja física, com saldo pré-pago |
| Papel | Product Designer Sênior na Diletta Solutions, a empresa onde eu trabalho. Fluxo, design system, telas e o aplicativo em código |
| Escopo | o fluxo do anunciante, o design system do produto, 65 telas de fluxo e o aplicativo em Flutter rodando no simulador |
| Plataforma | celular |
| Ferramentas | Figma, FigJam, Flutter, Claude Code |
| Período | 28 de setembro a 1º de outubro de 2026 |
01 Resumo
Problema. A Directo queria uma terceira frente: o comércio do bairro anunciando para quem mora perto. O pedido foi o mais simples possível, com código pronto no fim da semana.
Papel. Desenhei o fluxo, montei o design system do produto, as telas, e escrevi o aplicativo em Flutter com o Claude Code, ligado ao mesmo sistema das telas.
A decisão. Tirei tudo que um dono de padaria não usaria. O público virou um raio no mapa, e o dinheiro, um saldo pré-pago que ele controla.
Resultado. Quatro dias do fluxo no FigJam ao aplicativo navegável no simulador, com 85 rotas e nenhum botão sem destino.
Estado. Desenho aprovado e aplicativo de demonstração com dados de exemplo. A integração com a API ainda não foi feita.
02 Contexto
A Directo vende mídia dentro do varejo. O TicTac é o feed de ofertas, e o Creator é o aplicativo de quem produz a oferta na loja. Faltava o anunciante pequeno: a padaria, a farmácia, a loja de bairro, que paga pouco e quer aparecer para quem passa na porta.
Esse anunciante tem CNPJ, tem celular e não tem agência. Ele não sabe o que é segmentação e não vai aprender.
03 Restrição
Quatro dias. O chefe pediu fluxo, telas e código até 30 de setembro. Não havia tempo para desenhar um design system novo.
Um aplicativo novo, não o CPF Seguro, o app de proteção contra fraude, pintado de verde. Usei o design system da casa como base. A primeira versão das telas saiu com a cara do CPF Seguro em outra cor, e eu mesmo a descartei.
O anúncio passa por aprovação. Criativo de comércio local é recusado com frequência, e o lojista precisa saber por quê.
04 O problema em número
Uma padaria investe em anúncio quando cabe no caixa do dia. Por isso o saldo é pré-pago e o custo aparece por pessoa alcançada, centavos de cada vez, nunca como verba mensal.
05 Exploração
O fluxo antes das telas
O primeiro dia foi só o fluxo, no FigJam: entrar, criar o criativo, escolher o raio, oferta e período, prévia, publicar, aprovação, no ar. Cada desvio tem volta: recusado com motivo, rascunho, saldo zerado. O painel de desempenho fica acessível de qualquer ponto.
A primeira versão, descartada
Montei 35 telas com a gramática do CPF Seguro: barra de topo centralizada, faixas de aviso, lista para tudo. Trocar cor e fonte não bastou. Parecia o CPF Seguro em outra cor.
Refiz com uma regra: do design system vêm botão, campo, selo, ícone, cor e espaçamento. As peças do produto, como o cartão de saldo, o mapa com raio e o cartão de anúncio, são desenhadas para este aplicativo, com as peças do sistema por dentro.
06 Decisões
D1 · O público é só o raio
O lojista arrasta o raio e vê quantas pessoas cabem nele. Não existe filtro de idade, gênero ou interesse.
Por quê: quem decide é o dono da loja, entre um cliente e outro. Segmentação demográfica exige uma hipótese que ele não tem, e a padaria vende para quem passa na porta.
Abri mão de: precisão de público. Uma marca grande sentiria falta. O comércio de bairro, não.
D2 · Saldo zerado pausa, saldo novo volta sozinho
O anúncio consome saldo enquanto está no ar. Quando o saldo zera, ele pausa com aviso. Quando o lojista coloca saldo, ele volta ao ar sem nenhum outro passo.
Por quê: o medo do pequeno anunciante é gastar sem ver. Com pré-pago o teto é o que ele colocou, e a pausa automática protege o caixa sem tirar o anúncio do ar para sempre.
D3 · Publicar vem depois da aprovação
A criação tem quatro passos. Investimento e duração ficam na tela de publicar, depois que o anúncio foi aprovado.
Por quê: pedir dinheiro antes da aprovação é cobrar por algo que pode não ir ao ar. Essa ordem veio de uma proposta do time da Directo, e eu adotei.
D4 · Toda ação mora no rodapé
Botão nunca fica solto no meio da tela. Ação vai no rodapé fixo, e voltar, fechar e passo ficam na barra de cima, inclusive sobre o mapa.
Por quê: em quatro dias, uma regra que vale para todas as telas economiza uma decisão por tela.
07 Craft
Cada tela tem embaixo uma nota que diz para onde vai cada botão. Um script percorreu as 65 telas e contou zero botão sem destino.
No código, uma regra de leitura do desenho: um desenho no Figma que só muda um componente é estado da mesma tela, e não tela nova. Enviando e enviado, Pix copiado e vencido, a aba trocando. O primeiro teste no simulador reprovou justamente isso, e foi o que mais mudou da primeira para a segunda versão do aplicativo.
08 Resultado
65 telas de fluxo e 8 de direção visual, com conta, equipe, Pix, cartão, senha e avisos. O design system do produto limpo para entrega à engenharia: de 1.908 para 1.633 componentes e de 73 para 63 páginas, sem cortar nada que ainda estivesse em uso.
O aplicativo em Flutter tem 85 rotas e roda no simulador do iPhone com dados de exemplo. Ele lê as mesmas cores e componentes das telas, publicados como versão do design system, então mudar a marca no sistema muda o aplicativo.
Não está no ar, então não tenho número de uso.
09 O que eu faria diferente
Eu mostraria quatro telas de direção antes de montar o fluxo inteiro. Descartei 35 telas que um rascunho teria barrado no primeiro dia.
E levaria a primeira versão a um lojista de verdade. A regra do raio e a do saldo saíram de conversa com o cliente, e nenhum dono de padaria tocou nelas ainda.