Taxa de conclusão do formulário online subiu 13 % após redução no número de passos, criação de novas funcionalidades e modernização visual da interface.
Contexto & O resultado
Contexto
Roto-Rooter é empresa líder nos Estados Unidos no ramo de serviços de encanamento. Para agendar um serviço, o cliente pode ligar na central telefônica ou fazer o agendamento online.
O formulário de agendamento online havia sido desenvolvido há alguns anos e nunca mais revisitado. Além de não seguir boas práticas, esse design mostrava uma taxa de abandono de 27% ao final do fluxo.
O resultado
Depois de 15 dias em ambiente de produção.
Taxa de conversão
Taxa de erros
Time-to-task
Fluxo completo
Processo de design
Conduzi esse processo em seis etapas, sempre validando as decisões com dados e com o time de produto.
Definir métricas de sucesso
Definimos as principais métricas para medir se as mudanças realmente melhorariam a experiência e o desempenho da solução.
- Definição dos principais KPIs
- Alinhamento com objetivos do negócio
- Estabelecimento de critérios para comparar versões
Identificar problemas críticos
Começamos pelos problemas mais evidentes de UX e UI, pontos que estavam claramente prejudicando a experiência e precisavam ser resolvidos de imediato.
- Análise da experiência atual
- Identificação de problemas conceituais e visuais
- Priorização dos problemas mais críticos
Explorar direções de design
Com os principais problemas mapeados, exploramos diferentes possibilidades de solução e referências para definir uma nova direção de design.
- Busca e análise de referências
- Exploração de diferentes abordagens
- Definição do conceito inicial
Alinhar com o cliente
Apresentamos a direção proposta ao cliente, explicando as decisões de design e validando o caminho antes de avançar.
- Apresentação da proposta
- Discussão das decisões de design
- Coleta e incorporação de feedback
Evoluir o design
Refinamos os componentes existentes e criamos novos padrões e variações para dar suporte à nova experiência.
- Revisão dos componentes existentes
- Criação de novos componentes e variações
- Aplicação dos padrões ao fluxo
Medir e comparar
Testamos as diferentes versões para entender qual solução apresentava melhor desempenho em relação às métricas definidas no início.
- Comparação entre versões
- Análise dos dados
- Identificação da versão com melhor performance
Alterações visuais críticas
Cada mudança aqui resolve um problema específico, fundamentado em heurísticas de usabilidade e boas práticas de acessibilidade.
Contraste e uso de cores
Modernização e novas funcionalidades
Novos componentes e ajustes pensados para deixar o fluxo mais rápido e mais moderno.
Banner informativo
Teste de usabilidade
Para validar as decisões antes de fechar a versão final, testei os protótipos com 7 pessoas de diferentes faixas etárias, buscando representar o público real que agenda um serviço de encanamento, desde quem já é confortável com tecnologia até quem não é.
Progresso
- Desenhei três variações do componente de progresso (stepper, spinner e tag) e testei todas em mobile e desktop.
- O spinner teve boa aceitação no mobile, mas performou mal no desktop.
- Optamos pelo stepper por ter desempenho consistente nas duas versões.
Campos
- Perguntei se o agrupamento de campos fazia sentido e se sentiam falta de alguma informação ao solicitar o serviço.
- O retorno foi consistente: os campos pedidos eram os necessários, sem lacunas percebidas.
Navegação
- Mapeei cenários de avançar, voltar e lidar com erros durante o preenchimento.
- Observei se o fluxo era intuitivo do início ao fim.
Percepção visual
- Pergunta mais qualitativa: o novo layout parecia mais moderno e agradável visualmente do que a versão anterior?
O feedback foi incorporado nos ajustes finais, e a versão resultante foi entregue ao time de desenvolvimento para integração e publicação.
Meus aprendizados
O que aprendi
- Nem toda decisão é definida por lógica técnica, parte do trabalho é justamente negociar bem quando uma recomendação é rejeitada.
- Aprendi a diferenciar o que compromete usabilidade do que é preferência do cliente, e a ceder de forma profissional quando cabe.
O que faria diferente
- Buscaria acesso a mais dados analíticos para identificar problemas de forma mais independente.
- Testaria via A/B as hipóteses não implementadas, como o reordenamento de campos, para validar impacto com dados em vez de argumentação.
- Ampliaria o teste de usabilidade para mais participantes.