Checkout Concept
Fui chamado para o teste para o processo seletivo de uma empresa do ramo de venda de passagens aéreas.
Desafio
- Otimizar o fluxo de checkout (pagamento) de passagens aéreas da plataforma da NomeDaEmpresa. Considerando o cenário onde o usuário possa pagar apenas por cartão de crédito em até 6x.
User needs
No momento do checkout o usuário necessita realizar o processo de maneira simples, clara e rápida.
Pesquisa
Benchmark
Foi realizado um estudo de mercado de várias empresas que têm plataformas onde existem a etapa de checkout, tanto de empresas de companhias aéreas, mas também de outras áreas. Afinal a inovação se dá a partir do momento em que olhamos de diversas perspectivas.
American Airlines
O fluxo acontece todo em uma tela só de maneira clara, separado em seções identificadas por headers maiores para que o cliente entenda em qual etapa está. Sendo que na versão mobile acontece de forma semelhante a separação dos itens, mas não são mostrados todos os dados uma vez que o card tem uma opção de “Ver detalhes”.
Azul
O site da azul é semelhante ao da American Airlines, tendo um formulário grande com vários campos o que faz com que o site fique com um scroll grande.
LATAM Airlines
Começa com um layout mostrando diversas abas como se eu fosse participar de uma “triagem” tendo uma jornada até a compra da passagem, porém o processo é diferente fazendo que eu passe por vários formulários, ao chegar no checkout eu tenho informações em telas diferentes não possibilitando voltar de forma simples, a única forma de voltar é pela seta do navegador de forma que eu perco os dados já preenchidos anteriormente. Depois disso nunca mais o usuário vê as abas, apenas o indicativo de passos acima na interface.
Virgin America
A Virgin tem o melhor case para benchmark, pois tem um design premiado sendo a primeira companhia aérea a ter um site que funcionasse em todos os dispositivos de forma responsiva. O que fez com que eles tivessem sucesso neste processo foi que eles separaram em etapas todas as partes do processo pra fazer ficar mais intuitivo e simples pro usuário, fazendo o tempo de escolha até o checkout ser próximo de 60 segundos.
- “Um erro comum é achar que quanto menos cliques, melhor a experiência do usuário. Pesquisas mostram que, o tipo de procedimentos com revelação de informações progressiva a cada etapa do usuário é muito mais gerenciável e prazeroso para usuário do que apresentar tudo de uma vez. Além disso, o usuário pode alterar facilmente uma decisão tomada anteriormente simplesmente subindo a tela, o que evita problemas de página quebrada ao clicar em voltar” - Ludmila Vilaverde
Sympla
Usa o esquema de abas após o usuário selecionar os dados, fazendo com que a pessoa tenha a quantidade de ingressos selecionados previamente e depois apenas tem que fazer o preenchimento dos dados de cada uma das pessoas participantes do evento em que gostaria de retirar o ingresso, preencher os dados de pagamento e depois conferir, assim fechando o pagamento. De forma a facilitar a vida do usuário caso ele precise voltar em algum passo anterior não perdendo os dados já cadastrados.
Ifood
Checkout feito de forma clara e simples, onde o usuário apenas deve preencher os dados do cartão de crédito após fazer a escolha do produto que deseja consumir.
Ingresso.com
Um dos melhores cases de checkout, assim como no caso da Virgin America, eles conseguem fazer todo o trabalho de escolha até o checkout acontecer dentro da primeira dobra da tela, fazendo com que o usuário saiba o que está fazendo de forma simples, e dando liberdade para ele mudar caso queira.
Entender o usuário
Foi feita uma pesquisa de pequeno porte, utilizando o Google Forms da data de 24 ao dia 26 de junho, com cerca de 10 usuários com algumas perguntas sobre o processo de checkout além de entender um pouco sobre o cenário de compra de passagens.
Perguntas:
Com essa pesquisa foi possível captar alguns insights sobre como as pessoas gostariam que fosse um checkout, de forma que alguns dos comentários:
Dentro da jornada desde a pesquisa até a compra da passagem, qual o momento mais complicado?
- “conseguir ver a passagem certa com os dados de forma clara, a tela de pagamento normalmente tem muitos dados juntos”
- “entender como vai ser até pagar”
Quanto ao checkout, qual o maior problema você encontra ao pagar uma passagem?
- “forma de pagamento”
- “Me localizar”
- “Verificar se os dados estão corretos, pra não comprar uma passagem com data errada, por exemplo.
- “não entendo direito os dados na tela”
- “como disse antes tem muitas informações de uma vez na mesma tela”
- “Confirmar informações”
Como você acredita que o checkout poderia ser feito de maneira mais simples?
- “os dados poderiam ser mostrados de forma mais clara”
- “se fosse simplificado”
- “Em etapas detalhadas”
- “Não sei... acho que revisar o que foi feito de uma forma educada e simpática, mostrando o que eu escolhi com um tamanho legível da fonte e tal.”
Aplicação de conceito de Mobile First
Com isso a proposta é pensar na experiência tanto web quanto mobile, separando em etapas o como o usuário.
Propor uma nova interação
A idia é fazer uma interface que não seja muito fora do modelo mental atual, mas propondo mudanças que ao aplicadas melhorem tanto a interação via web quanto a interação do usuário via dispositivo mobile.
UX Cases For Checkouts
Usei como base, diversos estudos sobre como “humanizar” e facilitar o uso de checkouts, dentre eles cases de marketplaces, sites de companhias aéreas, leitura de papers sobre o assunto entre outros.
Solução
Feito no Adobe XD, a interface de checkout foi feita considerando uma passagem de Ida e Volta de Belo Horizonte para São Paulo nos dias 27/11 e retorno no dia 29/11. Me baseei nas premissas do Material Design para o protótipo apenas para validar a solução proposta.
