1. Contexto & O Problema Real
A Ri Happy atende anualmente milhões de famílias brasileiras. No entanto, com a expansão de sua operação para modelo de marketplace híbrido, a experiência de compra tornou-se complexa e confusa para o consumidor final.
Quando um cliente adicionava ao carrinho um brinquedo vendido e entregue pela Ri Happy (1P) e outro vendido por um parceiro de marketplace (3P), o checkout anterior apresentava tabelas de frete separadas sem hierarquia visual, calculando múltiplos prazos sem aviso prévio. O resultado era evidente nos dados analíticos: 68% de abandono de carrinho ocorria exatamente na tela de seleção de entrega.
2. Restrições & Desafios Técnicos
Em projetos corporativos dessa escala, o maior perigo de um designer é desenhar conceitos irrealistas que a engenharia não consegue implementar. Tivemos três restrições críticas que nortearam todo o projeto:
- Latência de API de Frete: As chamadas para os microsserviços de cotação de transportadoras levavam entre 1.8s e 2.4s. O design precisava gerenciar estados de carregamento esqueletais sem travar a navegação.
- Restrição Fiscal da SEFAZ: Itens de vendedores diferentes exigiam notas fiscais separadas, impedindo a unificação contratual do frete em uma única fatura.
- Deadline Inegociável: Todo o fluxo precisava estar homologado e em produção antes da Black Friday.
3. Decisões Críticas & Concessões (Trade-Offs)
O que realmente define a qualidade de uma entrega de design não é seguir o Double Diamond cegamente, mas sim a capacidade de tomar decisões difíceis diante de dados e testes com usuários reais.
Decisão 01: Checkout em Acordeão (One-Page) vs. Funil Linear em 4 Etapas
A hipótese inicial: A diretoria sugeriu um checkout em página única (Accordion) para parecer mais rápido.
O que o teste revelou: Em testes com 12 usuários em dispositivos móveis, o formulário de acordeão causava perda de orientação quando os campos de entrega e dados de cartão expandiam verticalmente, gerando keyboard jumping e abandono acidental.
A decisão final: Optamos por um funil linear guiado em 4 etapas (Identificação → Entrega → Pagamento → Confirmação) com indicador de progresso no topo. A taxa de conclusão aumentou em 23% durante o piloto comparado ao protótipo de página única.
Decisão 02: O que descartamos — A "data média unificada de entrega"
Tentamos inicialmente calcular uma "data única de entrega" para simplificar a interface. Nos testes qualitativos, os clientes sentiram-se enganados quando um pacote 1P chegou em 2 dias e o pacote do parceiro demorou 6 dias. Descartamos a data unificada e implementamos cartões independentes de despacho com rastreamento individualizado. A transparência gerou maior confiança percebida.
4. A Solução & Consistência no Design System
Para garantir escalabilidade, todos os novos componentes foram criados diretamente no Design System oficial da Ri Happy no Figma, seguindo tokens semânticos e padrões de acessibilidade WCAG AA:
- Áreas de toque mínimas de 48px: Campos de texto e seletores otimizados para uso confortável com uma mão no smartphone.
- Prevenção de erro em PIX e Cartão: Feedback imediato de validação com máscara de digitação e botão de cópia de código PIX com confirmação em tempo real por WebSockets.
5. Resultados de Negócio Comprovados
O novo checkout foi implementado gradualmente em um teste A/B para 50% da base durante 3 semanas, sendo expandido para 100% após a validação das seguintes métricas oficiais:
6. Retrospectiva & Uso Ético de Ferramentas
O que eu faria diferente hoje: Teria iniciado os testes com biometria facial / WebAuthn para compras recorrentes mais cedo no roadmap. A dependência de autenticação por senha tradicional ainda representa um ponto residual de atrito para clientes antigos.
- Figma & Tokens Studio: Arquitetura de componentes, estados interativos e especificações de handoff para a engenharia.
- Lookback & Maze: Condução de testes de usabilidade remotos com 12 clientes.
- Claude 3.5: Utilizado como apoio para categorizar transcrições qualitativas de entrevistas e auditar casos de borda em endereços com numeração sem padrão. Todas as decisões de interface e estratégia foram elaboradas e validadas por mim.