Pague com Ame
sem sair das Americanas
UX/UI design | Teste de usabilidade
A Americanas, como o segundo maior e-commerce do Brasil, destaca-se como uma importante empresa B2C, reconhecida por sua ampla variedade de produtos, incluindo eletrônicos, móveis, alimentos, móveis domésticos e vestuário. Operando como um marketplace, a Americanas facilita transações entre compradores e vendedores. Integrada ao Grupo Lojas Americanas, a Ame é uma empresa brasileira de tecnologia financeira, especializada em soluções inovadoras de pagamento. Oferecendo uma plataforma de carteira digital, a Ame simplifica transações de maneira segura e eficiente.
Challenge
Criar uma experiência de pagamento integrado sem quebrar o fluxo do usuário.
Role
Product designer
Tool
Figma
Team
1 product designer/ 2 UX Writer / 2 UX Research / 5 Devs / 1 Product Owner /1 product manager
Year/duration
2021 /2 meses
ABORDAGEM
Integrando Pagamentos: Desafios, Inovações e Refinamentos
O projeto demandou extensa pesquisa, análise de dados e construções técnicas. Integrar a etapa de pagamento de duas empresas exige atenção aos detalhes e foco na segurança dos dados. Diante da complexidade, aplicamos processos de design, testes de usabilidade e pesquisas comportamentais para oferecer o melhor produto. Embora as telas tenham sido concluídas em dois meses, o refinamento persistiu por um ano antes da apresentação ao público final.
Entendimento da demanda
Na fase inicial, com os detalhes fornecidos pelo Product Owner, concentrei-me em identificar pontos cruciais e esclarecer dúvidas essenciais. Colaborei com uma equipe diversificada composta por X Write,UX Research, Product Owner, Desenvolvedores front-end, Desenvolvedores back-end, Product manager, Líder técnico e também com o Product Owner da empresa externa. Essa colaboração abordou incertezas, com o apoio crucial da empresa parceira, fornecendo dados essenciais.
Essa etapa proporcionou aprendizados valiosos sobre a importância da comunicação eficaz e do alinhamento de expectativas no início do projeto. Além disso, ficou claro como a colaboração próxima com a equipe de desenvolvimento desde os estágios iniciais é fundamental para o sucesso do projeto.
Problema
Ao optar pelo pagamento com Ame, o usuário era levado para o aplicativo da Ame, resultando em uma interrupção no checkout, causando confusão e abandono de carrinho. Este projeto buscou aprimorar a jornada de compra, garantindo fluidez, simplificação e redução do abandono. O foco era elevar a experiência do usuário, impulsionar vendas e eliminar obstáculos no processo de compra desarticulado.
Mapeamento do fluxo atual
A abordagem inicial incluiu mapear a jornada do usuário para compreender atritos e o problema em profundidade. Identificamos áreas críticas e necessárias para uma solução.
Problemas observados
-
falta de informação sobre próximos passos;
-
envio automático para outro aplicativo;
-
quebra de fluxo;
-
abandono de carrinho;
-
só é possível pagar com os cartões já salvos;
-
não é possível adicionar cartão de crédito durante o checkout.
Pontos a considerar
-
autenticação para entrada no app (senha/ biometria/ facial )
-
o usuário pode pagar apenas com cartão de crédito
-
o usuário pode pagar apenas com saldo
-
o usuário pode alterar o valor do saldo que deseja utilizar
-
o usuário pode alterar a quantidade de parcela.
Levantamento de Heurísticas da Baymard
Para orientar nossos próximos passos e garantir a aderência às boas práticas do mercado, utilizamos heurísticas da Baymard. Identificamos as seguintes:
#590 - Use uma Interface de Método de Pagamento com Guias com uma Seleção Padrão:
-
Simplificar a etapa de seleção do meio de pagamento para evitar a intimidação do usuário.
-
Oferecer outras formas de pagamento.
-
Colocar a opção de cartão de crédito em evidência.
-
Representar os cartões pelas suas bandeiras.
#671 - Tenha uma ou mais opções de pagamento de terceiros como escolha secundária:
-
Oferecer outras formas de pagamento de terceiros.
-
Organizar por grau de utilização.
-
Oferecer informações claras caso o usuário seja redirecionado para outro ambiente ou fluxo.
#726 - Garanta que serviços de terceiros e recursos incorporados não possam quebrar o fluxo de checkout:
-
Evitar quebra de fluxo para pagamentos de terceiros.
-
Evitar a exigência de software, extensões ou recursos específicos para o usuário utilizar aquela forma de pagamento.
-
Eliminar dependências externas para o uso da forma de pagamento escolhida.
Essas heurísticas forneceram diretrizes valiosas para manter uma proposta consistente, alinhada com os comportamentos dos usuários estudados anteriormente, e contribuíram para a criação de uma experiência de checkout eficaz e centrada no usuário.
Análise de benchmark
Seguindo as melhores práticas de mercado e considerando a Lei de Hick, que destaca que o tempo de decisão aumenta com o número e a complexidade das opções, buscamos opções que reduzissem a carga cognitiva do usuário na etapa de decisão. É crucial adotar padrões comportamentais familiares ao usuário para garantir uma experiência intuitiva e eficaz.
Durante a análise benchmark de três players que oferecem pagamento integrado com saldo e cashback, observamos que:
-
Nem todos forneciam informações claras sobre o saldo na Home ou na Página de Detalhes do Produto (PDP).
-
Os usuários geralmente não alteravam o saldo em conta, optando por usar todo o valor disponível ou complementar com um cartão de crédito.
-
Todos permitiam o cadastro de cartão de crédito durante o processo.
-
Todos possibilitavam a finalização da compra apenaPs com o saldo disponível.
Escopo do projeto
Nesta fase, elaboramos o escopo do projeto, consolidando todos os insights e entendimentos adquiridos anteriormente.
​
Para priorizar as entregas, optamos por dividir o projeto em partes distintas:
-
Público-alvo:
-
Faríamos um teste inicial desde o primeiro desenvolvimento apenas com um grupo pequeno de colaboradores;
-
Limitamos o público-alvo inicial aos usuários que já possuíam conta em ambos os aplicativos e os tinham instalados em seus dispositivos móveis.
-
-
MVP Centrado em componentes essenciais:
-
Incluímos um mecanismo de vínculo para que os usuários aceitassem a integração.
-
Desenvolvemos um componente de saldo específico para a etapa do checkout.
-
-
Funcionalidades Temporariamente Suspensas:
-
Ajuste de saldo;
-
Cadastro de cartão de crédito no mesmo fluxo
-
Ocultar o saldo no checkout
-
Desvinculo no checkout
-
​
Essa abordagem estratégica permitiu uma entrega focada e eficiente e atendeu às necessidades iniciais identificadas no processo de definição do escopo do projeto.
Prototipação
Componente de vínculo
Iniciamos criando o processo de vínculo conforme os requisitos:
-
Vínculo necessário na Home e no Checkout, mantendo o mesmo padrão.
-
Preservação da marca AME para informar ao usuário sobre a parceria.
-
Informação sobre a necessidade de autorização para uso dos dados.
-
Comunicação sobre a substituição das carteiras.
-
Após o vínculo, informação do saldo na conta AME.
Pré-vínculo
Pós-vínculo
Após a criação da primeira versão, levamos para teste de usabilidade com os usuários e refinamos a proposta considerando:
-
Diminuir a largura do componente para alinhar ao padrão dos demais na tela.
-
Enfatizar o "Pagar com AME", substituindo o componente existente.
-
Utilizar texto para reforçar o vínculo em vez de telas explicativas.
-
Decisão de uso imediato.
-
Ajustar conforme o Design System.
E chegamos ao seguinte resultado:
Pré-vínculo
Pós-vínculo
Tela de pagamento
Em paralelo ao desenvolvimento do componente de vínculo, trabalhamos na adaptação da tela de pagamento existente para incorporar as novas funcionalidades. Inicialmente, buscamos manter o mesmo padrão do checkout das Americanas, e alcançamos o seguinte resultado inicial:
Após aprimorar a primeira versão, optamos por simplificar o fluxo, trazendo as opções de cartão de crédito para a tela de pagamento. Isso permite que o usuário avance para a próxima etapa decidindo como deseja efetuar o pagamento da compra. O resultado final do fluxo foi:
Conclusão
Ao concluir este projeto, obtive insights valiosos ao colaborar com diversas equipes em duas empresas diferentes. Entregar um MVP provou ser uma estratégia fundamental, mostrando que mesmo dentro de um cenário de produto maduro, a adoção de uma abordagem MVP para novas funcionalidades pode gerar benefícios significativos.
​
O projeto ressaltou a importância do design centrado no usuário por meio de testes de usabilidade, permitindo-nos discernir o comportamento do usuário e priorizar componentes de maneira eficaz. Além disso, realizamos testes A/B inicialmente com stakeholders, depois com 5% da nossa base de clientes e, ao obter resultados positivos, estendemos as mudanças para toda a base de usuários. Esta experiência reforçou o compromisso de considerar os MVPs desde o início do projeto, destacando o valor de começar com uma solução simples que pode evoluir e escalar durante os testes dos usuários.
​