Um menu que respira
O menu de departamentos do e-commerce das Farmácias São João mostrava mais de 80 links ao mesmo tempo. Redesenhei a navegação para revelar o catálogo aos poucos — sem perder um único caminho — e desenhei uma versão mobile que não existia antes.
Tudo visível é o mesmo que nada visível
O mega menu antigo abria os doze departamentos, as categorias e as subcategorias na mesma tela, em quatro colunas de texto corrido. Quem chegava sabendo o que queria precisava varrer a lista inteira com os olhos. Quem chegava sem saber, desistia e voltava para a busca.
- Sobrecarga cognitiva — mais de 80 alvos de clique competindo pela mesma atenção.
- Hierarquia achatada — departamento, categoria e subcategoria com peso visual quase idêntico.
- Leitura difícil — texto pequeno, entrelinha apertada e colunas longas demais para varrer.
- Sem equivalente mobile — a estrutura simplesmente não cabia na tela do celular.
Revelação progressiva em três níveis
Em vez de cortar categorias — o catálogo de uma farmácia precisa mesmo dessa profundidade —, mudei quando cada nível aparece. O menu passou a ser uma cascata: escolher um departamento abre suas categorias; escolher uma categoria abre as subcategorias. Cada coluna só existe quando faz sentido.
- Ícone por departamento — âncora visual que acelera o reconhecimento em uma lista longa.
- Estado ativo explícito — o item selecionado fica preenchido em azul, então você sempre sabe onde está.
- Seta de afordância — só quem tem filhos mostra o chevron; o resto é link direto.
- Respiro e escala — mais altura por item, caixa alta nos departamentos e contraste calibrado.
- Banner intacto — a área de mídia, que sustenta acordos comerciais, continua no mesmo lugar.
A mesma profundidade, outra experiência
Tudo de uma vez: o usuário precisa filtrar sozinho, no olho.
Um nível por vez: o menu conduz em vez de despejar.
A versão que faltava
No celular, a cascata vira empilhamento. Cada departamento é uma linha tocável com o mesmo ícone do desktop, e o chevron indica que há um próximo nível. Acima de tudo, dois blocos que resolvem a maior parte das visitas recorrentes: o convite para entrar na conta e um acesso rápido ao que a pessoa realmente volta para fazer.
- Login no topo — pedidos, cupons e cashback dependem de conta; o convite vem antes da navegação.
- Departamentos primeiro — a mesma ordem do desktop, para a memória do usuário funcionar nos dois lugares.
- Acesso rápido — perfil, pedidos, comprar novamente, cupons, favoritos, assinaturas, vacinas, cashback e ajuda.
- Área de toque generosa — linhas altas, separadas em cartões, sem alvos colados.
- Um ícone por linha — leitura por reconhecimento, não por releitura.
Menos esforço para chegar ao mesmo produto
A proposta preserva cada caminho do catálogo antigo — nenhuma categoria foi removida — e reduz o que precisa ser processado a cada passo. É o tipo de mudança que não aparece em uma tela isolada: aparece no tempo até o primeiro clique com intenção.
Catálogo grande não é desculpa para menu confuso
O reflexo comum em e-commerce de farmácia é mostrar tudo, com medo de esconder a venda. Mas a atenção é o recurso escasso, não o espaço na tela. Estruturar a informação em camadas foi o que permitiu manter a amplitude do catálogo e, ao mesmo tempo, deixar a navegação leve o bastante para ser usada de verdade.