Como cartões de pagamento visuais aumentaram a conversão no checkout em 4,28% para a Catalonia Hotels & Resorts

Introdução:

A Boost, agência de CRO com foco em IA sediada em Barcelona e com presença global em três continentes, fez parceria com a Catalonia Hotels & Resorts para reduzir o atrito na etapa mais sensível do funil de reservas: a tela de dados de pagamento no checkout.

O problema:

Na etapa de pagamento do checkout, a Catalonia Hotels apresentava suas duas opções de pagamento, "Pay at hotel" e "Pay now", como uma lista simples de botões de opção, sem diferenciação e sem ícones de apoio. Nada distinguia visualmente uma opção da outra: as duas tinham a mesma aparência e o mesmo texto até o usuário parar para interpretar o conteúdo. Isso obrigava cada visitante a ler cada palavra com atenção para entender o que estava realmente escolhendo, atrasando a decisão justamente na hora de informar os dados de pagamento, um dos pontos mais críticos e com maior taxa de abandono de toda a jornada de reserva.

Insights e abordagem:

A hipótese da Boost era simples: uma decisão binária tão importante não deveria exigir leitura. Ela deveria ser reconhecível em um piscar de olhos. Usando a Mida, a Boost redesenhou o bloco "Payment details" no checkout, tanto no desktop quanto no mobile, e o testou contra o original.

1. Transformar uma tarefa de leitura em uma decisão fácil de escanear.

Antes: checkout com uma lista simples de botões de opção para as formas de pagamento

Antes: em "2. Datos de pago", uma lista simples de botões de opção, duas linhas de texto, sem ícones, sem hierarquia visual entre "Pay at hotel" e "Pay now".

Depois: checkout com cartões de pagamento visuais, guiados por ícones

Depois: cards visuais e selecionáveis, cada um com iconografia própria para a sua opção de pagamento, para que a escolha seja reconhecida em vez de lida.

Depois: cartão 'Pagar ahora' selecionado, com mensagens reforçadas de confiança

Depois, com "Pay now" selecionado: o estado do card reforça quando o cartão será realmente cobrado.

Depois: visão mais próxima do estado selecionado de 'Pagar ahora'

Outra visão do estado "Pay now" selecionado, mostrando a mensagem de confiança reforçada ao lado dos campos do cartão.

O checkout não é o lugar onde os usuários querem parar e estudar textos. Ao dar a cada opção seu próprio card e ícone, o redesign permitiu que os visitantes identificassem a opção desejada rapidamente, reduzindo a carga cognitiva logo antes da etapa de maior atrito do funil: informar os dados de pagamento.

2. Reforçar a confiança exatamente onde surge a hesitação.

Antes: nenhuma explicação sobre por que o cartão era exigido, nem garantia de quando ele seria realmente cobrado.

Depois: uma mensagem de confiança reforçada em torno da garantia de "nenhuma cobrança até a chegada", explicando o motivo da exigência do cartão.

Pedir o número do cartão naturalmente gera um momento de dúvida, mesmo quando a reserva não será cobrada de imediato. Ao combinar o redesign visual com uma explicação mais clara da garantia, a Boost enfrentou essa hesitação de frente, em vez de deixá-la para as letras miúdas.

O experimento:

A Boost usou a Mida para dividir o tráfego entre o checkout original e o bloco "Payment details" redesenhado, medindo o impacto na Confirmação de Reserva nas versões ES e EN do site, tanto no desktop quanto no mobile.

Os resultados:

A variante redesenhada venceu, com 95,75% de probabilidade de superar o controle, entregando um aumento de +4,28% na conversão agregada do checkout, de 34,53% para 36,01%. Os resultados foram validados de forma cruzada com as análises do GA4, que confirmaram um ganho projetado comparável.

Considerando os cerca de 34.000 visitantes mensais do checkout nas versões ES/EN do site, estima-se que a variante vencedora gere aproximadamente +520 reservas incrementais por mês.

Uma análise mais detalhada: a divisão por dispositivo.

A camada mais interessante deste teste surge ao dividir os resultados por dispositivo. O ganho agregado foi positivo tanto no desktop quanto no mobile, mas o efeito não foi uniforme. No mobile, a melhoria foi maior e atingiu significância estatística: +8,62%, de 26,05% para 28,30%, com 97,86% de probabilidade de superar o controle. No desktop, o resultado continuou positivo na direção, mas não atingiu o mesmo nível de confiança.

Essa diferença indica onde o mecanismo do redesign mais importa. O espaço limitado de tela e a leitura mais rápida e fragmentada no mobile tornam a clareza visual desproporcionalmente valiosa ali. O redesign baseado em cards não apenas ficou mais bonito em todos os lugares: ele reduziu especificamente o esforço de leitura no momento em que os usuários menos precisavam dele, em uma tela pequena, logo antes de informar os dados de pagamento. (Veja os mockups mobile nas capturas de tela de antes e depois acima.)

Principais aprendizados:

Apresentar decisões binárias como cards visuais fáceis de escanear, com ícones, em vez de opções apenas em texto, reduz a carga cognitiva em momentos de alto risco e reforça a confiança do usuário ao informar dados de pagamento.

Confira a divisão por dispositivo antes de dar um resultado por encerrado. Um ganho agregado pode esconder uma história bem diferente por baixo: aqui, o mobile trouxe o resultado estatisticamente significativo, enquanto o desktop ficou apenas positivo na direção, uma distinção que muda com que segurança o redesign deve ser implantado e onde olhar em seguida.

Experimente a Mida para testes A/B leves

Se você quer otimizar a performance do seu site e simplificar seu processo de testes A/B, a Mida é a solução ideal.

Com seu script leve e foco em performance, a Mida garante que seu site continue rápido e responsivo, ao mesmo tempo que oferece recursos poderosos de teste A/B. Conheça os benefícios da Mida integrando nosso script leve ao seu site hoje mesmo.

---

Comece grátis na Mida: até 100.000 monthly tested users.

A plataforma de teste A/B para quem
se importa com a performance do site

A Mida é 10X mais rápida do que qualquer coisa que você já considerou. Experimente você mesmo.

Gráfico decorativoGráfico decorativoGráfico decorativoGráfico decorativo