App de campo · em dupla com Renato Garcialeitura de 13 min

Directo · Creator

O aplicativo de quem produz a oferta dentro da loja, e o modelo que decide quem publica em nome de quem

35: telas em quatro trilhos, com a tela inicial como único centro.
3 eixos: decidem o que cada pessoa vê e em nome de quem ela publica.
9: personas com mapa de empatia, e a lista de números de mercado da casa.
16: telas de alternativa, entregues com o diagnóstico do que existia ao lado.

Em dupla com o designer Renato Garcia. Cliente: Directo. Produto: Creator. Período: agosto e setembro de 2026.

A tela inicial de quem trabalhaA tela inicial responde uma pergunta só: o que eu faço agora. A resposta é uma missão, com o valor e a distância, e não uma lista para escolher. Embaixo dela vem o dia, a fila ordenada por recompensa por minuto, e o nível. A rolagem inteira tem 1.320 pixels, e é ela que é o entregável, não a primeira dobra.

00 Arquivo


Cliente	Directo
Produto	Creator · o aplicativo de quem produz o conteúdo da oferta
Papel	product design em dupla com Renato Garcia. Pesquisa de mercado, personas, o diagnóstico da proposta anterior, o desenho do aplicativo e o modelo de autorização, feitos a dois
Com	Renato Garcia · designer parceiro, processo dividido
Escopo	35 telas em quatro trilhos, o modelo de autorização, e o quadro de construção
Validação	com a equipe do cliente, decisão por decisão
Plataforma	mobile, e um painel na web para quem decide
Ferramentas	Figma, FigJam
Período	agosto e setembro de 2026

Uma linha. O feed de ofertas só existe se alguém produzir a oferta dentro da loja. Este é o aplicativo dessa pessoa: missão por produto, reserva com prazo, recompensa depois da aprovação, e um modelo de autorização que decide o que ela vê e em nome de quem ela publica.

01 Resumo

Problema. O feed do TicTac precisa de oferta nova todo dia: foto, texto e preço de um produto numa loja de verdade. Quem faz isso é a pessoa que o mercado chama de creator, e o aplicativo dela não existia. Existia um fluxo desenhado antes, e ele partia de premissas que o mercado do setor já tinha abandonado.

O que eu fiz. Levantei o tamanho do mercado com fonte pública, escrevi nove personas com mapa de empatia, medi o fluxo que existia ponto por ponto contra o que as plataformas do setor fazem, e desenhei a alternativa: 35 telas em quatro trilhos, com seis regras escritas antes do primeiro pixel. Mais o modelo de autorização, que é a peça que o desenho antigo achatava numa lista de três tipos de conta.

Resultado. As 35 telas, o modelo de autorização com três eixos e quatro tipos de vínculo, a tabela de nove linhas que diz o que cada um vê, e o quadro de construção escrito do estado final para trás, com dono e prazo em cada degrau.

Papel. Product design em dupla com o Renato Garcia. Pesquisa, personas, o diagnóstico, o desenho e o modelo de autorização saíram dos dois, e a equipe do cliente validou.

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 desenho porque muda quem é o usuário. Não é só quem compra. É também quem trabalha: o promotor de loja, o representante da indústria e a pessoa que produz conteúdo por conta própria. Cada um vê um pedaço diferente do mesmo dado, e essa foi a parte mais difícil do projeto.

O que a plataforma tem e uma rede social não tem. Ela sabe o código de barras do produto, o estoque daquela loja e a prioridade da marca. Então ela não pede conteúdo genérico: ela aponta para a gôndola certa. É esse o produto, e foi ele que decidiu a forma da tela inicial de quem trabalha.

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.

Quem produz o conteúdo não pode ver o dinheiro. Verba, alcance pago e retorno de campanha são do gestor, nunca de quem executa. Se aparecer na tela de quem produz, é defeito de escopo, não escolha de layout.

Um chapéu por vez. A mesma pessoa pode trabalhar na loja, representar uma marca e atender por uma agência. As três coisas dão permissões diferentes sobre o mesmo produto, e a tela tem que dizer qual delas está valendo agora.

O aplicativo não decide região. Quem produz não escolhe onde a postagem cai: isso vem do vínculo aprovado. Se a tela pedir essa escolha, ela abre uma decisão que a pessoa não tem autoridade para tomar.

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.

04 O problema em número

Os números abaixo são de fonte pública, levantados por mim para sustentar a discussão do produto. Estão aqui porque são eles que explicam por que o desenho foi para o lado de quem trabalha, e não só para o lado de quem compra.

A falta na gôndola. A ruptura no varejo alimentar brasileiro foi medida em 12,9% em março de 2024, contra 6% a 8% na média do varejo, e 38% das causas nascem dentro da loja. Cada ponto percentual de ruptura vale de 0,5% a 1% do faturamento, e 30% de quem não acha o produto compra no concorrente no mesmo dia.

