O Desafio
O Vina era um app local de delivery com potencial real, mas com uma experiência que prejudicava ativamente a retenção. Taxa de abandono de 68% no checkout, NPS negativo e rating de 2.8 na loja. Os números confirmavam o que os usuários relatavam nas avaliações: fazer um pedido era confuso e frustrante. A interface original tinha fluxos fragmentados em 8 etapas desconexas, hierarquia visual sem critério e zero previsibilidade. O usuário não sabia o que viria a seguir em nenhum momento da jornada. Informações de endereço eram pedidas em três pontos diferentes. O resumo do pedido antes da confirmação não permitia edição: qualquer erro obrigava recomeçar do zero. O desafio não era visua, era estrutural. Redesenhar toda a arquitetura de informação e os fluxos principais, e só então trabalhar o visual em cima de uma base que fizesse sentido.
68% Taxa de abandono no checkout: Cada etapa desnecessária multiplicava a chance de o usuário desistir antes de confirmar.
−12 NPS negativo: mais detratores do que promotores. Usuários que completavam o pedido ainda saíam insatisfeitos com a experiência.
8 Etapas: para concluir um pedido no fluxo original, com dados redundantes e sem feedback entre os passos.

Wireframes e Estrutura
Antes de desenhar qualquer interface, estruturei a experiência do zero. A arquitetura contempla todos os cenários: fluxos principais, estados vazios, erros, retornos. Tudo mapeado e documentado. Essa base sólida garantiu consistência em cada decisão que veio depois. De 8 para 4 etapas no checkout. Informações consolidadas, hierarquia clara, feedback em cada ação.

Decisões de UX e UI
UX – Checkout De 8 para 4 etapas: o fluxo original tinha 8 telas porque tratava cada campo como uma etapa separada. A reestruturação consolidou dados relacionados: endereço com seleção de endereços salvos ficou numa tela só; sacola e personalização de itens foram unificadas; resumo final passou a ter edição inline. Nenhum dado foi removido, foi reorganizado. Resultado: abandono de 68% → 31%. A redução não veio de simplificar o produto, veio de organizar a complexidade existente.
Confirmação com edição inline, sem voltar etapas: na tela de resumo antes do pagamento, cada item do pedido, o endereço e o método de pagamento são editáveis sem sair da tela. Um ícone de lápis indica editabilidade. A alternativa descartada (botão “Voltar” por seção) criava desorientação de contexto e fazia o usuário perder o progresso acumulado.

UI
Hierarquia visual para acelerar escolha: Na tela de Home, a hierarquia foi redesenhada para priorizar decisão rápida. Tempo de entrega, taxa e avaliação passam a ocupar a primeira camada dos cards, enquanto elementos secundários perdem destaque. Essa estrutura permite que o usuário compare restaurantes sem precisar abrir cada opção. A escolha acontece no próprio feed, o que reduz fricção no início da jornada e evita abandono ainda na fase de exploração.
Cor como guia de ação: A cor principal é aplicada apenas em estados de interação (categorias ativas na Home, ações primárias na tela de restaurante e confirmações na sacola). O restante da interface permanece neutro. Esse padrão se repete ao longo do fluxo inteiro, criando consistência de leitura. O usuário reconhece rapidamente onde pode agir, sem precisar interpretar a interface, o que reduz erros de navegação e mantém o ritmo da jornada até o checkout.
Consistência que sustenta a conversão: nas telas de checkout, resumo e pagamento, os mesmos padrões visuais e de interação são mantidos. Blocos de informação, campos e ações seguem a lógica já aprendida nas etapas anteriores. Essa continuidade elimina quebras de expectativa no momento mais sensível do fluxo. O usuário não precisa reaprender a interface para concluir o pedido, o que reforça sensação de controle e contribui diretamente para a queda de abandono no checkout (de 68% para 31%).

Sistema
Endereços salvos em destaque, novo endereço é ação secundária: usuários recorrentes ( a maioria) já têm um ou dois endereços salvos. A tela de endereço exibe a lista de endereços no topo como cards selecionáveis, e “Adicionar novo endereço” como ação secundária em texto no final. A hierarquia reduz o esforço do fluxo recorrente sem esconder o fluxo novo.
CVV na confirmação: o CVV é pedido no momento da compra, não no cadastro do cartão. Essa decisão reduz fricção no cadastro (etapa mais sensível ao abandono), mantém segurança no momento relevante e segue o padrão que usuários já conhecem de e-commerces. Cartão salvo mostra os últimos 4 dígitos com ícone de bandeira.
Restaurante fora do horário tem estado próprio, não desaparece do feed. Restaurantes fechados no momento aparecem no feed com overlay escurecido, badge “Fechado · Abre às 18h”. Sumir do feed prejudica a descoberta, o usuário pode querer favoritar ou planejar o pedido. O estado de fechado é informação útil, não motivo de exclusão.

Resultados
Métricas coletadas 90 dias após o lançamento do redesign. O checkout simplificado foi a mudança com maior impacto direto, mas a soma das decisões de UX é o que sustenta os resultados ao longo do tempo.
−54% Abandono no checkout: de 68% para 31% após colapso de 8 para 4 etapas
+50 Pontos de NPS: de -12 para +38 em 90 dias após o lançamento
4.3★ Rating na loja: era 2.8 antes do redesign. Melhoria em 6 semanas
61% Taxa de conclusão da avaliação pós-pedido – era 12% com formulário completo.