Estudo de Caso: uma análise do processo de compra na Gamers Club
Essa é a história de como eu utilizei um plano de ação do meu PDI para propor e aplicar melhorias no nosso produto.
Parte do processo de avaliação de desempenho e evolução de carreira na Gamers Club resulta no PDI: o Plano de Desenvolvimento Individual. No meu PDI, dentro da categoria “Conhecimento Técnico” eu tinha um plano de ação bem direto e simples:
Após refletir sobre como atacar esse ponto e em qual fluxo atuar, decidi trabalhar com o nosso sistema de pagamentos.
Haviam 3 principais motivadores para essa escolha:
1 É um fluxo de extrema importância para a Gamers Club pois uma má experiência pode influenciar diretamente as métricas de receita;
2Atualmente não contamos com um Product Designer alocado 100% nas demandas do squad responsável por esse sistema;
3 Quando esse sistema foi lançado em fevereiro de 2020, decidimos por utilizar um design com cores claras, mesmo indo contra a identidade visual da Gamers Club. A maioria dos sistemas de pagamento existentes segue essa linha de design e partimos da premissa que utilizar cores escuras poderia causar uma falta de confiança no usuário na hora de inserir os dados de pagamento.
A partir daí defini dois objetivos que gostaria de alcançar. Nesse artigo vou explorar o passo-a-passo para trabalhar em cima do primeiro deles:
Objetivo #1 — Entender os principais pontos de fricção na experiência de uso do sistema de pagamentos da Gamers Club
Entendendo o seu público
A primeira etapa foi de entendimento. A pergunta a ser respondida aqui é: como um usuário da Gamers Club se comporta e quais são seus sentimentos ao utilizar esse sistema? Defini uma persona como base para fazer o mapeamento da jornada de compra.
Angélica “gehh” Moraes
25 anos, publicitária
Level 15 | Assinante Plus
Gehh está começando a carreira agora, trabalha em agência de publicidade e joga todos os dias para se divertir. Ela gosta de customizar o seu perfil ao máximo, e assina a Gamers Club faz 2 anos, desde quando começou a trabalhar.
Mapeando a Jornada de Compra
A jornada de compra foi dividida em 3 etapas: o pré checkout, que é o momento onde a usuária está navegando e tomando ações na página da loja; o checking-out, que é quando ela vai realizar o pagamento no sistema (e para os propósitos desse estudo o método de pagamento escolhido foi cartão de crédito); e o pós checkout, que é quando ela confirma o pagamento e é instruída a voltar para a plataforma de origem para continuar com a aquisição do item na loja.
Testando a usabilidade do sistema
Para ter uma noção de como o sistema é utilizado pelos usuários decidi realizar um teste de usabilidade com 3 tarefas simples:
O recrutamento de usuários foi feito utilizando o Discord da Gamers Club, e a única restrição para participar era nunca ter comprado um pacote de Gold antes, para garantir que não havia nenhum conhecimento prévio do sistema.
Perfomei os testes utilizando o Google Meets, pedindo para os usuários compartilharem a tela e seguirem o roteiro enquanto todo o teste estava sendo gravado (com as devidas autorizações, claro).
Seguindo os conselhos do Nielsen Norman Group, realizei o teste com 5 usuários. Ao final de cada um, assisti à gravação e anotei os pontos positivos, negativos e relevantes das conversas.
Os resultados dos testes demonstraram que a Tarefa #1 obteve 80% de taxa de sucesso. Já para as Tarefas #2 e #3 a taxa de sucesso foi de 40%.
Ao final dos testes os resultados foram sintetizados em 3 descobertas significativas, ou seja, problemas importantes para serem resolvidos na etapa de geração de insights:
Descoberta #1
Usuários têm dificuldade em lembrar quantas moedas Gold eles precisam comprar para adquirir o item que escolheram.
Descoberta #2
Usuários não sabem se o Gold comprado já está disponível na carteira quando ele finaliza a compra e volta para a plataforma original.
Descoberta #3
Usuários têm dificuldades para entender como eles podem utilizar as molduras de avatar depois de adquirí-las.
Gerando Insights
Com as descobertas em mãos, foi hora de voltar para as anotações e começar um processo de geração de soluções para como resolver os principais problemas encontrados.
Dividi as ideias em 3 categorias diferentes:
Design
- Informar aos usuários o quanto de Gold eles precisam para comprar o item desejado na tela de compra de Gold, além de exibir o saldo de Gold atual
- Adicionar um botão para fechar a aba na tela de finalização do checkout
Writing
- Rever os textos dos botões no fluxo compra e uso dos itens
- Explicar melhor, na tela de compra, como itens ativáveis funcionam
Técnicos
- Atualizar o design da página de checkout para refletir nosso Design System
- Validar campos do checkout em tempo real
- Atualizar o saldo de Coins sem que o usuário precise atualizar a página
- Abrir a modal de troca de moldura ao clicar em ‘utilizar item’
- Redirecionar o usuário de volta à plataforma original automaticamente após pagamento
- Adicionar um favicon no sistema
Em qual solução trabalhar?
Para maximizar o esforço investido no desenvolvimento das possíveis soluções e aumentar a assertividade das decisões tomadas, envolvi o time de engenharia para entender em quais itens eu deveria trabalhar.
Convidei alguns dos desenvolvedores da tribo Stonks (tribo responsável pelas moedas Gold e pelo sistema de pagamentos) para me ajudar a entender a complexidade de cada item.
Realizei uma dinâmica de avaliação de esforço com os engenheiros, onde pedi para eles avaliarem, de 1 a 4, o quanto de esforço seria necessário para a implementação de cada item.
Com o input dos desenvolvedores consegui cruzar informações com as principais dores dos usuários, que foram identificadas nos testes, e montei uma matriz de Esforço vs Impacto.
Nessa matriz o ideal é focar em itens que tenham baixo esforço e alto impacto, as chamadas ‘quick wins’. Itens com alto esforço e baixo impacto devem ser descartados, itens com baixo esforço e baixo impacto devem ser feitos quando possível e itens com alto esforço e alto impacto devem ser épicos bem planejados.
Selecionei 3 itens com esforço de baixo a médio e impacto alto para prototipar e validar as melhorias com outros testes de usabilidade.
Mão na massa
A partir daqui comecei o trabalho de adaptação de telas, fluxos e textos.
1 — Informar aos usuários o quanto de Gold eles precisam para comprar o item desejado
Quando o saldo do usuário é insuficiente exibimos uma modal oferecendo várias opções de pacotes de Gold, incluindo a tag de “Melhor Escolha” na opção que oferece mais moedas pelo menor valor.
Notamos nos testes que a maioria dos usuários precisou voltar e verificar o quanto o item que eles escolheram custava e o quanto de Gold eles tinham disponível na carteira para entender qual pacote comprar.
A sugestão de melhoria nessa tela é remover a opção de “Melhor Compra”, adicionar o valor do item desejado e o saldo da carteira do usuário, auxiliando o usuário fazer a escolha da melhor opção para aquele momento:
2 — Rever os textos dos botões no fluxo compra e uso dos itens
Quando lançamos as moedas Silver e Gold decidimos por evitar utilizar o termo “comprar” para a aquisição de itens obtidos utilizando as moedas, deixando esse termo exclusivo para a compra das moedas em si, que envolve transações em dinheiro.
A ideia por trás dessa decisão era de desmistificar que seria preciso gastar dinheiro para adquirir itens na loja, já que existem itens que podem ser comprados com a moeda Silver, que é distribuída gratuitamente pelo uso da plataforma. Portanto, um termo mais amigável seria mais adequado para essa situação.
No entanto, durante os testes foi notado que termos como “obter”, “adquirir” e “usar Gold” causaram confusão e em geral tornaram o fluxo mais complicado e difícil de ser entendido.
Para resolver isso fiz uma revisão dos textos de todos os botões e substituí os termos “obter” e “adquirir” por “comprar”.
3 — Abrir a modal de troca de moldura ao clicar ‘utilizar item’
Finalizando os itens em que atuei, esse é um débito técnico já conhecido do time, mas mesmo assim acredito que validarmos esse comportamento com o usuário é uma boa maneira de ajudar a priorizar a implementação dessa melhoria.
Após a compra das molduras, ao clicar em “Utilizar Moldura” o usuário é redirecionado para a sua página de perfil, onde ele precisa encontrar o botão para trocar a moldura da sua foto.
No perfil, o botão “Alterar Moldura” abre uma modal de escolha de moldura. A sugestão de melhoria para esse ponto é pular a etapa de levar o usuário para a página de perfil e abrir a modal de Troca de Moldura diretamente na ação do botão “Utilizar Moldura”, na mesma tela de confirmação de compra da moldura.
Validando as hipóteses
Para validar as minhas hipóteses sintetizei tudo em um fluxograma de navegação. Nesse caso utilizei o fluxo de compra e utilização de molduras de avatar como base, já que foi o produto que os usuários tiveram mais dificuldades para utilizar durante os testes de usabilidade.
Fluxo atual
Aqui temos o mapeamento atual da navegação do usuário.
Fluxo proposto
Aqui temos a nova proposta, com as alterações de texto e de design prototipadas.
Mais testes de usabilidade
Montei no UsabilityHub dois protótipos navegáveis. O primeiro refletia o fluxo que temos atualmente em produção e o segundo o fluxo adaptado para refletir as alterações propostas na imagem acima.
65 usuários participaram dos testes, divididos em 2 grupos onde cada grupo recebeu o link para um dos protótipos.
Principais resultados
As mudanças propostas indicaram uma melhoria em quantidade de participantes que conseguiram realizar o fluxo até o final e no tempo que eles levaram para finalizar. Mais gente em menos tempo, saldo positivo.
Além disso também identificamos os seguintes pontos:
- Considerando alterações somente de fluxo tivemos uma melhoria de 33% no tempo de conclusão do fluxo.
- Considerando alterações somente dos textos tivemos uma melhoria de 22% no tempo de conclusão do fluxo.
- Trazer a informação de quanto custa o item desejado e o saldo do usuário na tela de pacotes de Gold fez os usuários escolherem a opção que faz mais sentido para eles naquele momento.
Conclusão & Aprendizados
Ao realizar todo esse processo eu percebi que as principais falhas de experiência não estavam no sistema de pagamento em si, mas no antes e depois.
Somos muito privilegiados por poder trabalhar com uma comunidade de usuários tão ativa e engajada, mas precisamos nos policiar para garantir que nossos testes reflitam todos as nossas personas de usuários e não apenas os mais ativos.
E o Objetivo #2?
Eu disse que tinha dois objetivos com esse processo todo e que esse artigo trataria do primeiro, que era:
Entender os principais pontos de fricção na experiência de pagamento com o sistema de checkout da GC
Aqui eu encerro o relato de como foi atingir esse primeiro objetivo.
Objetivo #2 — Validar a hipótese de que um tema escuro não diminui a confiabilidade do usuário no sistema na hora da compra
Continue lendo a segunda parte dessa história no link abaixo:
