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
- No ar
- Ver o site

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.


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.

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.

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.


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.

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.

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.
