A sacola era a única tela fora do novo Design System. Ela não explicava por que o pedido chegava em pacotes separados e escondia o cashback ZZ Pay.
Arezzo&Co
Sacola ZZ Mall
Uma sacola para um marketplace multimarcas
Como simplifiquei entregas fracionadas e transformei a sacola em ponto de conversão no app da Arezzo&Co.
- Empresa
- Arezzo&Co
- Produto
- App ZZ Mall
- Plataforma
- iOS e Android
- Meu papel
- UX/UI Designer, do discovery ao handoff
- Time
- Eu, como designer única, em parceria com o PO
Redesenhei a sacola em três pilares (clareza, transparência e retenção) e adicionei recursos de growth: brindes, cashback visível e countdown sazonal.
Menos chamados de suporte sobre pedidos divididos, menos abandono de carrinho e mais uso do cashback no fechamento da compra.
Um marketplace híbrido com uma sacola que ficou para trás
O App ZZ Mall é o marketplace da Arezzo&Co: vende marcas próprias, como Schutz, Vans e Arezzo, e produtos de sellers parceiros no mesmo carrinho. A Home e a PDP já tinham migrado para o novo Design System. A sacola, justamente a tela onde a compra se decide, ficou para trás.
Opacidade logística
O cliente recebia pacotes separados, em datas diferentes, sem entender o porquê. “Por que meu pedido foi dividido?” virava chamado no suporte.
Inconsistência visual
A sacola destoava da Home e da PDP, que já rodavam no novo Design System. A quebra visual acontecia no momento mais sensível da jornada.
Oportunidade perdida
O programa de cashback ZZ Pay ficava escondido, e pequenas fricções na sacola faziam o cliente perder a intenção de compra.
Objetivos do projeto
- Tornar a sacola mais clara, funcional e orientada à conversão
- Reduzir fricções no fluxo de compra
- Comunicar melhor benefícios como cashback e descontos
- Organizar cenários complexos: voucher, frete e múltiplas entregas
- Evitar abandono de carrinho por confusão ou sobrecarga cognitiva
Antes de desenhar, entender quem compra e onde a sacola falhava
Combinei alinhamento com stakeholders, análise de mercado, arquétipos de comportamento e uma auditoria heurística da versão antiga.
Matriz CSD
No início do projeto, reuni stakeholders e todos os envolvidos para mapear certezas, suposições e dúvidas sobre a sacola.
O que isso me mostrouO time saiu alinhado sobre o que já era fato e o que precisava ser investigado antes de desenhar qualquer tela.
Benchmarking
Analisei checkouts com logística mista e buy box, arquitetura de e-commerces de luxo e players que usam gamificação e cupons.
O que isso me mostrouGrandes e-commerces, como Amazon e ASOS, transformam “remover” em “mover para favoritos” para não perder a intenção de compra.
Arquétipos de comportamento
O Caçador de Ofertas
Focado em preço, cupom e frete grátis.
Precisa ver o desconto de forma clara.
O Decidido
Já sabe o que quer e quer entrar e sair rápido.
Precisa de performance e do botão de compra sempre acessível.
O Explorador Inseguro
Enche o carrinho para “ver quanto dá” e usa a sacola como lista de desejos.
Precisa da opção “Mover para favoritos”.
Análise heurística da versão antiga
| Heurística de Nielsen | O que encontrei |
|---|---|
| Visibilidade do status do sistema | O usuário não sabia em que etapa da logística estava, nem por que o pedido seria dividido. |
| Controle e liberdade | Era difícil editar tamanho ou cor sem sair do carrinho. |
| Prevenção de erros | Faltavam avisos claros sobre itens sem estoque antes do checkout. |
Três pilares para guiar cada decisão
Cada pilar responde diretamente a algo que apareceu no discovery. É isso que liga a pesquisa às telas.
Clareza cognitiva
Menos esforço para entender preço, estoque e próximos passos.
Nasce deHeurísticas de visibilidade e prevenção de erros; o Decidido e o Caçador de Ofertas.
Transparência
Explicar a logística de marketplace antes do pagamento, não depois.
Nasce deChamados sobre pedidos divididos; heurística de visibilidade do status.
Retenção
Transformar becos sem saída em novas oportunidades de conversão.
Nasce deO Explorador Inseguro; o benchmarking de Amazon e ASOS; o ZZ Pay escondido.
As decisões, uma a uma
Para cada decisão: o problema, o que eu fiz e por que fiz assim.
Clareza cognitiva
Um card de produto que resolve sem sair da sacola
Problema
Para trocar tamanho ou quantidade, o cliente precisava voltar à página do produto, e só descobria a falta de estoque no checkout.
Decisão
Redesenhei o card com imagem clara, detalhes técnicos, seletores de tamanho e quantidade e gatilhos de escassez. Mapeei os estados: padrão, tamanho único, preço remarcado, desconto e indisponível.
Por quê
Prevenção de erros e visibilidade do status: o problema aparece onde o cliente está, e não uma etapa depois.
Clareza cognitiva
A ação principal sempre ao alcance do polegar
Problema
O Decidido quer fechar a compra rápido, mas em sacolas longas o resumo e o botão ficavam longe.
Decisão
Criei um bottom sheet fixo com o resumo financeiro e o botão “Concluir”, sempre na zona do polegar, em qualquer ponto do scroll.
Por quê
Lei de Fitts: quanto mais perto e maior o alvo, mais rápida e segura é a ação no mobile.
Transparência
Explicar o split de entregas antes do pagamento
Problema
Este era o ponto de maior complexidade técnica: como explicar que o cliente está comprando de lojas diferentes no mesmo carrinho?
Alternativa considerada
Separar os produtos por vendedor, de forma visualmente brusca. Descartei porque fragmentava a sacola e aumentava a sensação de complexidade.
Decisão
Mantive a sacola unificada, com toasts explicativos e agrupamento semântico. O modal “Entenda sua entrega” e a tela “Detalhes da entrega” mostram cada remessa, com prazo, frete e quem vende: Entrega 1, vendida pelo ZZ Mall; Entrega 2, vendida por um parceiro.
Por quê
Visibilidade do status do sistema: alinhar a expectativa de prazo e de recebimento fracionado antes do clique em comprar.
Retenção
Remover vira adiar, e a sacola vazia vira reconexão
Problema
O Explorador Inseguro remove itens que ainda quer, e a sacola vazia era uma tela em branco, um beco sem saída.
Decisão
Ao tentar excluir um item, a sacola sugere “Mover para favoritos”. Para quem está logado, a sacola vazia mostra “Vistos recentemente” para facilitar a volta à jornada.
Por quê
Preservar a intenção de compra, transformando desistência em adiamento, e aplicar reconhecimento em vez de memorização.
Retenção
Growth design: brinde, cashback e urgência
Problema
O ZZ Pay ficava escondido e a sacola não ajudava a aumentar ticket médio nem conversão.
Decisão
Ao atingir um valor, o cliente desbloqueia um brinde, com feedback por toast e escolha de cor ou tamanho sem sair do checkout. O cashback a receber e o saldo disponível aparecem no resumo. Para Black Friday e outras campanhas, criei um componente de countdown.
Por quê
Reciprocidade e valor percebido no brinde, reforço positivo no cashback e aversão à perda no countdown.
Como validar e acompanhar
Features como o cross-sell foram implementadas com base em testes A/B, para validar as hipóteses de design com métricas reais de performance. Para acompanhar a nova sacola, eu monitoraria:
- Taxa de abandono da sacola
- Chamados sobre pedidos divididos
- Uso do cashback ZZ Pay no checkout
- Ticket médio em campanhas com brinde
O que este projeto me ensinou
- O checkout não é uma lista de compras: é o momento decisivo da conversão.
- O maior desafio foi equilibrar regras de negócio complexas, de logística e marketplace, com a simplicidade que o usuário precisa.
- Validar hipóteses com testes A/B mostrou a importância de conectar decisões de design a métricas reais.
- Discovery
- Matriz CSD
- Análise heurística
- Growth design
- Mobile
- Design System
- Checkout