FastCheckout
O FastCheckout é o checkout no-code da VTEX. Trabalhei no UX e na UI para desktop e mobile, e a Hearst foi a primeira cliente em produção. Depois, o produto evoluiu para um checkout B2B.
- VTEX
- Hearst
- Product Designer (Júnior), UX e UI
- Jul 2023 → Abr 2024
O que é o FastCheckout
Um checkout configurável que a loja consegue lançar sem desenvolvimento customizado. Cobre carrinho, dados do cliente, entrega e pagamento, com a mesma experiência no desktop e no mobile.
Antes e depois
O checkout anterior à esquerda e o FastCheckout à direita, em três momentos: carrinho, itens indisponíveis e entrega.
As quatro etapas
Carrinho, informações, entrega e pagamento. Cada etapa pede uma coisa só, e o resumo do pedido fica na tela do começo ao fim.
Casos de borda
Itens indisponíveis, busca de endereço, entregas divididas e cartões salvos são resolvidos dentro da própria etapa, para a pessoa não precisar voltar.
Testes com clientes e parceiros
Fizemos cinco sessões moderadas com clientes e parceiros. Cada pessoa percorreu o fluxo inteiro, de adicionar itens ao carrinho até o pedido concluído, enquanto observávamos e fazíamos perguntas.
A maioria gostou do visual e descreveu a experiência como mais limpa e fluida. O breadcrumb e a tela de entrega foram elogiados em particular.
- 5
- sessões moderadas com clientes e parceiros
- 8
- tarefas por sessão, do carrinho ao pedido concluído
- 4.3/5
- nota média
O que as pessoas pediram
Esses testes nos levaram a fazer as mudanças que o FastCheckout precisava para ficar melhor que o checkout anterior, o V6. Os pedidos que mais apareceram:
- Preencher com os dados de contato.
- Deixar opcional.
- Perguntar só se for presente.
Acessibilidade
As telas seguem a WCAG 2.1: contraste, navegação por teclado, suporte a leitores de tela e mensagens de erro. O cliente também contratou uma auditoria externa para revisar o resultado. Rodamos também o Lighthouse no mobile e no desktop, e as notas ficaram dentro do esperado.
- WCAG 2.1
- o padrão por trás de todas as telas
- 100
- nota de acessibilidade no Lighthouse, no mobile e no desktop
- 70+
- nota de Best Practices no Lighthouse
Incluindo a retirada
A retirada veio na segunda release. O carrinho ganha duas abas, Entrega e Retirada, e a pessoa escolhe como receber o pedido antes de avançar.
Da Hearst para o B2B
A Hearst foi onboardada ao longo de alguns meses. Depois disso, investimos em levar o FastCheckout para o B2B: múltiplas entregas, políticas de compra e os fluxos de compra de grandes contas.
- 1st
- cliente em produção no FastCheckout