O desconto não é garantido
A oferta depende da análise de cada compra. Anunciar uma economia que não se confirma no caixa custa mais caro que uma conversão a menos, então a interface trata todo valor prévio como estimativa.
Voltar ao trabalho
App mobile · iOS e Android Varejo alimentar · Desconto no ponto de venda 2024 – 2025
Saber quanto vai dar antes de chegar no caixa
A BuyHelp intermedia desconto direto no caixa do supermercado, sem cupom e sem cashback. Entrei como product designer do squad, ao lado de PM, PO e engenharia. Parti da pesquisa levantada pelo time, desenhei os dois aplicativos — o do consumidor e o do credenciado — e organizei o design system que sustenta as duas pontas.
- O problema
- A pesquisa apontou que 80% dos entrevistados sentem ansiedade ao fazer compras sem saber o total até o caixa, numa despesa que ocupa de 30% a 50% do orçamento da casa.
- O caminho
- Antecipar o número em vez de deixá-lo para o caixa: valor estimado da lista em tempo real, recalculado a cada item, com a economia visível ao lado.
- O resultado
- +500 mil usuários ativos e +150 mercados na plataforma, com nota média 4.7 nas lojas, em avaliações que citam a facilidade de uso.
01 — O mecanismo
O desconto é decidido no caixa, não na gôndola
Entender esse mecanismo mudou a forma como desenhei as telas. A BuyHelp não altera o preço da etiqueta: ela recebe o pedido no momento em que o caixa fecha a compra, analisa e devolve uma proposta de desconto que o usuário aceita ou recusa. Tudo isso acontece em fração de segundo, dentro de uma fila.
A margem do mercado é o limite
Do outro lado existe um supermercado operando com margem estreita. Nenhuma tela do consumidor podia levar o credenciado a vender no prejuízo, e o painel dele precisava tornar isso verificável.
O caixa não é lugar de aprender a usar o app
Fila, carrinho, sacola e operador esperando. Qualquer passo extra no ponto de venda aumenta a chance de desistência. Por isso o app não entra nesse momento: o vínculo é feito pelo CPF, que a pessoa já sabe de memória.
02 — Discovery
A pesquisa que sustentou as decisões
O estudo de campo foi conduzido pelo time. Participei da etapa de pesquisa a partir dessa base: revisei as entrevistas, ajudei na síntese e traduzi os achados em requisitos de interface. As decisões de tela deste case partiram desse material.
-
Levantamento
Comportamento e hábito de compra: frequência, ticket médio e como o orçamento do mês é montado.
-
Entrevistas
Conversas com usuários reais sobre a dor de comprar sem saber o total, com foco em quem tem 40 anos ou mais.
-
Observação
Estudo de campo dentro do supermercado, acompanhando a compra até a fila do caixa.
-
Síntese
Mapa de oportunidades, recorte do que entrava no MVP e a persona usada como referência dali em diante.
dos entrevistados relataram ansiedade ao comprar sem saber o valor total até o caixa. O dado aponta menos para desorganização e mais para falta de informação no momento em que ela ainda mudaria a decisão.
do gasto mensal da família vai para o mercado. É a maior despesa variável da casa, e uma em que o valor só aparece depois de todas as escolhas já terem sido feitas.
é o centro do público. A referência de interface desse grupo não é o banco digital, e sim aplicativos como INSS, Caixa e WhatsApp. Usei esses três como parâmetro de padrão familiar ao desenhar as telas.
03 — Persona
A persona que guiou as decisões de interface
A persona saiu da síntese da pesquisa e virou critério prático: sempre que uma solução dependia de um comportamento que a Maria não teria, ela era revista.
Maria Santos, 47
Professora · Curitiba, PR · familiaridade digital básica/intermediária
“Preciso saber quanto vai dar antes de chegar no caixa, senão o mês não fecha.”
Objetivos
- Controlar o gasto do mês com mercado
- Economizar para aumentar o poder de compra da família
Dores
- Não saber o valor total até o caixa
- App cheio de informação e de coisa piscando
- Orçamento apertado com o mercado pesando demais
O que ela usa
- WhatsApp, INSS, Caixa
- Pix como forma principal de pagamento
O que isso virou no produto
- Corpo de texto de 14px para cima, nunca cinza claro em conteúdo
- Uma ação primária por tela, sempre no mesmo lugar
- Linguagem coloquial no lugar de rótulo de sistema
04 — Critérios
Quatro critérios de projeto
Escrevi esses quatro critérios no começo do projeto e passei a usá-los como checklist nas revisões com o time. Valem tanto para o app do consumidor quanto para o do credenciado.
Estimativa nunca vira promessa
Todo valor calculado antes do caixa aparece rotulado como estimado, com a ressalva de que o preço pode mudar na hora da compra. A ressalva custa impacto visual, e é o que mantém o número confiável quando a compra é fechada.
O número vem antes da navegação
Quanto já economizei e quanto essa lista vai dar são as duas perguntas centrais do produto. As duas são respondidas sem rolagem e sem toque: uma no topo da home, a outra fixa no rodapé da lista, acompanhando o usuário enquanto ele marca os itens.
Cor nunca é o único sinal
Desconto, erro e confirmação carregam ícone, rótulo e posição próprios. Isso atende daltonismo e também o uso no corredor do mercado, onde a luz forte e o reflexo na tela reduzem a percepção de diferenças sutis de matiz.
Erro previsto é erro desenhado
CPF já cadastrado, telefone em uso, produto fora da base e SMS que não chega. Cada um desses casos tem tela própria, com o caminho de saída dentro dela, em vez de um alerta genérico.
05 — Escopo
Dois produtos, três perfis, um arquivo
O mesmo sistema atende o consumidor, o supermercado credenciado e o afiliado que traz novos mercados para a rede. São três contextos de uso distintos rodando sobre a mesma base de componentes.
| Território | O que tem dentro |
|---|---|
| 146 telas | de nível superior na página do MVP 2025, sem contar variação de estado |
| 3 perfis | cliente, credenciado e afiliado, com seleção de perfil no mesmo app |
| 6 passos | no registro, do telefone à home, incluindo termos e boas-vindas |
| 9 telas | só no fluxo de geração de lista pela IA, contando progresso e retorno |
| 5 relatórios | de exceção no painel do credenciado, cada um com sua regra de negócio |
| 5 passos | no fluxo de exclusão de conta, com confirmação digitada no último |
O arquivo tem duas frentes paralelas: a versão de lançamento, congelada para o time de engenharia, e o APP FULL, onde os fluxos novos eram testados antes de entrar na versão estável.
Como o design entrava no time
Recorte do que entrava em cada release
A priorização era discutida a partir dos achados de pesquisa e das regras de negócio. Quando um fluxo saía do escopo, a decisão vinha dessa conversa, não da tela.
Componentes nomeados junto e estados especificados
Os componentes foram nomeados com os desenvolvedores para bater com o que já existia em código. Cada fluxo descia com carregamento, erro e vazio desenhados, não só o caminho feliz.
Regras de margem traduzidas em interface
Os relatórios do credenciado saíram de regras definidas pelo time de negócio. Meu trabalho foi transformar cada uma delas em uma leitura que o gerente de loja entendesse sem treinamento.
06 — Entrada
O cadastro depende do CPF, e o CPF é o que mais trava o cadastro
O CPF é o que liga a pessoa ao desconto aplicado no caixa, então ele é obrigatório. Pedir esse dado logo na abertura, num formulário longo, aumenta a desistência. Dividi o cadastro em passos curtos e em linguagem direta, e posicionei o dado sensível depois de a pessoa já ter avançado algumas etapas.
Arraste para o lado →
Uma pergunta por tela
“Digite o seu número de telefone pra gente se conhecer melhor” é o título da tela, não o rótulo do campo. O tom veio da linguagem registrada nas entrevistas e afasta a tela do formato de formulário bancário.
Teclado numérico com letras
O teclado do código de verificação mostra as letras sob os números, como no teclado telefônico tradicional. É um detalhe pequeno que aproxima a tela de uma referência que o público já conhece.
Exceção desenhada, não improvisada
CPF já cadastrado e telefone em uso têm tela própria, com o caminho de recuperação dentro dela. Nenhum dos dois termina em um alerta vermelho sem continuação.
07 — Home
A home responde primeiro quanto já foi economizado
O total economizado fica numa faixa verde logo abaixo do banner, antes de qualquer navegação. Em seguida vêm o mercado credenciado mais próximo e o histórico de compras, com o valor cheio riscado ao lado do valor efetivamente pago.
- Histórico com o antes e o depois. R$ 169,64 riscado, R$ 157,87 pago e +R$ 11,77 em verde. O extrato é o que comprova a economia depois da compra.
- Mercado mais próximo com rota. Um toque abre o mapa do celular. Recriar navegação dentro do app não se justificava.
- Barra inferior de quatro itens. Alvos grandes e sempre visíveis, sem menu recolhido.
- Duas versões de home. Uma para quem ainda não comprou e outra para quem já tem histórico, porque o estado vazio era o momento mais frágil da experiência.
08 — O núcleo
A lista de compras é o centro da experiência
A economia depende de a BuyHelp saber o que a pessoa pretende comprar antes da compra. Isso faz da lista o ponto por onde passam a navegação e as decisões do app, e foi a definição que o squad tomou como base para priorizar o MVP.
Arraste para o lado →
O total mora no rodapé
Valor estimado fixo na base da tela, recalculado a cada item marcado. É o retorno que permite ajustar a compra enquanto ela ainda está sendo montada.
Cor e ícone como identidade
Cada lista recebe cor e ícone no momento da criação. É o que permite localizar uma lista específica no meio de dez outras sem precisar ler os nomes.
Compartilhar sem cadastro extra
O convite de lista compartilhada sai pelo WhatsApp, canal que a pesquisa apontou como o lugar onde a família já combina a compra. Quem recebe entra direto no fluxo de aceite, com a lista visível.
09 — Bhia
A IA que sugere trocas de produto e mostra a economia
A Bhia é a inteligência da BuyHelp. Na interface ela aparece em dois momentos: montando a lista a partir do histórico de compras e, com a lista pronta, propondo substituições mais baratas. As duas situações envolvem valores que a pessoa vai pagar, então as duas exigiram regra explícita de comunicação.
Nove telas para que a espera não bloqueie o app
A Bhia se apresenta, pergunta se a compra é semanal ou mensal e pede nome, ícone e cor da lista antes de processar. O processamento não bloqueia a tela: aparece uma barra de progresso, a pessoa pode sair e usar o resto do app, e um snackbar na home avisa quando a lista fica pronta.
Comparação lado a lado, com o desconto explícito
“Quer pagar ainda menos nessa compra?” abre a comparação entre o item escolhido e a sugestão da Bhia, os dois com preço e selo de desconto. A troca pode ser feita item a item ou de uma vez, com a economia total somada antes do aceite.
E logo abaixo, em corpo menor: valor estimado, pode variar conforme os preços na hora da compra. Essa segunda linha foi discutida com PM e engenharia antes de entrar.
- Por que ela ficou. O desconto real só é conhecido no caixa. Sem a ressalva, qualquer diferença entre o previsto e o cobrado vira reclamação e avaliação negativa na loja.
- Como ela entrou sem quebrar a tela. O número segue em destaque e a ressalva ocupa uma linha de apoio logo abaixo, com hierarquia clara entre os dois.
- O critério aplicado. Quando a tela mostra um valor que a pessoa vai pagar, o teste não é o quanto ela convence antes, e sim o quanto ela continua correta depois da compra.
10 — Confiança
Dado sensível, alteração verificada e conta que a pessoa consegue apagar
Um produto que guarda CPF e histórico de compra tem obrigações de privacidade e de segurança. Esses fluxos foram desenhados com o mesmo nível de detalhe dos fluxos de uso, em conversa com o time sobre o que a operação conseguia sustentar.
-
Trocar número, e-mail e senha
Cada alteração de dado de contato passa por verificação, porque o número é a chave de acesso da conta.
-
Exclusão de conta em cinco passos
Despedida, consequências reais do cancelamento, alternativa de falar com a equipe, confirmação e conclusão.
-
Confirmação digitada no passo irreversível
Para apagar de vez, a pessoa digita EXCLUIR CONTA. O botão destrutivo é o único vermelho da tela e o cancelar continua sendo o botão de peso.
-
Termos por perfil
Cliente, credenciado e afiliado assinam termos diferentes, com a versão certa amarrada ao perfil dentro do app.
O fluxo de exclusão tem retenção: mostra o que a pessoa perde e oferece falar com a equipe. Retenção sem dark pattern foi a regra combinada com o time — em nenhum dos cinco passos o botão de sair fica escondido, desabilitado ou disfarçado de outra ação.
11 — Lado B2B
O app do credenciado existe para proteger margem
Do lado do consumidor o produto entrega economia. Do lado do credenciado ele precisa mostrar que essa economia saiu de otimização e não da margem da loja. Esse app é o instrumento dessa verificação, e é onde o design trabalha junto das regras de risco definidas com PM e engenharia.
Arraste para o lado →
Vendas, intermediações e aproveitamento
Quantidade e valor de pedidos, quantos deles passaram pela BuyHelp, a barra de progresso de aproveitamento contra a meta e a taxa de conversão. Todo indicador traz a comparação com o mês anterior, para que o número tenha referência.
Consolidação multiloja
Uma rede seleciona quais lojas entram na conta — “8 lojas selecionadas”, com o aviso de que o número exibido é a soma delas. O recorte é definido pelo gerente e fica declarado na tela, em vez de ficar implícito num filtro.
Os cinco relatórios de exceção
Margem negativa
Produtos que estão saindo abaixo do custo. É o alerta mais crítico do painel e usa o vermelho do tema.
Produtos custo zero
Itens sem custo cadastrado — invisíveis para qualquer cálculo de margem até alguém corrigir.
Preço tabelado
Itens que não podem receber desconto por regra externa, como acordo com a indústria.
Lista de exclusão
O que a loja decidiu tirar da mesa, produto a produto, sem sair da plataforma.
Blacklist
Bloqueio de nível superior, aplicado antes de qualquer proposta de desconto ser gerada.
Cada relatório é um limite que o lojista define
São cinco formas de o supermercado delimitar onde o desconto pode ou não ser aplicado. Elas transformam a plataforma em algo auditável pelo lado de quem paga a conta.
12 — Design system
O sistema que sustenta as duas aplicações
Duas aplicações, três perfis de usuário e um time de engenharia consumindo o arquivo em paralelo ao desenho. O sistema foi montado para esse ritmo: poucos tokens, componentes nomeados junto com os desenvolvedores e nenhuma variação sem uso real em tela.
Cor · cada tom com um papel definido
Ação
Primária
#FF6600
Marca e ação principal do app do cliente. Recebe apenas texto escuro (5,9:1); com branco fica em 2,9:1 e não passa em AA.
Credenciado
Secundária
#008080
Tema inteiro do app do lojista. 4,8:1 com branco, o que libera texto e ícone sobre fundo cheio.
Economia
Sucesso
#1FC16B
Economia e confirmação. Carrega tinta escura (8,2:1); com branco cai para 2,1:1 e deixa de ser legível.
Risco
Erro
#D32F2F
Erro de formulário, margem negativa e ação irreversível. Uso restrito a esses três casos.
Tinta
Preto
#1A1A1A
Título e número. Nunca preto puro, para suavizar o contraste sob a luz forte do corredor.
Texto
Text / Primary
#454A53
Camada semântica, da segunda geração de tokens. 8,9:1 no branco, confortável para leitura do público 40+.
Apoio
Medium
#757575
Legenda e metadado. 4,6:1, no limite do AA, por isso não é usado abaixo de 14px.
Estrutura
Gray 200 · Stroke
#E0E0E0
Borda de campo e divisória. O sistema separa por linha e espaço, quase nunca por sombra.
Placeholder é o único cinza fraco do sistema (#9EA2AD, 2,5:1) e ele nunca carrega informação — todo campo tem rótulo próprio acima, então o texto de exemplo pode sumir sem que ninguém perca o contexto.
Espaço, raio e traço
Escala de 4 em 4, com 2px reservado para o par rótulo e asterisco. Um raio único para as caixas e um raio completo para as pílulas. Traço de 1px em todo o sistema.
| Token | Valor | Onde vive |
|---|---|---|
spacing/gap/3xs | 2px | Rótulo e obrigatoriedade |
spacing/padding/xs | 4px | Ícone junto de texto |
spacing/gap/xs | 8px | Respiro interno padrão |
spacing/padding/m | 12px | Campo, cartão e item de lista |
radius/m | 8px | Campo, cartão, bottom sheet |
radius/round | 9999px | Avatar, chip e bandeira de país |
stroke/s | 1px | Toda borda do sistema |
Componentes principais
- Button / primary em 56px de altura, alvo confortável para mão ocupada.
- Input field em 44px, com rótulo, marcação de obrigatório e teclado certo por tipo de dado.
- List item com avatar, título, contagem e chevron — o componente mais reaproveitado do app.
- Bottom sheet para criação e seleção, mantendo o contexto da tela de trás visível.
- Snackbar e modal para o retorno da IA, um para avisar e outro para chamar de volta.
- Cartão de relatório do credenciado, com a cor variando por classe de exceção.
Migração em andamento: o arquivo tem duas gerações de token convivendo. A primeira é
nomeada por cor (Primária, Preto, Medium) e a segunda por papel
(colours/text/primary, colours/text/brand-1). A troca começou pelos
componentes de formulário, que eram os mais reaproveitados, e avançava conforme cada
tela voltava para revisão.
13 — Ergonomia
Desenhado para uso em pé, com uma mão e pouco tempo
Alvo grande
Ação principal em 56px e campo em 44px, com espaçamento suficiente para dedo em movimento.
Contraste medido
Texto e ícone verificados par a par. Nas combinações que não passavam, o ajuste foi na cor de fundo, não na legibilidade.
Teclado certo
Numérico para telefone, CPF e código de verificação, para reduzir o tempo de preenchimento.
Linguagem sem jargão
“Quanto você já economizou” em vez de “saldo acumulado de cashback”, seguindo o vocabulário registrado nas entrevistas.
14 — Resultado
O que o produto entregou depois do lançamento
+500 mil
usuários ativos na plataforma
+150
mercados credenciados usando a plataforma
4.7
de nota média nas lojas, com os comentários citando a facilidade de uso
Números informados pela BuyHelp, referentes ao período do projeto. App disponível na App Store e no Google Play.
Aprendizados
- Clareza é funcionalidade. Para um público 40+, simplicidade e linguagem direta pesaram mais do que qualquer recurso adicional na interface.
- Referência familiar reduz esforço. Aplicativos como INSS e Caixa serviram de parâmetro de padrão já conhecido pelo usuário.
- Validação ao longo do processo. Entrevistas e testes com usuários reais durante o desenvolvimento evitaram retrabalho depois.
O que ficou encaminhado
- Unificação dos tokens. A migração para os nomes semânticos continuava, a partir dos componentes de formulário.
- Métrica por passo do cadastro. A instrumentação do funil estava mapeada com PM para medir onde o registro perde usuário.
- Teste da ressalva de valor estimado. A frase entrou por decisão de negócio e estava na fila para validação com usuários.
Disciplinas
Próximo case
Julius K9 USA