O dinheiro que paga a conta. A verba de mídia de varejo no Brasil deve chegar a US$ 1,67 bilhão em 2026, com alta de 38,4%, terceiro ano seguido liderando o crescimento global.

A base de gente que produz conteúdo. São 1,28 milhão de pessoas no Brasil com dez mil seguidores ou mais. Metade ganha até R$ 5 mil por mês, e só 6% passa de R$ 20 mil. Conteúdo produzido por essas pessoas converteu 6,73 vezes mais no primeiro trimestre de 2026, contra 4,27 no trimestre anterior.

A prova de que a base vende quando enxerga o ganho. No primeiro ano do TikTok Shop no Brasil o volume de vendas cresceu 102 vezes, e o número de pessoas que vendem por afiliação cresceu 46 vezes.

Cruzando os quatro: o varejo perde faturamento por falta na gôndola, e 38% dessa falta nasce dentro da loja, onde ninguém está olhando. Existe mais de um milhão de pessoas que produzem conteúdo e ganham pouco. A plataforma que liga as duas pontas precisa de duas coisas ao mesmo tempo: um card que venda e uma pessoa em campo com missão, prazo e recompensa. O feed era metade do problema.

05 Exploração

Nove pessoas, e não cinco

Antes de desenhar o aplicativo de quem produz a oferta, escrevi nove personas, cada uma com mapa de empatia e proposta de valor lado a lado.

O rascunho tinha cinco e deixava quatro buracos, e cada buraco era um lado do negócio: quem compra, sem quem não existe venda; o time de produto do varejo, que é o validador técnico, porque o inventário da plataforma é o próprio aplicativo do varejista; a agência, que o cliente declara como um dos quatro públicos; e o lojista de shopping, que é a oferta mais frágil da cadeia.

Uma dessas personas mudou de cadeira por causa de um dado: em 2026 a verba de mídia de varejo está no orçamento de marca (71%) e de comércio eletrônico (54%), e a de promoção em loja caiu de 37% para 11%. Ela deixou de ser o time de promoção e passou a ser o time de comércio eletrônico.

A proposta que já existia, medida contra o mercado

Havia um fluxo desenhado antes de eu entrar nessa frente. Em vez de opinar, medi ponto por ponto contra o que as plataformas do setor fazem hoje, e escrevi as duas colunas lado a lado: o que a tela pede, e o que o mercado faz no lugar.

Saíram seis achados. Os três que mais mudaram o desenho:

A tela perguntava a persona antes do login. Nenhuma plataforma do setor pergunta isso na porta: a conta é única e o papel vem do vínculo aprovado. Perguntar na porta fecha a porta para quem é as duas coisas, e essa pessoa existe.
A sugestão automática mostrava o interesse da loja ("estoque alto, 47 unidades") e escondia o de quem ia produzir. As plataformas do setor ordenam por sinal de desempenho e mostram a comissão estimada.
Quem produz digitava o preço e o desconto. Margem é de quem tem o estoque. No mercado, a loja publica a faixa e a pessoa escolhe dentro dela.

A resposta não foi um documento de crítica. Foi uma alternativa desenhada, 16 telas, com a capa trazendo o diagnóstico e o desenho lado a lado. Levar alternativa medida em vez de opinião é o que faz a conversa caber numa reunião.

06 Decisões

D1 · Autorização são três eixos que se multiplicam

A pergunta que abriu o desenho do aplicativo foi "o que essa pessoa pode fazer". A resposta que existia era uma lista de três tipos de conta. Ela não fecha, porque a mesma pessoa trabalha numa loja, representa uma marca e atende por uma agência ao mesmo tempo.

Antes disso houve uma separação mais simples e mais importante: são duas pessoas, não uma. Quem executa recebe tarefa, produz e publica. Quem decide define verba, público e campanha, e trabalha num painel na web. O aplicativo é de quem executa, e é isso que explica o que não aparece nele.

O modelo que entrou tem três eixos: quem autoriza, o escopo e o grau. O escopo tem três recortes que se cruzam: lugar, produto e ação. O grau tem quatro degraus, e cada um pede mais verificação que o anterior: ver, executar, publicar direto e falar em nome da entidade. O que aparece na tela é a multiplicação dos três.

Por quê: a referência que resolve isso vem do banco, e não do aplicativo. Alçada de pessoa jurídica responde quatro coisas de uma vez: quem assina, até quanto, em nome de quem, e até quando.

Consequência escrita: a cadeia nunca cresce. O sub-escopo é sempre menor ou igual ao escopo, o grau nunca sobe, e a validade encurta a cada repasse. Uma agência com grau de executar não consegue dar o grau de representar nem querendo.

