ANDROID NATIVO
Transformando a experiência do usuário no Checkout no Americanas
O processo de checkout anterior estava desenvolvido em React e Onepage, portanto iniciamos o redesign adotando o formato Multiple Steps, inicialmente apenas para IOS.
Após testado e validado,seguimos com o projeto para adaptar o checkout Android ao formato nativo,pois a maior parte da nossa base de usuários utiliza esse sistema operacional.
Todo processo seguiu as diretrizes do Material Design, considerando o novo padrão que já havia sido testado com sucesso no fluxo IOS.
Challenge
Criar um fluxo nativo Android baseado no fluxo já existente IOS
Role
Product designer
Tool
Figma
Team
1 product designer/ 1 UX Writer / 3 Devs / 1 Product Owner
Year/duration
2021 /4 meses
Mapeamento do fluxo
No projeto anterior, após validar a usabilidade com os usuários, com resultados positivos, prosseguimos com o mapeamento do fluxo do cenário atual, IOS. O objetivo é ajustar os componentes conforme o padrão do sistema, mantendo a consistência de comportamento entre as plataformas.
O Checkout seguia as seguintes etapas:
Entrega
Pagamento
Revisão
Obrigado
1. Entrega
Nesta etapa, o usuário opta pela forma de entrega ou retirada da sua compra. Consideramos diversas opções, como compra online com retirada na loja (O2O), entrega em domicílio (Ship to Shore), marketplace e locker tanto com agendamento quanto sem agendamento.
Componentes e ajustes:
​
-
Header com timeline
-
Tab entrega/retire
-
Lista de endereço
-
Novo endereço
-
card com opção da entrega
-
sumário
-
mensagens de erro
​
2. Pagamento
Aqui, apresentamos ao usuário todas as opções de pagamento para facilitar a conclusão da compra, incluindo Ame, cartão de crédito, boleto, Pix, vale, e a oportunidade de utilizar cupons promocionais.
Componentes e ajustes:
​
-
Header com timeline
-
card com opção de pagamento
-
card de cupom
-
tag de desconto
-
informações extras da Ame
-
listagem de cartão de crédito
-
novo cartão de crédito
-
sumário
-
mensagem de erro
​
3. Revisão
Nesta fase o usuário pode revisar todos os itens de sua compra antes de finalizar o processo. É a última oportunidade para ajustar o pedido ou alterar a forma de pagamento.
Componentes e ajustes:
​
-
Header com timeline
-
card com informações do produto
-
card com informação de entrega
-
card com informação de pagamento
-
sumário
-
mensagem de erro
​
4. Obrigado
Nesta fase final pós-compra, o pedido é confirmado ou não, com todas as informações apresentadas na tela de revisão, incluindo o prazo de entrega e detalhes sobre o cashback da Ame.
Componentes e ajustes:
​
-
Header com confirmação do pedido
-
card com informação do usuário
-
card com resumo do pedido
-
card promocional da Ame
-
card NPS
-
card Ebit
​
Análise do material design
Após entender todos os pontos relevantes e considerações necessárias, iniciei uma análise do Material Design. O intuito era implementar o padrão de UI dos componentes já presentes no sistema operacional, visando aprimorar o desempenho do aplicativo, proporcionar uma experiência consistente ao usuário e facilitar a manutenção do produto.
Roboto family
Solução
Mantivemos o comportamento anteriormente validado em testes, reutilizamos formulários existentes em outras partes do fluxo e garantimos a consistência dos componentes presentes na Home e na página de produto (PDP).
Teste e resultados
Realizamos teste A/B para validar a solução com usuários Android, obtendo uma resposta positiva.
Os resultados incluíram:
-
Conversão de pedidos de 3,2%
-
Aumento de 22,3% nos pagamentos com Ame
-
Crescimento de 20% nos pagamentos com Pix
-
Incremento de 13,5% nos pagamentos via boleto.
Aprendizados
Este foi meu primeiro projeto na empresa, proporcionando uma compreensão valiosa da importância da colaboração com todos os envolvidos. A adesão aos princípios do Material Design e Human Interface Guidelines foi fundamental na criação dos projetos nativos, servindo como guia. A experiência destacou a necessidade de dividir e priorizar funcionalidades em projetos extensos, otimizando a entrega e evitando sobrecarregar o processo de desenvolvimento.