Pular para o conteúdo
Todos os projetos

Gestão clínica (CRM) · Landing page · Design system

Pulso

Protótipo de sistema de gestão clínica projetado para mostrar por onde o faturamento entra, e a landing page da clínica em produção, que transforma a visita em conversa no WhatsApp

Visitar integratj.com.br(abre em nova aba)
Cliente
INTEGRA · Clínica em Salvador
Cargo
Engenheiro de Software Front-end · Product Designer
Ano
2026
Tecnologias
  • React 19
  • Next.js 16
  • TypeScript
  • Tailwind CSS 4
  • Vite
  • Radix UI
  • Framer Motion
  • Recharts
  • dnd-kit
  • Zustand
  • Vercel

Contexto

A INTEGRA é uma clínica em Salvador (BA) com cinco pilares de atendimento: Emagrecimento & Estética, Performance & Hipertrofia, Saúde & Longevidade, Dermatologia e Nutrição. O projeto teve duas entregas: a landing page de captação, em produção em integratj.com.br, e o protótipo navegável do Pulso, sistema de gestão clínica com dados de demonstração.

Desafio

A captação pelo Instagram funcionava sem medição de qual origem gerava pacientes e faturamento, e a clínica já tinha trocado de sistema várias vezes sem encontrar um que ajudasse na gestão. O objetivo foi medir por onde o paciente entra, por onde entra mais e por onde poderia entrar mais.

Resultados

Telas navegáveis no protótipo do Pulso
40+
Perfis de acesso com menu e permissões próprios
6
Pilares de atendimento cobertos, do DRE à agenda
5

Principais entregas

  1. 01Desenvolvi a landing page em React 19, Vite e Tailwind CSS 4, publicada na Vercel, com hero em vídeo e CTAs que abrem o WhatsApp com a mensagem de agendamento já escrita
  2. 02Implementei SEO técnico local e otimização de performance com dados estruturados JSON-LD (MedicalClinic), sitemap, canonical, imagens WebP, fontes self-hosted e vídeos recomprimidos, para indexar a clínica na busca local de Salvador e deixar a página mais leve no celular
  3. 03Projetei e prototipei o Pulso em Next.js 16 e TypeScript: 40+ telas navegáveis e 6 perfis de acesso (recepção, direção médica, performance, dermatologia, gestão e portal do paciente)
  4. 04Criei a biblioteca de componentes do Pulso em React, Radix UI e Tailwind CSS 4, com tokens de cor, tipografia e elevação, material liquid glass e temas claro e escuro, padronizando as 40+ telas a partir dos mesmos tokens
  5. 05Construí dashboards com Recharts para atribuição de leads e CAC, desempenho de anúncios, fluxo de caixa e DRE por pilar, cruzando a origem de cada lead com o desfecho no pipeline
  6. 06Projetei em React e TypeScript a central de WhatsApp com agente de IA e copiloto assistido, o pipeline kanban com drag-and-drop (dnd-kit) e forecast ponderado, a agenda multiprofissional e as automações da jornada do paciente, com a ficha do lead visível dentro da conversa