A árvore da autorização1400×1123O modelo escrito antes das telas: os três eixos, a fórmula que resolve o que aparece, e as três regras que o desenho encena. Cascata de revogação, exclusividade como bandeira do contrato, e um chapéu por vez.

D2 · Quem executa nunca vê verba, alcance pago nem retorno de campanha

Existe uma tabela de nove linhas por quatro colunas que responde, para cada tipo de vínculo, o que a pessoa vê: estoque, preço, exposição, prioridade, outras pessoas na mesma missão, verba, missão exclusiva, quem revoga e quem paga.

A linha de verba é nunca nas quatro colunas.

Por quê: granularidade de informação é regra de negócio, não preferência de tela. Quem trabalha na loja é o único que vê a quantidade em estoque; quem recebeu um convite de uma loja próxima vê apenas se tem, se está acabando ou se não tem. Sem essa distinção, duas pessoas fotografam a mesma gôndola e uma trabalha de graça.

Como o desenho resolve: reserva antes de executar, com prazo visível, e a missão aparece bloqueada para as outras enquanto estiver reservada.

Quem vê o quê1600×378Nove linhas de informação por quatro tipos de vínculo. É esta tabela que decide o que cada tela mostra, e ela existe porque a pergunta "quem vê o quê" não se resolve tela por tela.

D3 · Escrever a lista de trás para frente, e separar o reversível do estrutural

Esta decisão não é minha, e é a mais útil do projeto.

Eu apresentei as nove personas com mapa de empatia. A resposta do cliente foi que aquilo era teórico demais e não encostava na execução, e que o caminho era outro: partir do estado resolvido. Se eu estivesse no futuro, como eu ia querer que as coisas fossem, e o que eu fiz no passado para chegar lá. Na mesma conversa veio a segunda régua, do Bezos: a maioria das decisões é reversível, então decide-se rápido e corrige-se rápido; só a estrutural merece deliberação.

O que eu fiz foi transformar as duas coisas em quadro. Primeiro o estado resolvido, com data e cena escrita. Depois os degraus que levam até ele, cada um com o que trava se faltar, o dono e o prazo. E as decisões em duas caixas. Reversível: a proporção do card, a ordem dos elementos, o texto do botão, qual tipo entra primeiro. Isso não abre reunião, quem está fazendo decide e avisa. Estrutural: de onde vem o preço, quem tem login de operador, se a indústria pode empurrar conteúdo sem a loja aprovar. Essas vão para a mesa.

Por quê a persona não bastava: ela responde o porquê e não produz ordem de construção. Quem precisa decidir na segunda-feira precisa de lista com dono, não de mapa de empatia.

Abri mão de: consenso em tudo. Decisão reversível tomada sozinha irrita alguém uma vez; decisão estrutural tomada sozinha custa um trimestre.

O que eu aprendi: eu tinha trazido o método que eu conhecia em vez do método que a decisão pedia. As personas continuam no arquivo e continuam úteis, mas elas viraram insumo do quadro, não a entrega.

D4 · O preço nunca passa pela mão de quem publica

Quem produz a oferta não digita preço. Ele lê o código de barras do produto na gôndola, o sistema busca aquele item no catálogo e devolve a oferta vigente com o preço.

Por quê: preço em loja é dinâmico e a margem é de quem tem o estoque. Preço digitado errado num supermercado não é defeito de tela, é fila no caixa e produto vendido a um valor que ninguém autorizou.

O que isso obriga: o leitor de código de barras deixa de ser conveniência e passa a ser peça obrigatória do primeiro lançamento.

D5 · Nada publica fora de campanha

Todo conteúdo publicado está amarrado a uma campanha, e a campanha é criada antes, por quem decide. Quem produz chega, vê as campanhas disponíveis e escolhe. Sem campanha ativa, o botão de publicar não existe.

Por quê: conteúdo solto não tem quem pague nem quem responda por ele. Amarrar na campanha é o que transforma trabalho em coisa faturável, e é também o que dá à marca o direito de recusar.

07 Craft

O fluxo único, 35 telas1600×1213As 35 telas num quadro só. A entrada é linear à esquerda, a tela inicial é o único centro, e dela saem quatro trilhos, um por aba: a missão, criar, ganho e conta. Nenhum trilho conversa com outro, e todos devolvem para o centro. Seta cinza é caminho principal com o gesto escrito em cima, seta de acento é saída do centro, e seta de aviso é desvio, com o motivo ao lado.

Seus vínculos786×2600A rolagem inteira da tela de vínculos, que é onde o modelo de autorização aparece para quem usa. Quatro relações, não uma lista de empresas, e só uma delas está em uso por vez.

