O formulário de doação numa "única coluna".
Eliminação das distrações, progressão visual clara (Montante → Dados de contacto → Pagamento) e destaque dos montantes sugeridos.
Caso prático
Plataforma de financiamento colaborativo · Nantes / Paris
HelloAsso
Reduzir a fricção no momento do pagamento para maximizar a taxa de conversão das doações, mantendo um nível máximo de confiança e de segurança, tanto no telemóvel como no computador.
O contexto
A HelloAsso é a referência francesa do financiamento colaborativo para associações, fundações e clubes desportivos. Com milhões de utilizadores e picos de tráfego enormes (final de ano, emergências humanitárias), a plataforma tem de aliar uma tecnologia robusta a uma experiência de utilizador irrepreensível.
O briefing
Objetivo: aumentar a taxa de conclusão dos formulários de doação e de adesão. As expectativas:
- Zero fricção no pagamento.Simplificar as etapas, integrar a gorjeta de forma ergonómica sem ser intrusiva e disponibilizar os meios de pagamento locais (Apple Pay, Google Pay).
- Confiança e transparência.Tranquilizar de imediato o utilizador quanto ao modelo "100% gratuito para as associações" e à segurança dos dados (RGPD, PCI-DSS).
- Desempenho técnico.Garantir Core Web Vitals a verde, mesmo durante picos de tráfego x10.
- Acessibilidade.Um percurso conforme às normas RGAA para não deixar nenhum doador de fora.
A abordagem de design
Direção acolhedora, depurada e "mobile-first": a interface deve apagar-se para dar espaço à emoção e ao ato de doar.
A "gorjeta" inteligente.
Uma proposta de gorjeta para a HelloAsso integrada de forma lúdica e positiva, com microanimações que valorizam o gesto.
Reforço visual de confiança.
Selos de segurança, logótipos dos parceiros bancários e menções "Pagamento seguro" colocados estrategicamente junto ao botão de ação.
Modo escuro e contrastes.
Uma paleta de cores (violeta assinatura) trabalhada para um conforto de leitura ótimo e o respeito das normas de acessibilidade.
A técnica
- Redesenho do front-end do widget de doação em React/Next.js para uma fluidez máxima (SPA feel).
- Integração nativa das carteiras móveis (Apple Pay, Google Pay) para reduzir o tempo de pagamento para < 10 segundos.
- Otimização drástica dos Core Web Vitals (LCP < 1.2s, CLS < 0.1).
- Implementação de testes A/B contínuos sobre os textos dos CTA e o posicionamento da gorjeta.
- Auditoria e correção RGAA (acessibilidade) nível AA.
O projeto em números
- 100 % dos fundos entregues aos organismos (modelo de gorjeta)
- Widget de doação integrado em iframe ou redirecionamento fluido em mais de 50 000 sites de associações
- Pagamento em 3 cliques no telemóvel graças às carteiras
- Conformidade RGAA nível AA validada
- Disponibilidade de 99,99% durante os picos de atividade (Téléthon, crises humanitárias)
Os resultados
- Tráfego global (GA4, 6 meses após o redesenho): 4,2 milhões de visitas/mês (com picos a 8M em dezembro)
- Taxa de conversão das doações (GA4): +18 % de aumento da taxa de conclusão do formulário de doação face à versão anterior
- Quota do telemóvel (GA4): 68 % das doações são agora finalizadas no smartphone (vs 52 % antes)
- Taxa de rejeição na página de confirmação: < 5 % (os utilizadores partilham a sua doação nas redes sociais)
- Pontuação Lighthouse (Desempenho): 98/100 no telemóvel
Nas suas palavras
Numa plataforma como a nossa, cada décimo de segundo de fricção pode custar uma doação. A equipa soube repensar o percurso de pagamento com uma subtileza rara, colocando o ser humano e a simplicidade no centro. Os resultados na taxa de conversão em telemóvel ultrapassaram as nossas expectativas.
Desde a atualização do widget no nosso site, os nossos aderentes dizem-nos que o processo é muito mais simples. Vimos o nosso número de novos aderentes online aumentar 25 % em três meses. É fluido, tranquilizador e eficaz.
Mais projetos
O seu projeto merece o mesmo cuidado
Um site à medida, no ar em 7 dias, acompanhado por uma pessoa real.