Redesign & Design System

O cliente é uma empresa de saúde corporativa: vende para o RH de outras empresas, em cinco linhas de serviço cheias de vocabulário regulatório e clínico.

A presença digital tinha sido construída em camadas. Cada ponto de contato foi feito em um momento diferente, sem padrão visual entre eles nem biblioteca de componentes para reaproveitar.

Os formulários pediam os mesmos campos para todo mundo, independentemente do serviço procurado ou do porte da empresa. O abandono no preenchimento era alto e quem saía da página seguia sem saber direito o que era oferecido.

O briefing pedia o redesign das páginas de contato, das landing pages de materiais ricos e do portal institucional.

A pesquisa mostrou onde estava o gargalo: o produto não se explicava. A linguagem era burocrática, herdada de contrato e de norma técnica, e exigia que o visitante já dominasse o vocabulário do setor para entender o que estava sendo vendido.

O layout somava ao problema. Cada página tinha composição e hierarquia próprias, todas defasadas em relação ao que a marca já era, e o conjunto não parecia da mesma empresa. Isso não é questão de gosto: sem padrão, o leitor recomeça o entendimento a cada página em vez de acumular.

As cinco linhas de serviço estavam apresentadas como cinco produtos avulsos. Reordenei na sequência do ciclo de saúde de uma empresa: prevenção, afastamento, ambulatório, assistencial, saúde mental. O conjunto passa a ser lido como um ciclo, e não como um catálogo.

A home foi escrita para duas pessoas: primeiro o benefício de quem usa o serviço, o funcionário; depois o de quem assina o contrato, o gestor. Em saúde corporativa não são a mesma pessoa.

E o visual virou regra, não tela: cada cor com um papel, uma delas reservada só para a ação. A biblioteca de componentes veio antes de qualquer tela final.

O contato principal virou um modal com duas etapas na mesma tela: identificação primeiro, com nome, e-mail e empresa; qualificação depois. Três perguntas fazem esse trabalho: faixa de funcionários, assunto de interesse entre as linhas de serviço e praça. O campo de e-mail só aceita domínio corporativo.

Com isso o lead chega ao comercial já roteado: a faixa indica o porte da conta, o assunto define qual time atende, a praça diz se existe operação na cidade.

Cada peça disso saiu da mesma biblioteca: os campos, os estados de erro, as telas de sucesso e o opt-in de cookies, todos mapeados em tokens e documentados no Figma com comportamento, responsividade e acessibilidade.

Fui o único designer no projeto. Conduzi o benchmarking, as entrevistas e a análise, defini a arquitetura de informação, montei o design system, prototipei em alta fidelidade e escrevi a documentação: todo o ciclo de product design.

A engenharia assumiu a partir do handoff, encarregada do código e da implementação das telas em produção.

A oferta parou de exigir vocabulário do setor para ser entendida, e o contato deixou de ser um formulário único e rígido. Do lado de dentro, o comercial deixou de receber uma fila indistinta.

No primeiro mês no ar, o Analytics mostrava mais leads chegando pelo formulário e tempo de permanência maior nas páginas do que na versão anterior.

O handoff também correu direto: cada tela era uma página documentada, e o time implementou a partir da especificação, sem reinterpretar a interface pelo caminho.

O que ficou desse trabalho tem menos a ver com as telas e mais com o formato da entrega: um sistema documentado tira a interpretação do caminho, e o desenho chega pronto para ser construído.

Redesenhar as páginas como foi pedido teria custado o mesmo esforço e devolvido o mesmo produto ilegível, mais bonito. O que mudou o resultado foi mexer no que a página dizia e na ordem em que dizia, antes de decidir como ela ia parecer.