Delivery App,
do porquê ao pixel
Um case completo, feito para exercitar o processo inteiro: começa numa pergunta de pesquisa — por que criar mais um aplicativo de delivery? — e termina em onze telas de alta fidelidade prontas para prototipar.
Por que criar um aplicativo de delivery?
O delivery de comida já era popular antes da Covid-19, mas de 2020 em diante virou rotina para muito mais brasileiros. A pesquisa partiu de levantamentos de mercado sobre esse salto para entender o que mudou no comportamento: pedir comida deixou de ser exceção de fim de semana e passou a competir com cozinhar.
- Pergunta de partida — quais as vantagens reais para restaurante e cliente, e o quanto a pandemia acelerou isso?
- Desk research — dados de entidades do varejo sobre adoção de delivery no país.
- Recorte — foco em quem já pede com frequência e sente atrito na hora de escolher, não na hora de pagar.
- Saída — as decisões de interface do app inteiro se apoiam nessa leitura.
Onde cada coisa mora
Antes de desenhar tela, desenhei o mapa. A arquitetura organiza o app em quatro áreas que viram a navegação inferior — descobrir, buscar, pedidos e conta — e define o que aparece na home em ordem de prioridade.
- Cupom em destaque
- Filtros por categoria
- Carrossel de destaques
- Lista de restaurantes
- Termo livre
- Resultados por restaurante
- Resultados por prato
- Itens selecionáveis
- Quantidade por item
- Cupom de desconto
- Resumo e pagamento
- Cadastro e login
- Pedidos anteriores
- Endereços
- Cupom acima da dobra — é o gatilho que mais move quem já decidiu pedir.
- Filtros antes da lista — reduzir o universo custa menos do que rolar até achar.
- Carrossel de destaques — espaço editorial e comercial sem quebrar a leitura da página.
- Restaurantes em cartão — foto, nome, tempo e frete no mesmo bloco de decisão.
Estrutura antes de estética
Os wireframes fecharam a disposição de cada bloco e o fluxo completo: abrir o app, encontrar um restaurante, montar o pedido com observações e acompanhar até a entrega. Só depois disso o app ganhou cor.
Onze telas, um sistema só
A alta fidelidade cobre o fluxo completo em onze telas: abertura, home com busca, cupom, filtros, carrossel e lista de restaurantes; detalhe do produto com escolha de tipo e campo de observação; carrinho, pagamento e acompanhamento. Todas montadas sobre a mesma grade, com componentes repetidos em vez de redesenhados.
- Item selecionável no carrinho — dá para tirar algo do pedido sem apagar da lista, marcando e desmarcando.
- Cupom antes do resumo — o desconto aparece como uma linha própria, então o abatimento é visível, não implícito.
- Total fixo no rodapé — o valor acompanha a rolagem junto do botão de pagar; nunca é preciso subir para conferir.
- Contexto no item — foto, categoria, avaliação e preço no mesmo bloco, para decidir sem abrir o produto de novo.
- Barra de status real — as telas foram montadas no frame do iPhone 13 Pro Max, com as áreas seguras respeitadas.
A pesquisa é o que segura a mão na hora de desenhar
Sempre que uma decisão de layout ficava em dúvida, a resposta estava na pesquisa: o app é para quem pede com frequência e quer decidir rápido. Isso justificou o cupom no topo, os filtros antes da lista e o campo de observação em destaque — e não uma preferência estética minha.