O diferencial estava certo. O caminho até ele, não.
A conversão travada em 12% não vinha do diferencial do produto, vinha do caminho até ele. Refatoração completa sobre um Design System em React Native, começando pelo cadastro e pelo carrinho.
- Papel
- UX Designer Sênior
- Período
- 2026
- Time
- 10 devs, sem PM e sem área de produto. Designer único.
- Entregas
- Análise heurística, Design System, refatoração da jornada
O que mudou
32%
menos abandono no fluxo de cadastro
Funil de cadastro no Grafana, comparando as semanas antes e depois da refatoração
90%
de sucesso na tarefa de cadastro
Teste de usabilidade com o fluxo refatorado, medindo conclusão sem ajuda
100%
das telas novas construídas com o Design System
Auditoria das telas refatoradas contra os 26 componentes do pacote
01
O problema
O problema
A diretoria queria uma coisa e dizia isso com todas as letras: mais venda. O número que sustentava a conversa era duro. De cada dez pessoas que abriam o app, pouco mais de uma fechava a compra. A conversão estava em 12%, medida no Grafana, e ninguém sabia dizer em que ponto exato o funil vazava. Havia hipótese para todo lado: preço, entrega, catálogo, o app estar pesado.
O contexto tornava a pergunta mais difícil de responder. Eram dez desenvolvedores, nenhum PM, nenhuma área de produto e eu como designer único, acumulando todas as funções. Sem instrumentação e sem rotina de descoberta, a decisão do que construir na sprint seguinte nascia de opinião, e opinião é barata quando o funil vaza há meses.
02
A pesquisa
A pesquisa
Comecei pelo que dava evidência mais rápido. Rodei uma análise heurística das 32 telas do app usando as dez heurísticas de Nielsen, com escala de severidade de 0 a 4. Saíram 80 achados, que consolidei em 60 problemas únicos, sendo 14 prioritários e 3 catastróficos. O mapa por área foi o que mudou a conversa: o carrinho e o checkout sozinhos concentravam 34 dos 80 achados e abrigavam todos os catastróficos.
Cruzei isso com o que já existia e com o que faltava. Assisti às gravações de sessão, li os dados de churn e bounce no Grafana, e montei um benchmark competitivo extenso contra os players estabelecidos. Também escrevi a primeira persona de UX da empresa, que simplesmente não existia. O benchmark confirmou que o diferencial da casa era real: nenhum concorrente comparava o mesmo produto entre vários mercados para achar o mais barato.
Nenhum concorrente comparava o mesmo produto entre vários mercados. Mesmo assim o cliente ia embora antes de ver isso funcionar, porque para chegar lá precisava aprender um app que não se parecia com nenhum outro.
03
A recomendação
A recomendação
Levei à diretoria um plano em quatro frentes. Corrigir os 14 problemas prioritários começando pelo carrinho, onde a correção tinha o maior retorno imediato. Refatorar o app inteiro sobre um Design System novo, atacando a padronização, que era a heurística mais violada com 19 achados. Passar a acompanhar telemetria e métricas de produto em rotina. E ir a campo entrevistar cliente dentro do supermercado. Recomendei também parar de aceitar cadastro de quem estava fora da área de atendimento, o que enchia a base de gente que nunca poderia comprar.
O Design System nasceu para resolver o maior problema apontado pela própria análise. Ficaram 26 componentes em React Native sobre o Gluestack UI, e os tokens saíram em um pacote separado, com camada primitiva e semântica, servindo como fonte única de verdade para os apps e para o admin. Duas frentes a diretoria não comprou: ampliar o raio de atuação e deslocar o foco dos grandes varejistas para o pequeno e médio empreendedor regional.
04
O resultado
O resultado
O cadastro foi o primeiro fluxo a ser refeito, por ser a porta de entrada de tudo o que vinha depois. O abandono nesse fluxo caiu 32%, comparando o funil no Grafana antes e depois da refatoração. Nos testes de usabilidade com o fluxo novo, a taxa de sucesso na tarefa de cadastro ficou em 90%, com o usuário concluindo sozinho, sem ajuda e sem voltar atrás.
Do lado do time, o Design System deixou de ser promessa e virou o único caminho: 100% das telas refatoradas foram construídas com os componentes do pacote, e a padronização, que era a heurística mais violada do app, saiu do topo da lista. Junto com isso entrou a telemetria, que era o pedido menos visível do plano e o que muda o jogo no ano seguinte: a próxima decisão passa a ter dado, não palpite.
05
O que eu levei
O que eu levei
O que eu levo desse ciclo não é uma correção de rota, é a confirmação de um método. Foi a primeira vez que percorri o caminho inteiro na ordem certa, do achado à métrica: heurística, benchmark, dado, persona, sistema, refatoração, teste. Se recomeçasse hoje, faria de novo assim, e é isso que eu procuro em qualquer produto que eu pegue daqui pra frente.
A parte que não colou foi a que mexia no core business. A proposta de virar o foco para o pequeno e médio empreendedor regional foi bem recebida por quem opera o dia a dia e barrada na diretoria. Aprendi ali uma distinção que uso desde então: evidência resolve discussão de produto, mas mudança de modelo de negócio é decisão política, e precisa de outro tipo de construção, mais lenta e com mais gente junto.