Como aumentamos a conversão com uma simples mudança na interface?

Princípios da psicologia nos ajudaram a quadruplicar a adesão ao seguro viagem oferecido pela ClickBus no processo de checkout

Marina Neta
ClickBus Design
6 min readApr 14, 2021

--

Ilustração de um ônibus com escrito abaixo: Seguro viagem e princípios da psicologia no design — UX Case. Ao lado está uma mão feminina segurando um celular que exibe a interface de checkout do produto que será discutido

Se você se interessa por psicologia e design, provavelmente já assistiu ao clássico TED Talk do Dan Ariely, apresentado em 2008 (13 anos atrás!) com o título "Are we in control of our own decisions?" (que pode ser traduzido como "Estamos no controle das nossas próprias decisões?") em que ele traz exemplos sobre como nossas ações podem ser drasticamente afetadas pelo contexto em que nos encontramos.

Um dos exemplos apresentados é sobre como o formato de um formulário de adesão ao programa de doação de órgãos em diferentes países da Europa afetou na porcentagem de pessoas que aderiam ou não ao programa. Ao analisar porque alguns países tinham um número consideravelmente maior de doadores, descobriram que o "problema" estava na forma como o formulário foi construído.

Em países com menor índice de adesão, a opção se apresentava da seguinte forma: "Assinale caso você queira participar do programa de doação de órgãos".

Retângulo branco com sombra cinza contendo um checkbox e a frase "Assinale caso você queira participar do programa de doação de órgãos"
Tradução do exemplo original utilizado no TEDTalk Are we in control of our own decisions?”.

No segundo caso, em que o número de adesão era maior, o formulário continha o seguinte texto: "Assinale caso você não queira participar do programa de doação de órgãos".

Retângulo branco com sombra cinza contendo um checkbox e a frase “Assinale caso você não queira participar do programa de doação de órgãos”
Tradução do exemplo original utilizado no TEDTalk Are we in control of our own decisions?”.

Uma exemplo simples, mas que traz inúmeros ensinamentos sobre design e comportamento humano: algumas decisões são difíceis de serem tomadas e o esforço exigido pode ser otimizado através da interface do produto.

E como esse exemplo nos ajudou na venda de passagens de ônibus?

Um breve contexto

O checkout, etapa em que o usuário encerra sua compra, é um dos momentos mais importantes da jornada do nosso cliente.

Com o desenvolvimento de uma nova funcionalidade (que em breve será disponibilizada), entendemos que, antes de tudo, precisávamos de um redesign dessa etapa, já que tínhamos algumas limitações tecnológicas e de jornada do usuário que comprometiam nosso propósito: o de transformar a mobilidade em uma experiência incrível.

É no checkout também o momento em que o viajante pode optar pela contratação de um seguro para sua viagem. Para adicionar o seguro, o usuário deveria marcar um box, semelhante ao do exemplo acima, com a mensagem "Assegurar minha viagem" (imagem abaixo).

Mas, quando olhamos os números, a adesão ao seguro, tanto em iOS quanto em Android, era muito baixa.

Imagem com fundo roxo e protótipo ilustrando a solução até então utilizada no checkout para adicionar o seguro. A estrutura tem o título "Seguro dos passageiros", abaixo um escudo verde com as frases "Quer viajar sem preocupações? Adicione um seguro para os seus passageiros". Logo após há um link com a frase "Ver detalhes do seguro". Abaixo uma opção de check box com o texto "Assegurar minha viagem" e o valor do seguro à direita.
Ilustração da solução anterior para que o viajante adicionasse o seguro.

Entendendo o problema

Como designer, uma das principais perguntas que faço durante o processo de construção é: quais problemas podemos solucionar no curto prazo que vão trazer uma melhoria na experiência do cliente e bons resultados para o negócio, além de apresentarem baixa complexidade de solução?

Partimos inicialmente dos dados de conversão, mas precisávamos de uma análise mais profunda. Então, a análise heurística, análise de heatmaps e gravações de uso nos ajudaram a responder essa pergunta. Os principais pontos observados sobre a forma de exibição foram:

  • O gatilho (ou estímulo) para que a pessoa adicione o seguro é insuficiente/inexistente;
  • O valor (não monetário) do seguro não é óbvio e explícito, o que não gera a motivação necessária para adesão;
  • O esforço envolvido (marcar um opt-in) pode ser uma barreira, como vimos no exemplo da doação de órgãos.

