24 / CASE VEDDU · Consultoria de planos de saúde
Site para corretora de plano de saúde: Health Class
Site institucional da Health Class, consultoria de planos de saúde, organizado pelas operadoras que ela oferece e pelo pedido de cotação.
Role a página: a home da consultoria passa inteira, do slide de abertura ao rodapé, no desktop e no celular.
Contexto
do projeto
Resposta direta
O que o site de uma corretora de plano de saúde precisa ter
O site de uma corretora de plano de saúde precisa de uma página para cada operadora com que ela trabalha. Quem procura plano começa pela marca que já conhece, como Amil, Bradesco ou SulAmérica, e raramente pelo nome de uma corretora.
- Contexto
- Plano de saúde se compra direto da operadora ou por uma corretora que vende planos de várias delas. A Health Class é uma consultoria desse segundo tipo, com sede no Tatuapé, em São Paulo. Disputa o cliente com as operadoras, que anunciam direto ao consumidor, e com corretoras de todos os tamanhos.
- Desafio
- Reunir várias operadoras e outras linhas de seguro num site só, sem que a Health Class desapareça atrás delas.
- Decisão
- Fazer da operadora a porta de entrada e da consultoria o argumento: a página de cada marca explica como a Health Class atende e termina no pedido de cotação.
Quatro telas do site e a decisão por trás de cada uma.
As capturas são de outubro de 2026 e seguem uma visita possível: a página de uma operadora, a explicação do serviço, quem atende e o pedido de contato. Nas telas que mudam de forma no celular, a versão do telefone vem junto.
Página de operadora
Toda página de operadora segue o mesmo molde, da ficha às abas.
A página de cada operadora abre com uma ficha em faixa preta, acima da foto: operadora, abrangência e modalidades, que no celular viram uma lista empilhada. Mais abaixo vêm sempre as abas Sobre, Vantagens e Requisitos, na mesma ordem em todas as marcas, para que duas delas se comparem item por item. A aba Requisitos diz o que ter em mãos para a simulação, começando por nome, CPF e idade.
Como funciona
O serviço é explicado em três passos, do pedido à escolha.
Uma faixa escura da home responde o que acontece depois do formulário: a pessoa pede a cotação, a equipe compara planos a partir do perfil dela e apresenta as opções para a escolha. Os passos vêm numerados, ligados por uma linha tracejada, cada um com uma frase curta. Para quem nunca contratou plano por corretora, fica claro que pedir a cotação ainda não é fechar contrato.
Quem somos
A página Quem somos abre com a foto do escritório da consultoria.
Sob o título Sobre nós aparece o salão de atendimento de verdade: estações de trabalho ocupadas, a parede verde e o logo da Health Class na parede. Quem vai confiar os dados da família a uma corretora quer saber se, do outro lado, existe uma equipe num endereço. A foto responde antes de qualquer parágrafo.
Cotação
O WhatsApp e o telefone aparecem antes dos campos do formulário.
Na seção Solicite uma cotação gratuita, a caixa de atendimento urgente fica acima do card de contato, com o número do WhatsApp e o do telefone fixo à vista. Quem não quer preencher campos já tem para onde ir. No celular, a ordem se mantém, e o card abre com cinco estrelas e as mais de 945 avaliações que a consultoria exibe.
Como a Veddu constrói um site que a corretora amplia uma operadora por vez.
Mapa de páginas · sitemap, menu e páginas publicadas
- 8
- páginas de operadora no sitemap (7 no menu)
- 2
- linhas com página própria (saúde e odontológico)
- 3
- tipos de contratação na página Plano de Saúde
- Alice
- Amil
- Bradesco Saúde
- Hapvida
- MedSênior
- Porto Saúde
- SulAmérica
Contagem pelo sitemap, pelo menu e pelas páginas publicadas.
Duas destas camadas aparecem para quem navega, no menu e nas cores. As outras duas ficam no código-fonte das páginas, onde qualquer pessoa pode conferi-las.
- 01
Duas listas no menu: tipo de plano e operadora
Planos reúne as linhas que têm página própria, e Operadoras lista as marcas uma a uma. Quem já decidiu pela marca vai direto à página dela; quem ainda não tem marca em mente começa pelo tipo de plano, saúde ou odontológico.
Mapa de páginas · sitemap, menu e páginas publicadas
- 8
- páginas de operadora no sitemap (7 no menu)
- 2
- linhas com página própria (saúde e odontológico)
- 3
- tipos de contratação na página Plano de Saúde
Submenu Operadoras- Alice
- Amil
- Bradesco Saúde
- Hapvida
- MedSênior
- Porto Saúde
- SulAmérica
Contagem pelo sitemap, pelo menu e pelas páginas publicadas.
- 02
Um nome de formulário para cada página
Cada formulário de cotação leva no código um nome que diz em que página ele está: dois na home, um em cada página de linha e um em cada operadora. Com isso, a origem de cada pedido fica identificada pelo próprio formulário. A newsletter do rodapé tem nome à parte e não se mistura com as cotações.
Nome de cada formulário · HTML publicado
- Home, primeira dobra
- Solicite Cotação ( Site )
- Home, seção de cotação
- Cotacao - 2 form Home
- Plano de Saúde
- Cotacao - Plano de Saude
- Plano Odontológico
- Planos Odontológico
- Operadora Amil
- Cotacao - Operadora Amil
- Operadora SulAmérica
- Cotacao - Operadora SulAmerica
- Operadora NotreDame Intermédica
- Cotacao - Operadora NotreDame
- Rodapé de todas as páginas
- Newsletter - Site HealthClass
Atributo name dos formulários no HTML publicado. As outras páginas de operadora seguem o mesmo padrão.
- 03
Vermelho do logo para a ação, preto e branco para o resto
O vermelho do coração do logo fica reservado para o que pede atenção: botões em pílula, sobretítulos e números. Textos e faixas escuras ficam no quase preto, alternando com seções brancas e cinza-claras para separar os assuntos. As páginas internas abrem sobre um fundo cinza com ondas suaves, e os cards brancos recebem fotos recortadas sobrepostas.
Sistema visual · medido no site publicado
- Vermelho
- #CD0001 · botões em pílula, sobretítulos, números e o coração do logo
- Quase preto
- #1A1A1A · textos, faixa do topo e faixas escuras da home
- Cinza claro
- #F5F5F5 · fundo das seções de apoio
- Branco
- #FFFFFF · fundo das páginas
- Plus Jakarta Sans
- títulos de seção em 45 px e peso 700, e o título do slide
- DM Sans
- sobretítulos em caixa alta de 14 px, botões e textos em 16 px
Cores e fontes medidas no estilo calculado da home e das páginas internas publicadas.
- 04
Um ajuste de carregamento feito com o site no ar
Num ciclo de otimização de 2026, a Veddu passou a pedir ao navegador a foto de abertura certa para cada largura de tela antes do resto da página: a do primeiro slide no desktop e um arquivo próprio no celular. O ajuste fica fora do tema, para não se perder na próxima atualização.
1<link rel="preload" as="image"2 href="https://healthclass.com.br/wp-content/uploads/2025/05/CONSULTORIA.webp"3 media="(min-width: 768px)" fetchpriority="high">4<link rel="preload" as="image"5 href="https://healthclass.com.br/wp-content/uploads/2025/05/health-class-mobile.webp"6 media="(max-width: 767px)" fetchpriority="high">As duas linhas de preload do HTML publicado, quebradas em seis para leitura: cada largura de tela pede a sua foto de abertura.
Um site de corretora começa por um diagnóstico.
Antes de qualquer tela, a Veddu lista com você as operadoras com que a corretora trabalha, as linhas que ela vende e quem costuma pedir cotação: pessoa física, MEI ou empresa. Cada item dessa lista vira uma página ou um campo do formulário.