Vínculo com a loja — As duas relações que mais mudam o que a tela mostra, lado a lado. Quem trabalha na loja vê a quantidade em estoque. Quem recebeu convite de uma loja próxima vê só tem, acabando ou sem, porque quantidade é dado de dentro. À direita, quem decide o alcance da postagem, que nunca é quem produz.

Convite aberto — As duas relações que mais mudam o que a tela mostra, lado a lado. Quem trabalha na loja vê a quantidade em estoque. Quem recebeu convite de uma loja próxima vê só tem, acabando ou sem, porque quantidade é dado de dentro. À direita, quem decide o alcance da postagem, que nunca é quem produz.

A missão aberta — FluxoA missão do começo ao fim. A reserva trava a tarefa por 45 minutos e ela aparece bloqueada para as outras pessoas, senão duas fotografam a mesma gôndola e uma trabalha de graça. Na última tela a pessoa informa quantas unidades achou, e o aplicativo mostra o que o sistema dizia: a divergência entre nove e doze é o dado que a marca compra.

Reservada, com prazo — FluxoA missão do começo ao fim. A reserva trava a tarefa por 45 minutos e ela aparece bloqueada para as outras pessoas, senão duas fotografam a mesma gôndola e uma trabalha de graça. Na última tela a pessoa informa quantas unidades achou, e o aplicativo mostra o que o sistema dizia: a divergência entre nove e doze é o dado que a marca compra.

Seis regras escritas antes do desenho, e é isso que precisa sobreviver, não os pixels: a hierarquia da tela inicial, o que a pessoa nunca vê, reserva antes de executar, localização como moldura e não configuração, recompensa só depois da aprovação, e a campanha amarrada depois de publicar.
A tela inicial tem 1.320 pixels de altura porque é rolagem, e a rolagem inteira é o entregável. Contexto, a missão de agora, o dia, a fila e o nível, nessa ordem.
Duas peças novas entraram no sistema do cliente por causa deste aplicativo: o card de missão e a barra de contexto.
A autorização virou peça de interface com quatro estados: em uso, ativa, em análise e revogada. O acento existe só onde a pessoa está agora, porque três cartões em acento fazem o acento parar de significar.

08 Resultado

35 telas sem repetição, em quatro trilhos, com a tela inicial como único centro.
Um modelo de autorização com três eixos, quatro tipos de vínculo e quatro graus, mais a tabela de nove linhas que diz o que cada um vê. A linha de verba é nunca nas quatro colunas.
16 telas de alternativa para a entrada e os papéis, entregues com o diagnóstico do que existia ao lado, ponto por ponto.
Nove personas com mapa de empatia e proposta de valor, e a lista de números de mercado que qualquer proposta da casa pode reusar.
Um quadro de construção escrito do estado final para trás, com o que trava se faltar, o dono e o prazo em cada degrau, e as decisões separadas em reversível e estrutural.
E a conversa que abriu depois: adaptar a linguagem do design system da casa para este cliente, em vez de ele manter a própria. Ficou combinado que é fundação de longo prazo, não item de sprint, e é a primeira vez que a linguagem é pedida fora dos produtos da casa.

09 O que eu faria diferente

Eu escrevi nove personas com dado de mercado, não com entrevista. Elas estão apoiadas em fonte pública e em conversa com a equipe do cliente, e isso é melhor que gosto. Não é o mesmo que ter falado com um promotor de loja dentro da loja. A visita ao supermercado ficou combinada como próximo passo, e ela deveria ter sido o primeiro.

As duas perguntas que só o campo responde continuam abertas: quanto tempo a pessoa tem entre duas tarefas, e o que ela faz quando o produto que a missão pede não está na gôndola.

O modelo de autorização é o desenho mais frágil do projeto, e não porque está errado. Ele depende de contrato: quem assina, quem revoga, quem paga. Enquanto essas três respostas forem de negócio e não de produto, o desenho carrega uma suposição por tela. Está escrito no quadro, mas suposição escrita continua sendo suposição.

Fontes

Ruptura no varejo alimentar, causas dentro da loja e efeito no faturamento: Central do Varejo, março de 2024
Verba de mídia de varejo no Brasil, 2026 e projeção: eMarketer, via Meio & Mensagem
Volume de vendas e afiliados no primeiro ano do TikTok Shop no Brasil: TikTok Newsroom
Base de pessoas que produzem conteúdo no Brasil e faixa de renda: Forbes e BrandLovrs
Conversão de conteúdo produzido por essas pessoas, primeiro trimestre de 2026: Videowise
Distribuição da verba de mídia de varejo por orçamento: Skai
Referências de plataforma usadas no diagnóstico: TikTok Shop, Nextdoor, Field Agent, Roamler e BEES Force

Próximo case

N26 · Regras