Como decidimos mudar as cores do sistema de pagamentos da Gamers Club
Como e por que mudamos o tema da nossa página de pagamentos de claro para escuro?
Esse artigo é a segunda parte da história de como eu utilizei um plano de ação do meu PDI (Plano de Desenvolvimento Individual) para propor e aplicar melhorias no nosso produto.
Antes de continuar, se você não leu a primeira parte, recomendo a leitura. Lá eu conto sobre a análise que fiz em cima de todo o processo de compra da Gamers Club:
O ano é 2020. A missão é conseguir gerar receita por outros meios além das assinaturas já existentes na nossa plataforma de Counter-Strike. Para isso acontecer entendemos que iríamos precisar de um sistema de pagamentos que fosse desacoplado daquela plataforma e que pudesse funcionar como gateway para vários sistemas diferentes.
Depois de uma análise sobre como eram as principais páginas de checkout da maioria dos e-commerces da época, decidimos por utilizar um design com cores claras, partindo da premissa de que isso traria mais confiabilidade ao sistema na hora da compra, já que os usuários não estariam, em tese, acostumados a inserir os seus dados de pagamento em uma página com tema escuro.
Agora o ano é 2021 e eu tenho 2 objetivos relacionados ao sistema de pagamentos. O primeiro é entender os principais pontos de fricção na sua experiência de uso.
Esse artigo é a história de como eu trabalhei em cima do segundo 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
3 passos a seguir
Para dar início à esse entendimento eu dividi minhas ações em 3 passos que, embora pareçam ser simples, agregam um punhado de informação e conhecimento que se provariam essenciais para essa tomada de decisão:
1 — Qual a posição do time de design acerca do tema?
2 — O que pensam os usuários em relação a isso?
3 — Quais evidências temos que apoiam a minha hipótese?
Entendendo a posição do time de design
Esse momento foi de muita importância pois nos ajudou a entender, como time, qual direção queremos tomar em relação ao design visual em todos os produtos da Gamers Club, definium um precedente.
Para entender o posicionamento do time organizei uma dinâmica onde montamos uma matriz CSD (Certezas, Suposições e Dúvidas). Todos os integrantes do time de design foram convidados a compartilhar quais eram seus pontos em cada uma das divisões da matriz.
A posição do time acerca do tema é a seguinte:
Certezas
- Outras empresas têm checkout com tema escuro
- Assinantes da Gamers Club Counter-Strike fazem o pagamento em um checkout com tema escuro
- Um projeto com tema diferente dá mais manutenção técnica para a engenharia
- Tema escuro é o padrão de identidade visual da GC
- Existem plataformas que deixam você escolher o tema
Suposições
- O mesmo site e fluxo com temas diferentes gera desconfiança nos usuários
- Tema branco cansa mais a vista a noite
- Checkout com layout escuro diminui a confiança do usuário na hora da compra
- A cor do tema do checkout não é um fator decisivo para a compra
- Ter o checkout integrado às plataformas gera mais confiança no usuário
Dúvidas
- Deixar o layout mais com a ‘cara’ da GC tornaria ele mais confiável, independente da cor principal?
- Nossos usuários compram mais de dia ou a noite?
- É mais importante o tema escuro ou o checkout não abrir em outra aba?
- Qual tema converte mais? Claro ou escuro?
- A alteração do tema durante o fluxo impacta conversão? Existem outras empresas que fazem isso?
Descobrindo o que pensam nossos usuários
Para entender qual o pensamento dos usuários sobre a utilização do tema escuro, propus um teste de preferência.
O teste foi enviado para 75 usuários presentes no nosso Discord. Ele consiste em exibir as duas versões da página e pedir para o usuário escolher a que ele prefere, seguido de uma pergunta aberta de ‘Por que você prefere essa versão’ e finalizando com uma pergunta de avaliação de 1 a 5 o quanto de confiança o tema escolhido passava ao usuário.
Os resultados mostratam que a maioria esmagadora de 96% dos respondentes preferem o tema escuro.
Ao categorizar as respostas da pergunta do porquê da escolha daquele tema, temos mais algumas descobertas:
Uma das suposições do time na matriz CSD era que o tema claro ‘cansava mais a vista’ durante a noite. Isso foi validado nas respostas da pergunta aberta.
Fato curioso: dois usuários responderam que preferem o tema escuro porque ele “não parece uma flashbang na cara”.
Finalizando a pesquisa, 99% dos usuários classificarma o nível de confiança no design de cores escuras entre 4 e 5.
Encontrando evidências que apoiem a hipótese
Para confirmar o que havíamos entendido com os usuários e tentar responder uma das dúvidas que o time tinha na matriz CSD (Nossos usuários compram mais de dia ou a noite?), fui me aventurar no maravilhoso mundo dos dashboards de acompanhamento de métricas.
Depois de fazer uma pequena adaptação em uma query SQL consegui classificar as compras dos pacotes de Gold (principal item vendido por esse sistema de pagamento) por horário e descobri o seguinte:
70% de todos os pacotes de Gold já vendidos foram comprados entre as 6 da noite e as 6 da manhã, ou seja, no período da noite.
Esse dado bate com o fato de que 59% dos usuários responderam que preferem o tema escuro porque ele não agride a visão, já que eles estão fazendo a utilização do sistema no período da noite.
Então… é isso? Nope!
Além dos 2 objetivos que eu já citei nesse artigo eu tinha um objetivo bônus, que me ajudaria a desenvolver ainda mais minhas capacidades técnicas e me traria um gostinho de nostalgia da época que eu trabalhava como desenvolvedor front-end aqui na Gamers Club, lá em 2017 (:
Objetivo bônus — design, componentização e implementação do tema escuro ao sistema de pagamento em produção
O primeiro passo foi adaptar os componentes do arquivo de design da página de checkout para refletir as cores escuras do nosso Design System.
Com isso feito, foi hora de me aventurar com o Visual Studio Code, Terminal, Gulp, Sass, React, Node e todo o stack de desenvolvimento que vem junto com rodar um sistema em ambiente local.
Design componentizado, cores atualizadas, ambiente local rodando, o próximo passo foi entender a estrutura de front-end do projeto e fazer as adaptações necessárias para a implementação do tema.
Pensando na ideia de talvez implementar um teste A/B e para deixar fácil um rollback de temas caso alguma coisa desse errado, mantive toda a estilização do tema claro no código e reestruturei os arquivos e páginas para refletirem o tema com base em uma única classe.
Conversando com o time entendemos que o teste A/B traria uma complicação um pouco maior ao projeto.
Dado que tínhamos todo um discovery que apoiava a mudança das cores, optamos por não implementarmos o teste A/B nesse caso.
Alguns dias de trabalho, um Pull Request, uma revisão e alguns ajustes depois a alteração já estava em produção rendendo seus frutos (:
Conclusão & Aprendizados
Para esse segundo objetivo ficou muito clara a importância de envolver o usuário até nas menores das decisões.
Uma simples mudança de cores — que pode parecer coisa banal a princípio e que em outros tempos seria uma decisão que eu tomaria simplesmente ‘por não gostar do tema claro’, — ao envolver os usuários, percebi que os motivos que eles apresentaram para justificar a mudança são diferentes e quiçá mais importantes do que os meus próprios motivos pessoais.
O trabalho de design é importante em todos os contextos. No primeiro artigo eu menciono que um dos motivos que eu escolhi trabalhar nesse sistema é que, por priorização de esforços e por terem um backlog quase 100% de itens técnicos, o squad responsável não possui um Product Designer alocado 100% do tempo, mas isso não invalida o fato de que existe muito trabalho a ser feito e muitas melhorias a serem descobertas e implementadas, principalmente partindo de conversas com as pessoas que utilizam o sistema frequentemente.
Por enquanto é isso, quem sabe em 2022 não revisitamos esse tópico e trazemos outras descobertas?