Telas e componentes

  1. WhatsApp na landing

    Na landing em produção, os botões de agendamento do hero abrem o WhatsApp com a mensagem já escrita.

    Hero da landing da Clínica INTEGRA em verde-profundo e champagne: título “Saúde e performance integradas ao seu novo estilo de vida”, botões Agendar minha avaliação e Falar no WhatsApp sobre vídeo de um homem de costas diante de janelas amplas e plantas, e a faixa champagne do manifesto no rodapé.
    Hero da landing da Clínica INTEGRA em verde-profundo e champagne: título “Saúde e performance integradas ao seu novo estilo de vida”, botões Agendar minha avaliação e Falar no WhatsApp sobre vídeo de um homem de costas diante de janelas amplas e plantas, e a faixa champagne do manifesto no rodapé.

  2. Landing no celular

    No celular, os botões do hero ficam na altura do polegar e abrem o WhatsApp.

    • Landing da INTEGRA no celular: título em Cinzel, botão Agendar minha avaliação em champagne, botão Falar no WhatsApp logo abaixo e a faixa do manifesto no rodapé da tela.
      Landing da INTEGRA no celular: título em Cinzel, botão Agendar minha avaliação em champagne, botão Falar no WhatsApp logo abaixo e a faixa do manifesto no rodapé da tela.

  3. Atribuição de leads

    A tela Atribuição & CAC cruza cada origem de lead com o volume que ela traz e o desfecho no pipeline. Os dados são fictícios.

    Tela Atribuição & CAC do Pulso no tema escuro, com dados fictícios: barras empilhadas de origem × desfecho (indicação, Instagram, Meta Ads, Google, WhatsApp, site) com convertidos, em aberto e perdidos, e tabela de conversão por origem.
    Tela Atribuição & CAC do Pulso no tema escuro, com dados fictícios: barras empilhadas de origem × desfecho (indicação, Instagram, Meta Ads, Google, WhatsApp, site) com convertidos, em aberto e perdidos, e tabela de conversão por origem.

  4. Anúncios e CAC

    A aba Desempenho compara investimento e leads por pilar e mostra os dias em que o gasto em mídia não gerou leads no CRM. Os dados são fictícios.

    Tela Anúncios do Pulso, aba Desempenho, com dados fictícios: barras de investimento × leads por pilar de atendimento e gráfico diário de gasto em barras com a linha de leads que entraram no CRM.
    Tela Anúncios do Pulso, aba Desempenho, com dados fictícios: barras de investimento × leads por pilar de atendimento e gráfico diário de gasto em barras com a linha de leads que entraram no CRM.

  5. Pipeline de vendas

    O pipeline kanban calcula o forecast ponderado e o tempo parado por etapa, e cada card traz o protocolo, o dono e a próxima ação quando há uma. Os dados são fictícios.

    Pipeline de vendas do Pulso em kanban, com leads fictícios: abas Funil, Lista, Propostas, Perdas e Desempenho, filtros por pipeline e área, faixa de indicadores com forecast ponderado, conversão e valor parado, e colunas Captação, Novo, Contato feito e Qualificado com cards de leads.
    Pipeline de vendas do Pulso em kanban, com leads fictícios: abas Funil, Lista, Propostas, Perdas e Desempenho, filtros por pipeline e área, faixa de indicadores com forecast ponderado, conversão e valor parado, e colunas Captação, Novo, Contato feito e Qualificado com cards de leads.

  6. Agente de IA no WhatsApp

    No fluxo projetado da central de WhatsApp, o agente de IA responde no idioma do paciente o que está no escopo e transfere o restante para a equipe. Os dados são fictícios.

    Central de Conversas do WhatsApp no Pulso, com dados fictícios: lista de contatos com tempo de espera, conversa em inglês em que o agente respondeu no idioma da paciente com a opção Ver em português e passou a pergunta de preço para a equipe, sugestão de resposta da IA e ficha da lead no pipeline com proposta aberta.
    Central de Conversas do WhatsApp no Pulso, com dados fictícios: lista de contatos com tempo de espera, conversa em inglês em que o agente respondeu no idioma da paciente com a opção Ver em português e passou a pergunta de preço para a equipe, sugestão de resposta da IA e ficha da lead no pipeline com proposta aberta.

  7. Portal do paciente

    O portal do paciente permite confirmar ou remarcar a próxima consulta em um toque. A tela Meu Protocolo mostra o que fazer hoje, reunindo a prescrição de cada especialista, e a tela Minha Evolução mostra as medidas, as metas e a curva de peso. Os dados são fictícios.

    • Portal do paciente no Pulso, com paciente fictícia: saudação com o progresso do protocolo, card verde da próxima consulta com botões Confirmar presença e Remarcar, lista de consultas e tab bar do portal.
      Portal do paciente no Pulso, com paciente fictícia: saudação com o progresso do protocolo, card verde da próxima consulta com botões Confirmar presença e Remarcar, lista de consultas e tab bar do portal.
    • Tela Meu Protocolo no celular, com dados fictícios: protocolo Emagrecimento Integrado 16s na fase de intensificação, barra de progresso da semana 9 de 16 e abas Hoje, Médico, Nutrição e Treino com a refeição do momento e substituições.
      Tela Meu Protocolo no celular, com dados fictícios: protocolo Emagrecimento Integrado 16s na fase de intensificação, barra de progresso da semana 9 de 16 e abas Hoje, Médico, Nutrição e Treino com a refeição do momento e substituições.
    • Tela Minha Evolução no celular, com dados fictícios: cards de peso atual, total perdido, gordura corporal e cintura com variação e selos de meta, e gráfico da evolução do peso com filtro de período.
      Tela Minha Evolução no celular, com dados fictícios: cards de peso atual, total perdido, gordura corporal e cintura com variação e selos de meta, e gráfico da evolução do peso com filtro de período.

  8. Temas claro e escuro

    O painel da gestão aparece nos dois temas lado a lado, montado com os mesmos componentes e só com os tokens trocados. Os dados são fictícios.

    O painel da gestão do Pulso cortado na diagonal: à esquerda no tema claro, à direita no tema escuro, com os mesmos cards de fluxo de caixa, receita e despesa, pacientes, despesas por categoria e estoque, e dados fictícios.
    O painel da gestão do Pulso cortado na diagonal: à esquerda no tema claro, à direita no tema escuro, com os mesmos cards de fluxo de caixa, receita e despesa, pacientes, despesas por categoria e estoque, e dados fictícios.

  9. Fundamentos

    A primeira prancha reúne os tokens de cor, tipografia, raio e elevação do Pulso, com os valores dos temas claro e escuro, e os controles base em todos os estados.

    Prancha 1 do design system do Pulso, Foundations: dez tokens de cor com os valores do tema claro e do escuro (canvas, surface, ink, brand #0E3B2D, gold #CAB79C, success, warning, danger, info e brand 2), as cores dos cinco pilares, escala tipográfica em Montserrat e Cinzel, raios e sombras, botões em seis variantes, três tamanhos e cinco estados, e campos com foco e erro, select, controle segmentado, switch e checkbox.
    Prancha 1 do design system do Pulso, Foundations: dez tokens de cor com os valores do tema claro e do escuro (canvas, surface, ink, brand #0E3B2D, gold #CAB79C, success, warning, danger, info e brand 2), as cores dos cinco pilares, escala tipográfica em Montserrat e Cinzel, raios e sombras, botões em seis variantes, três tamanhos e cinco estados, e campos com foco e erro, select, controle segmentado, switch e checkbox.

  10. Componentes

    A segunda prancha mostra os componentes de navegação, dados e conversa que se repetem nas 40+ telas do Pulso. Os dados são fictícios.

    Prancha 2 do design system do Pulso, Components: sidebar verde-vidro com itens nos estados ativo, hover e padrão e selo de IA, topbar com busca, ação rápida, notificações e troca de tema, badges em doze tons, cards de KPI, card de gráfico de receita e despesa, abas, cards de lead do kanban no estado normal e atrasado, e conversa com tradução, transferência do agente de IA para a equipe e resposta humana.
    Prancha 2 do design system do Pulso, Components: sidebar verde-vidro com itens nos estados ativo, hover e padrão e selo de IA, topbar com busca, ação rápida, notificações e troca de tema, badges em doze tons, cards de KPI, card de gráfico de receita e despesa, abas, cards de lead do kanban no estado normal e atrasado, e conversa com tradução, transferência do agente de IA para a equipe e resposta humana.

  11. Camadas de material

    Cada tela do Pulso empilha quatro camadas de material, sempre na mesma ordem: base, chrome, cards e overlays. Os dados são fictícios.

    Vista explodida de uma tela do Pulso no tema escuro, em quatro planos empilhados em 3D e identificados à direita: 01 base com a aurora da marca, 02 chrome com sidebar e topbar verde-vidro, 03 cards de vidro com KPIs e o gráfico origem × desfecho, e 04 overlays com toast, menu de período e sugestão de resposta da IA.
    Vista explodida de uma tela do Pulso no tema escuro, em quatro planos empilhados em 3D e identificados à direita: 01 base com a aurora da marca, 02 chrome com sidebar e topbar verde-vidro, 03 cards de vidro com KPIs e o gráfico origem × desfecho, e 04 overlays com toast, menu de período e sugestão de resposta da IA.

Funcionalidades e as dores que resolvem

Cada funcionalidade nasceu de um problema real da operação.

  1. 01

    WhatsApp na landing

    Dor
    Sem agenda online integrada, o agendamento da clínica acontece no WhatsApp, e a landing precisava levar a visita até essa conversa com o mínimo de passos.
    Solução
    Na landing em produção, todos os botões de agendamento abrem o WhatsApp da clínica com “Quero agendar minha avaliação” já escrito. O link sai de uma constante única, então trocar número ou texto muda os 8 botões de uma vez.

    Impacto: 8 botões de agendamento, 3 deles no primeiro scroll, abrem a mesma conversa pré-preenchida

  2. 02

    Atribuição de leads

    Dor
    A captação pelo Instagram, local e à distância, funcionava sem medição: a clínica não sabia qual origem trazia pacientes e qual só trazia volume.
    Solução
    No Pulso, cada origem vira uma barra com o desfecho dentro (convertido, em aberto, perdido): o comprimento mostra o volume e a composição mostra a qualidade. Custo, CPL e CAC ficam na tela de Anúncios.

    Impacto: 6 origens cruzadas com o desfecho, calculadas dos leads do pipeline, sem constantes fixas

  3. 03

    Anúncios e CAC

    Dor
    O gerenciador de anúncios conta “resultados”, não pacientes, e pode mostrar como ativa uma campanha que não entrega nada. Com ele sozinho, “qual campanha trouxe o último paciente?” fica sem resposta.
    Solução
    No Pulso, a tela separa o que a plataforma reporta do que o CRM sabe (lead com nome, avaliação, paciente, receita), marca como “aproximada” a cifra que depende de rateio, lista os anúncios sem parâmetro de rastreio, que não registram a origem do lead, e avisa há quantos dias uma campanha ativa está sem entrega.

    Impacto: CAC e ROI por campanha, pilar e canal; sem paciente, o CAC aparece como “—”, não zero

  4. 04

    SEO local da landing

    Dor
    Uma clínica em Salvador precisa aparecer na busca local, e uma página com vídeo no hero e depoimentos em vídeo pesa no celular.
    Solução
    Na landing em produção: dados estruturados JSON-LD de clínica médica com endereço e área atendida, canonical, sitemap e robots, mais imagens WebP, vídeos recomprimidos e fontes servidas do próprio domínio com preload.

    Impacto: Schema MedicalClinic + LocalBusiness, canonical e fontes próprias no ar em integratj.com.br

  5. 05

    Pipeline de vendas

    Dor
    Visão macro do comercial estava na lista de dores da operação: sem pedir um relatório, a gestão não via em que etapa estava cada interessado, que protocolo ele negociava e com quem o caso estava parado.
    Solução
    No Pulso, um kanban com arrastar e soltar (dnd-kit) troca as colunas entre etapa, protocolo, especialidade e responsável, com forecast ponderado pela probabilidade de cada etapa e alerta de lead parado além do prazo definido na coluna.

    Impacto: 4 recortes do mesmo funil e 5 abas: Funil, Lista, Propostas, Perdas e Desempenho

  6. 06

    Agente de IA no WhatsApp

    Dor
    Uma IA de atendimento sem limites claros pode responder o que não deve e atrapalhar mais do que ajudar, e os contatos com pacientes ficam espalhados entre canais.
    Solução
    No fluxo projetado do Pulso, o agente atende a rotina no idioma do paciente e passa preço, negociação ou sintoma para a equipe com um resumo, que assume e devolve a conversa na Central com sugestões de resposta e a ficha do lead ao lado. O mesmo agente foi desenhado para retomar falta, orçamento parado, fim de protocolo e parcela atrasada, e um monitor mostra o que ele resolveu, o que espera resposta e o que escalou.

    Impacto: 5 regras fixas declaradas no agente, como silêncio das 21h às 8h e nunca negociar preço

  7. 07

    Automações

    Dor
    Confirmação de consulta e pós-consulta não podem depender de alguém lembrar, e um fluxo automático que para de entregar costuma morrer em silêncio, sem ninguém perceber.
    Solução
    No Pulso, um builder gatilho → condições → ações simula antes de ligar (quem receberia a mensagem agora, já sem quem pediu opt-out), e um painel de saúde acusa fluxo com erro crônico ou sem sucesso recente.

    Impacto: 12 fluxos prontos sobre 16 gatilhos e 8 ações, como a confirmação na véspera e 2 h antes

  8. 08

    Caixa, cobrança e DRE

    Dor
    DRE e financeiro estavam na lista de dores da operação, e paciente dizendo que pagou ainda não é dinheiro conferido.
    Solução
    No Pulso, o caixa separa faturas pendentes, atrasadas e “a conferir” (pagamento declarado pelo paciente, que só vira pago depois da checagem da recepção). A DRE mostra receita, custos e resultado por mês ou acumulado, com a abertura por pilar identificada como rateio.

    Impacto: Painel, DRE e Relatórios leem a mesma série, então o mesmo mês nunca tem dois valores

  9. 09

    Agenda e lista de espera

    Dor
    A gestão da agenda estava na lista de dores da operação, e a recepção encaixa pacientes de cinco pilares, cada um com os seus médicos.
    Solução
    No Pulso, a grade diária mostra a cor de cada médico e o status de cada atendimento, e a lista de espera só libera o paciente depois de achar um horário livre, para ninguém sair da fila sem agendamento.

    Impacto: Grade das 8h às 18h com 5 status; o encaixe busca vaga em 7 dias, em passos de 30 min

  10. 10

    Portal do paciente

    Dor
    Os contatos com pacientes ficavam espalhados, e quem faz um protocolo integrado segue ao mesmo tempo as prescrições de médico, nutrição e treino.
    Solução
    No Pulso, o paciente confirma ou remarca a próxima consulta em um toque, vê em Meu Protocolo o que fazer hoje com a prescrição de cada especialista, acompanha medidas e metas em Minha Evolução e encontra contrato, parcelas e renovação em Meu Plano.

    Impacto: 9 telas no portal, com tab bar de 5 destinos no celular

  11. 11

    Estoque regulado

    Dor
    O estoque estava na lista de dores da operação, com o risco de fiscalização da vigilância sanitária sobre a quantidade de tirzepatida guardada. Controlar só o “estoque baixo” deixa esse risco passar.
    Solução
    No Pulso, os análogos de GLP-1 têm um teto de estocagem com o motivo registrado, e o status em relação ao teto (dentro, próximo, acima) é separado do status de disponibilidade.

    Impacto: A reposição nunca passa do teto: repõe só o que cabe e avisa quando limitou

  12. 12

    Perfis de acesso

    Dor
    Recepção, médicos, gestão e pacientes usam o mesmo sistema para coisas diferentes, e a operação resumia o cenário atual em “tudo é um lugar diferente”.
    Solução
    No Pulso, há uma entrada só, e cada perfil cai na tela em que o dia dele começa (fila, agenda ou painel). O médico-diretor alterna entre as visões de clínica e de gestão.

    Impacto: 6 perfis; menu, abas e atalhos saem de um mapa, e o que não tem papel fica oculto