A página bifurca na primeira dobra
Duas portas, cada uma com cor, médico e promessa próprios. A primeira decisão da página é do visitante, e a cor conduz a jornada dali em diante.
Redesign de prospecção
Duas especialidades, uma página só, nenhuma decisão.
Dermatologia e urologia dividiam o mesmo site sem nunca se separar: mesma dobra, mesmo slider, mesma copy. Quem procurava tratamento de melasma e quem procurava investigar um cálculo renal recebiam exatamente a mesma página.
Este é um redesign de prospecção, feito por iniciativa própria a partir de informação pública. Não houve contratação e a clínica não participou do processo. As fotografias são geradas e parte dos números da página publicada é ilustrativa.
Antes e depois
AntesSite atual
DepoisProposta
O que estava quebrado
- As duas especialidades nunca se separam, apesar de serem públicos e urgências diferentes
- O melhor argumento da clínica estava enterrado num parágrafo de página interna: atendimento estético seguro para pele sensível, alérgica e com doença autoimune
- As credenciais também: a home dizia apenas “equipe altamente qualificada”, enquanto as páginas internas mostram mestrado pela FMRP-USP e preceptoria da residência de urologia do HC
- O rodapé de todas as páginas apontava para design.it.nf, o ambiente de desenvolvimento do fornecedor, vazado em produção
Decisões de design
O argumento sai da página interna e vira headline
Quem tem pele sensível ou doença autoimune costuma ouvir não em procedimento estético. Aqui a médica que conduz o procedimento é a mesma que trata a doença de base, e é mestre nessa área.
Terceira direção de arte do lote
Base fria, display em sans e corpo em serifa, invertendo a hierarquia da Pascoal. Sistema bicromático onde a cor tem função de orientação, não de decoração.
Usabilidade e acessibilidade, medidas
- Quinze pares de contraste medidos, todos acima de WCAG AA, com o menor em 5,05:1
- Zero alvos de toque abaixo de 44px e zero overflow horizontal nos quatro breakpoints
- Um único H1 e hierarquia de títulos contínua
Técnica
- Next.js estático
- Sistema de cor por trilha, aplicado em componente único parametrizado
- Dados estruturados de clínica médica só com informação verificada
O que isso resolve
- Cada paciente chega ao conteúdo certo em um clique
- As credenciais de hospital universitário passam a trabalhar a favor da clínica
- O staging vazado do fornecedor some do rodapé
Outros trabalhos
SoulFork
Site institucional e de captação, no ar.
Clínica Dentária Pascoal
O preçário como argumento, não como tabela escondida.
Unique Odontologia
O ativo da clínica estava enterrado num bullet.
Storyboard automatizado
Do briefing na conversa ao PSD pronto, com duas aprovações minhas.