Reestruturei a navegação principal do site da Roto-Rooter com o objetivo de melhorar a objetividade da experiência e aumentar o número de cliques em CTAs principais

A navegação principal é um componente de UI que está presente no site todo. Por isso, garantir que essa seção esteja bem desenhada, seguindo boas práticas de usabilidade, é o que garante uma boa experiência geral de uso.

Atuei de forma pró-ativa nessa iniciativa, porque sabia que melhorar esse componente poderia aumentar significativamente o número de cliques de agendamento e de ligação, e também os cliques no botão de qualificação de localização do usuário. Esse último pesa mais do que parece: a qualificação de localização é uma mecânica extremamente importante do sistema da Roto-Rooter, é ela que permite oferecer os serviços corretos para aquele endereço, os cupons exclusivos e o restante do conteúdo direcionado.

Esse componente mexe com o coração do site. Assumi o risco de que mudá-lo poderia causar um estranhamento no usuário — mas, a longo prazo, estava convicto de que essas correções iriam melhorar a experiência geral do site.

A ideia dessa apresentação foi mostrar os problemas de usabilidade que a navegação do site tinha e como corrigir cada um deles. Analisando alguns competidores e aplicando as boas práticas de design citadas junto de cada ponto, cheguei a sete itens que poderiam melhorar significativamente a experiência de uso da navegação principal.

O método de avaliação, para decidir o que deveríamos refazer, foi leitura: artigos sobre navegação, sobre leitura, sobre uso de white space e sobre boas práticas de design — mais o meu conhecimento geral como designer de experiência. Cada ponto da apresentação carrega as fontes que o sustentam, entre elas o Nielsen Norman Group, o Baymard Institute, a Smashing Magazine e um estudo revisado por pares sobre caixa de letra e legibilidade. O que saiu disso:

Essa foi a nova versão, a que corrigia todos os problemas levantados. Ponto a ponto:

1. Três níveis de menu viraram dois. O conteúdo é o mesmo, porém agora com uma linha a menos.
2. Todos os botões subiram para o primeiro nível do menu, numa hierarquia de informação mais clara: o campo de busca melhor posicionado, Schedule Online como ação primária e o telefone, contornado, como secundária — os dois onde quem chega decidido a agendar vai procurar.
3. O seletor de localização foi para o lado do logo, com affordance suficiente para parecer uma área clicável.
4. O cabeçalho perdeu cerca de 55% da altura, devolvendo esse espaço para o conteúdo de todas as páginas.
5. Botões e menus passaram para caixa mista, para que peso e caixa voltem a fazer o que existem para fazer: sinalizar o que importa.
6. Cupons foram para perto dos menus de apoio — Careers, Contact Us, Resources — em vez de ficar dentro do grupo de categorias de serviço.
7. O placeholder virou “Search…”, que funciona melhor.
8. O white space desnecessário saiu, sobrando o respiro que está de fato trabalhando.

Tirar os cupons do grupo de categorias resolveu onde eles ficavam, mas não o quanto pesavam. Então desenhei opções que aumentam a carga visual do menu e deixam claro que ele é um menu específico — um ícone de ticket, um tratamento preenchido e uma versão que já anuncia a oferta.

No celular valem as mesmas regras, com menos espaço para aplicá-las. Call e Schedule ficam visíveis na barra o tempo todo; o seletor de localização e a busca ficam no topo do painel, antes do menu; e as categorias de serviço abrem ali mesmo, para que ninguém perca o lugar ao descer um nível.

Este projeto foi apresentado como uma proposta de melhoria para a diretoria nacional da Roto-Rooter.

Até agora ele não foi executado — havia outras prioridades na pipeline de desenvolvimento — e eu não tenho visibilidade sobre a execução. Por isso este case não traz números das métricas que ele se propôs a mover, nem os problemas que a implementação teria revelado.

O que mais gostei desse projeto é que, mesmo com todas as alterações, todas as funcionalidades e todo o conteúdo se mantiveram presentes. Não perdemos nada, e ainda ganhamos muito em qualidade de design.

Se pudesse ter dado continuidade, gostaria de ter rodado testes A/B com versões diferentes para avaliar quais componentes performam melhor — o cupom, por exemplo — e de ter comparado as métricas com o menu anterior: número de cliques nos CTAs, número de interações com os menus de serviço e com os menus de apoio. É o que diria se a mudança trouxe melhora significativa.