Café Brew
Um app de cafeteria para pedir sem fila, ser lembrado na volta e saber de onde vem o café
O Desafio
O Café Brew é uma cafeteria fictícia com três lojas em São Paulo. Ela não precisa de um app para vender café. Precisa de um app para vender café sem fila, lembrar de quem volta e transformar a visita em hábito, sem fazer quem chega pela primeira vez se sentir de fora.
"Como fazer um app que serve tanto para a cliente de sempre quanto para quem acabou de baixar, e que também ajuda quem está atrás do balcão?"
O projeto nasceu no desafio Daily UI e cresceu até virar um produto completo: 80 telas, dois apps (cliente e equipe), um design system próprio, auditoria de acessibilidade e um protótipo navegável com seis fluxos.
O Cenário Atual
O brasileiro bebe muito café, e cada xícara ficou mais cara. Volume caindo e faturamento subindo indicam um cliente mais seletivo. Quando cada visita vale mais, perder alguém para a fila custa caro.
1.400 xícaras por pessoa em um ano, cerca de 3,8 por dia (ABIC, nov/2024 a out/2025)
−2,31% no volume consumido, para 21,4 milhões de sacas (ABIC)
+25,6% no faturamento da indústria, que chegou a R$ 46,24 bilhões (ABIC)
~15% ao ano de crescimento no mercado de cafés especiais (Campo & Negócios, citado pela Central do Varejo, set/2025)
Quem já tem app mostra o tamanho da oportunidade
A Starbucks publica a cada trimestre quanto do negócio passa pelo app nos EUA. A escala é muito maior que a do Café Brew, mas o padrão é o que interessa: pedido antecipado e fidelidade crescem juntos.
33% das transações nas lojas próprias dos EUA são pedidos feitos pelo app
35,8 milhões de membros ativos no programa de fidelidade (últimos 90 dias)
59% do valor gasto nas lojas vem de membros do programa
(Starbucks · Digital IR Dashboard, 3º trimestre FY26)
E no Brasil, fidelidade já é hábito: 88,3% dos entrevistados usam programas de fidelidade e 84,8% preferem comprar de marcas que oferecem benefícios (ABEMF e Valuenet · Panorama da Fidelização, out/2025, 2.313 pessoas).
As Dores
As dores do balcão vêm das conversas com as personas e são hipóteses para testar. As do digital vêm de uma pesquisa sobre compra de café em apps e sites.
No balcão (hipóteses a validar com clientes)
Fila no horário de pico, sem saber quanto vai demorar
Descobrir na hora de pagar que o item acabou
Esperar em pé sem saber quando o pedido fica pronto
Cartão fidelidade de papel que se perde ou fica em casa
Pouca informação sobre a origem do grão e o preço justo
No digital (problemas citados por quem já comprou café em apps ou sites)
Busca ineficiente: 42%
Interface confusa: 20%
Checkout complicado: 10%
Erros técnicos e lentidão: 10%
(Paterni, MBA USP/Esalq, noticiado pela Central do Varejo em set/2025. A amostra é pequena: uso como sinal, não como verdade. Na mesma pesquisa, 70% nunca tinham comprado café on-line.)
Objetivo do Projeto
O app não substitui o balcão. Ele tira do balcão o que é espera, dúvida e repetição:
Pedir antes e só retirar, com hora estimada ou horário agendado
Saber em tempo real quando o pedido fica pronto
Ganhar recompensas sem cartão de papel
Entender a origem do grão e quanto fica para quem plantou
Dar à equipe uma fila organizada, fichas de preparo na tela e um painel da loja
Mapeamento da Experiência
Personas
Duas pessoas, o mesmo balcão. Elas foram pensadas para testar se o app funciona tanto para quem já tem histórico quanto para quem chega sem nenhum.
Marina S. · já é cliente Cliente desde março. Quer pedir o de sempre sem fila e saber quando fica pronto. O app lembra dela: Meu usual no topo da Home, cartão salvo e estrelas acumuladas.
Eloá R. · conta nova Acabou de baixar o app. Quer cadastro curto, ver os preços antes de decidir e pagar com Pix ou cartão. E não quer um app que finja intimidade com quem ainda não conhece.
Jornadas e curva de emoção
As duas jornadas acontecem no mesmo sábado, 24 de outubro, e cada cena usa uma tela real do protótipo, no estado em que aquela pessoa a vê.
Marina, em 11 minutos: entra com o celular cadastrado (13h48), vê o Meu usual e a fila de agora, monta um cappuccino com leite integral e soma um croissant, confere a sacola com o cartão salvo, recebe o pagamento aprovado (pedido #219) e, às 13h59, o aviso de pronto na tela de bloqueio. À noite, volta ao app por curiosidade e agenda um horário no cupping.
Eloá, do zero: escolhe Criar minha conta (13h05), faz o cadastro só com nome e celular, entende os avisos antes de dar permissão e encontra uma Home que sugere o mais pedido do dia, em vez de um histórico que ela não tem. Sem forma de pagamento salva, o app oferece Pix ou cartão, e o cartão se monta enquanto ela digita. A Fidelidade começa do zero, sem inventar nada.
Storytelling interativo
As duas jornadas também viraram um protótipo em HTML, montado com apoio de IA a partir do design no Figma: dá para escolher a pessoa, avançar cena a cena e ver a curva de emoção. Abrir o storytelling interativo
Quatro decisões de design
O que as duas histórias ensinaram e que guiou o resto do app:
Lembrar é o atalho. Meu usual, cartão salvo e Pedir de novo para quem volta.
Não fingir intimidade. Telas vazias honestas que ensinam o próximo passo, em vez de histórico inventado.
Toda espera tem resposta. Processando, aprovado, em preparo e pronto, sempre com texto, não só cor.
Um pedido, dois lados. O mesmo #219 aparece no celular da cliente, no KDS do barista e na TV da loja.
Da Dor à Tela
Cada dor tem uma resposta no protótipo:
Dor | O que o Café Brew faz |
Fila no horário de pico | Pedido antecipado com hora estimada, ou retirada agendada |
Esperar sem saber | Status em tempo real, aviso no celular e o número na TV da loja |
Item acabou na hora | Estoque no cardápio ("restam 2") e troca sugerida na sacola, com desfazer |
Pagar e ficar na dúvida | Telas de processamento e aprovado; Pix quando o cartão é recusado |
Fidelidade de papel | Estrelas automáticas (1 por real), nota fiscal pela câmera e café grátis aplicado na sacola |
Busca ruim e interface confusa | Busca com mais procurados, cardápio por categoria e favorito em cada card |
Checkout complicado | Cartão salvo, Meu usual na Home e Pedir de novo no histórico |
Origem sem transparência | Diário da fazenda, alerta de clima e preço transparente com quanto fica para quem plantou |
Quando algo dá errado
O app não trava: se o croissant esgota com o pedido montado, ele sugere uma troca ou deixa desfazer; se o cartão é recusado, a mensagem não culpa a pessoa e o Pix finaliza o pedido; e dá para cancelar até o barista começar, com estorno e a sacola mantida para outra hora.
Os Dois Lados do Balcão
Um app de pedidos só funciona se a equipe acompanha. Por isso o Café Brew tem também um app da equipe, pensado para tablet:
Turno: quem está usando, função no balcão, salão ou caixa
Tarefas: checklist de abertura da loja e calibração do moedor
Balcão: KDS com a fila organizada por horário e ficha de preparo legível a um braço de distância
Salão: reservas, mapa de mesas e check-in
Gerência: painel da loja com estoque e indicadores
TV de retirada: nome e número do pedido, sem chamar em voz alta
UI · Desenvolvimento da Solução
Protótipo de alta fidelidade
São 80 telas e seis fluxos configurados no modo de apresentação do Figma, cada um começando numa situação: primeiro acesso (Eloá), entrar no app (Marina), imprevisto na sacola, resgatar café grátis, pagamento recusado e equipe (tablet). Variáveis guardam sacola, estrelas, favoritos e a pessoa, então reiniciar o protótipo limpa tudo para testar de novo.
Design System
O Café Brew tem um design system próprio no Figma, com 591 variáveis em quatro coleções (tokens base com dois modos, espaçamento, cores do Café Brew e estados do protótipo) e 227 componentes e variantes. A tipografia combina Archivo nos títulos e números com Inter no texto corrido. Tudo segue uma grade de 4 pt: todas as distâncias são múltiplas de 4, respeitando a hierarquia do que a pessoa precisa ver primeiro.
Acessibilidade
Fiz uma auditoria das 80 telas com base nas WCAG 2.2, nível AA, com uma varredura no arquivo: a cor de cada texto contra o fundo calculado embaixo dele, o tamanho da fonte e o tamanho das áreas de toque. Depois dos ajustes de 25 e 31 de outubro de 2026:
452 → 34 trechos de texto abaixo do contraste mínimo. Os 34 que sobram são isentos pela regra: o texto da nota fiscal fotografada pela câmera e os campos desativados durante a validação do cartão
804 → 0 trechos com menos de 12 px (ficaram só rótulos curtos em caixa alta, de 11 px e peso 600 ou mais, que a regra permite)
228 → 0 áreas de toque com menos de 44 px: as 682 têm 44 × 44 ou mais
0 áreas abaixo de 24 × 24 px, o mínimo do nível AA
A maior parte foi resolvida com pequenas mudanças de tom: mesma cor, só mais escura, sem criar nenhuma cor nova. Os ícones continuam com os tons originais e os textos de estado ganharam tons próprios. Status nunca depende só da cor (sempre tem texto e ícone), e as animações têm alternativa para quem ativa "Reduzir movimento".
Plano de Teste com Usuários
O protótipo já tem um roteiro de teste com oito tarefas, cada uma com um cenário para ler em voz alta, o caminho esperado e o que observar. Por exemplo:
"Você passou na frente da Café Brew de Pinheiros e quer um cappuccino para retirar sem fila. Você ainda não tem conta."
"Sua reunião vai até 14h15. Peça um cappuccino com leite integral e um croissant para retirar às 14h30."
"O pagamento não passou. Termine o pedido mesmo assim."
Depois de cada tarefa, a Single Ease Question (de 1 a 7); no fim, o questionário SUS. Cinco participantes já mostram a maior parte dos problemas.
Como Medir
Hipóteses para validar depois do lançamento, cada uma com uma métrica que o próprio app consegue registrar:
Pedir antes reduz a espera: tempo entre pagar e retirar; % de pedidos antecipados no pico
Lembrar o cliente aumenta a volta: recorrência em 30 dias; uso do Meu usual e do Pedir de novo
Estados vazios honestos convertem: % de contas novas que fazem o primeiro pedido em até 7 dias
Feedback de espera reduz abandono: abandono entre Confirmar e Aprovado; recusas recuperadas com Pix
Fidelidade cria hábito: membros ativos em 90 dias; % do faturamento vindo de membros
As metas devem sair das primeiras semanas de uso, não de números de outras marcas.
Riscos e Limites
Adoção: 70% nunca tinham comprado café on-line. O balcão continua sendo o canal principal; o app precisa ser atalho, não obrigação.
Manutenção: cardápio, estoque e horários precisam estar certos. Um app desatualizado frustra mais que a fila.
Escala: os números da Starbucks mostram um padrão, não o resultado esperado para uma cafeteria com três lojas.
Privacidade (LGPD): pedir só o necessário, explicar cada permissão e permitir excluir a conta.
Próximos Passos
Rodar as oito tarefas com pelo menos cinco participantes
Validar as hipóteses do balcão com clientes reais
Especificar a leitura de tela (VoiceOver e TalkBack) para o desenvolvimento
Conclusões e Aprendizados
O Café Brew foi o primeiro projeto em que trabalhei com IA como parte do processo, e não só como ferramenta de consulta. Nos estudos anteriores eu fazia cada etapa à mão. Aqui, usei IA conectada direto ao Figma para levantar dados de mercado, montar o design system, auditar a acessibilidade das 80 telas e documentar as decisões. O ganho de tempo foi o mais visível: tarefas que levariam dias, como revisar o contraste de cada texto, passaram a levar horas.
Mas a IA acelerou a execução, não as decisões. O que resolver primeiro, como tratar um pagamento recusado, o que a equipe do balcão precisa ver: essas escolhas continuaram sendo minhas, e foi aí que a experiência com processos SAP fez diferença. O maior aprendizado foi entender essas novas tecnologias por dentro: saber o que delegar, como revisar o que volta e onde o olhar de designer continua indispensável.
Fontes (consultadas em outubro de 2026): ABIC · Indicadores da Indústria de Café 2025; Itatiaia; Central do Varejo (set/2025); Starbucks · Digital IR Dashboard, 4º tri FY25 e 3º tri FY26; PANROTAS / ABEMF e Valuenet (out/2025).
Comentários