Hipótese

Em Hooked: How to Build Habit-Forming Products (tradução: "Hooked (Engajado): Como construir produtos e serviços formadores de hábitos"), o autor traz o modelo de design comportamental de Fogg, representado pela fórmula B=MAT, que, em português, seria C=MHG. A equação diz que para que um [C] Comportamento (Behavior) seja iniciado, é necessário que haja [M] Motivação (Motivation) suficiente para realizá-lo, [H] Habilidade (Ability) para completar a ação e, por fim, um [G] Gatilho (Trigger) que servirá de estímulo para desencadear a motivação.

Ilustração do modelo de comportamento de Fogg. É um gráfico em que X é a Habilidade e Y é a Motivação, e mostra que o comportamento desejado só acontece quando a motivação e a habilidade são altas.
Esquema ilustrado do modelo de comportamento de Fogg: quanto maior a motivação e a habilidade para execução, maior a probabilidade do gatilho ser bem sucedido. Tradução livre. Créditos: Dr. BJ Fogg. https://behaviormodel.org/

Com os problemas identificados e considerando o modelo de comportamento acima, levantamos a hipótese de que aumentar a visibilidade, facilitar o processo de adesão e tornar explícitos os valores envolvidos ao adquirir um seguro para sua viagem elevaria o número de viagens com seguro incluso.

Solução

Para que conseguíssemos aumentar a adesão ao seguro, chegamos às seguintes soluções:

  • Criar um gatilho específico para essa funcionalidade ao tornar a etapa de adesão do seguro independente do restante do checkout e pedir que o usuário decida se deseja ou não adicionar o seguro (ao invés de deixar uma opção default);
  • Despertar o interesse e a motivação ao deixar explícitas as vantagens de adquirir o seguro,
  • Tornar a área de click maior para facilitar a ação do usuário (o que aumenta a habilidade para completar a ação).
Protótipo animado da solução final: criamos uma etapa específica para decidir se deseja ou não adicionar o seguro e trocamos o opt-in por um switch.
Imagens da solução final: criamos uma etapa específica para decidir se deseja ou não adicionar o seguro e trocamos o opt-in por um switch.

Validação

O objetivo era entender se, em linhas gerais, os principais elementos da interface eram compreensíveis e se as pessoas participantes conseguiriam seguir para a etapa final, independente de adicionarem o seguro ou não. Para sabermos os números de conversão, precisaríamos de um teste em live, ou seja, com clientes e compras reais.

Imagem exibindo o heatmap do resultado do teste. A área de maior concentração de clicks foi na região inferior da tela, onde concentram os botões principais.
Resultados do teste utilizando a plataforma maze.co.

Com os resultados coletados, fizemos alguns ajustes na interface final e o repasse para as pessoas desenvolvedoras.

Resultados obtidos

Para validarmos a adesão, definimos como estratégia a publicação da versão primeiro na plataforma iOS — onde temos um número menos significativo de usuários — e, caso tivéssemos sucesso, traríamos a mudança pra Android.

Após as mudanças em iOS, chegamos a quadruplicar a adesão–ou seja, de todas as viagens vendidas naquele dia, quatro vezes mais viagens incluíam o seguro. Já em Android, a média de adesão mais que duplicou após a implementação.

Aprendizados no processo

  • É importante manter atualizado o repertório de referências pois eles são uma fonte de insights para problemas que você pode encontrar no futuro–como aconteceu com o caso de doação de órgãos;
  • Ao mesmo tempo em que precisamos manter uma visão do todo, é quando olhamos os detalhes que encontramos as oportunidades para explorar o poder da interface;
  • O dia-a-dia do designer de produtos é composto em sua maior parte pelo entendimento do comportamento do usuário, e a psciologia é uma grande aliada por possuir conceitos e teorias amplamente explorados que podem ser reaproveitados na construção de interfaces;
  • Assim como product owners ou product managers, designers são igualmente responsáveis por identificar quais são os quick-wins (melhorias de curto prazo com alto retorno) do produto.

--

--