WebsiteDr. João Vitor Garcia2025

Paciente com dor na mão pesquisa o sintoma, não o médico. Por isso o site explica a condição antes de oferecer a consulta.

Cliente
Papel
Product builder: estratégia, design e desenvolvimento com IA
Duração
Cerca de 6 semanas
Disciplinas
Arquitetura de informação, UX/UI, Conteúdo, SEO local
Página inicial do site do Dr. João Vitor Garcia, com banner em tons de verde-água e botão de agendamento

O contexto

O Dr. João Vitor Garcia é ortopedista, com formação em cirurgia da mão e punho, e atende em Sorocaba, no interior de São Paulo. Estava abrindo o próprio consultório. Tinha currículo forte (residência, fellowship, microcirurgia) e um sistema de agendamento online já contratado. Faltava o lugar onde o paciente descobre tudo isso antes de marcar.

O objetivo de negócio era simples de dizer: transformar busca em consulta agendada. Para chegar lá, o site precisava fazer duas coisas ao mesmo tempo: passar confiança médica e tirar do caminho qualquer atrito até o agendamento.

A dor

Quem chega a um site de ortopedista quase nunca chega procurando o médico. Chega com um sintoma: formigamento na mão à noite, dedo que trava, dor no punho ao segurar o celular. A pessoa pesquisa o que sente, cai em conteúdo genérico, e só depois decide com quem se tratar.

Um site que só fala “sobre o doutor” perde esse paciente na primeira busca. E um site que explica bem, mas esconde o botão de agendar, perde na última etapa.

O estudo

A arquitetura de informação saiu dessa leitura do caminho do paciente:

  • Condições como porta de entrada. Cada condição tratada virou uma página própria (túnel do carpo, dedo em gatilho, tendinite de De Quervain, menisco, hérnia de disco lombar, infiltrações no joelho, cirurgia minimamente invasiva) e uma página de “como funciona a consulta”. Oito páginas de conteúdo, cada uma com título, descrição e palavras-chave próprias.
  • Um roteiro fixo por página: o que é, como impacta a vida, sintomas, causas e fatores de risco, tratamento (conservador primeiro, procedimentos depois), perguntas frequentes e o próximo passo. O paciente lê a própria situação antes de ler qualquer credencial.
  • Credenciais no meio, não no topo. Formação e áreas de atuação aparecem depois que o problema do paciente foi reconhecido. É ali que elas pesam.
  • O agendamento em todo lugar. O botão para a agenda online está no topo fixo, no banner, em cada card de condição, no bloco do médico e no fim de cada página. WhatsApp flutuante para quem prefere conversar.
Banner da página inicial com o nome do Dr. João Vitor Garcia, especialidade e botão para conhecer o doutor
O banner roda entre apresentação, consulta e condições; o botão de agendar fica fixo no topo o tempo todo.
Bloco com os quatro pilares do atendimento e chamada para agendar
Antes do currículo, o que o paciente vai sentir no consultório: acolhimento, clareza, precisão e técnica pouco invasiva.

A solução

A página inicial funciona como um índice do consultório. Os pilares do atendimento vêm logo depois do banner; em seguida, um carrossel com as condições tratadas, cada card levando à página da condição ou direto ao agendamento.

Carrossel de condições tratadas com ilustrações de joelho, punho e polegar
As condições são a vitrine. Ilustração anatômica e uma frase de sintoma que o paciente reconhece.

O bloco do Dr. João Vitor reúne foto, formação e áreas de especialização em cards curtos. É prova de competência, mas escrita para leigo.

Bloco de apresentação do médico com foto, formação e áreas de especialização
Formação listada em linguagem direta; as áreas de atuação viram cards clicáveis.

As páginas de condição seguem o roteiro definido no estudo. Por ser conteúdo de saúde, o tom é informativo e sem promessa de resultado; o fechamento é sempre o mesmo convite: agende uma avaliação.

Página da síndrome do túnel do carpo com banner ilustrado e breadcrumb
Cada condição tem URL, título e descrição próprios: é por aqui que a busca pelo sintoma entra.
Chamada para consulta com foto do médico no consultório e dois botões: WhatsApp e agendamento online
Dois caminhos para o mesmo fim: quem quer conversar vai ao WhatsApp, quem já decidiu vai à agenda.

O contato ficou em três camadas: agenda online (sem falar com a secretária), WhatsApp e um formulário para quem quer descrever o caso antes. A ideia é que o repetitivo, como explicar a consulta e marcar horário, se resolva no site, e que a conversa fique para quem precisa dela. O formulário valida os campos no navegador e envia por um script de e-mail no próprio servidor de hospedagem, sem serviço pago no meio.

Seção de contato com endereço, horário, bloco de agendamento online e formulário
O formulário é o caminho mais lento, e está por último de propósito.

No celular, o site ganhou versões próprias do banner, das condições e dos depoimentos, em vez de só empilhar o layout de desktop.

Três telas do site no celular: banner, pilares do atendimento e condições tratadas
Componentes pensados para o celular, não apenas encolhidos.

Como foi construído

React com Vite, Tailwind e uma biblioteca de componentes acessíveis, gerado e iterado com um construtor de interfaces com IA e refinado à mão. O SEO foi tratado como parte do produto: título, descrição, canonical e Open Graph por página, dados estruturados de médico (schema.org Physician) com endereço e área atendida, sitemap e robots. A privacidade também: banner de cookies com preferências separadas por categoria (necessários, análise, marketing), guardadas no navegador, e política de privacidade própria.

O deploy é automático: cada alteração aprovada no repositório gera o build e publica por FTP na hospedagem que o cliente já tinha. Sem servidor novo para manter.

O que eu levo desse projeto

  • Em saúde, o conteúdo é a conversão. O paciente só clica em “agendar” depois de sentir que alguém entendeu o sintoma dele. A página de condição faz esse trabalho melhor que qualquer banner.
  • Repetir o CTA não é poluição quando ele é o único objetivo. O site tem uma ação que importa e a oferece em todo ponto de decisão.
  • Usar o que o cliente já tem. Agenda online contratada, hospedagem compartilhada e e-mail próprio. O site se encaixou na operação existente em vez de criar uma nova.
  • IA acelera a construção, não a decisão. O construtor com IA tirou semanas de código repetitivo. A estrutura das páginas, o roteiro do conteúdo e onde o botão aparece continuaram sendo trabalho de design.
Próximo projetoWebsite · OR&C AdvogadosOR&C Advogados, um site para dois públicos