Engenharia de funil de conversão
Site em Astro com quiz de diagnóstico, calculadora de ROI e captura protegida.

Construí o site de produção da PsiAtiva em Astro, com quiz de autodiagnóstico e calculadora de ROI, captura protegida e passagem automatizada para o acompanhamento no WhatsApp.
- Função
- Founder & Design Engineer
- Período
- Desde abr. de 2026
- Stack
- TypeScriptTailwind
- Evidência
- No ar
- Stack de produto
- Arquivo de design
O site institucional e funil de captação da PsiAtiva, serviço de aceleração de presença digital para clínicas e consultórios de psicologia no Brasil. Desenvolvido em Astro com arquitetura estática, integra um quiz de diagnóstico clínico, uma calculadora interativa de perda de receita, captura protegida por hCaptcha e transição automatizada para atendimento via WhatsApp.
Negócio próprio fundado e construído por Juan Silva; proprietário, designer e engenheiro são a mesma pessoa. O projeto evidencia competência em estratégia de produto, redação técnica, design focado em conversão e engenharia estática moderna para uma operação real. Por regra estrita do portfólio, é catalogado como prova de capacidade própria, nunca como entrega para clientes ou resultado pago de terceiros.
Engenharia do funil de captação de pacientes

A maior parte dos sites na área da saúde no Brasil padece de graves atritos digitais: temas lentos em WordPress, ausência de dados estruturados locais, formulários sem rastreamento e demora excessiva nas respostas. Para a PsiAtiva, arquitetei um funil de aquisição focado em conduzir psicólogos clínicos do interesse inicial ao autodiagnóstico ativo. Construído sobre Astro 5, TypeScript e Tailwind CSS, o sistema elimina runtimes pesados no cliente enquanto entrega interatividade fluida por meio de ilhas leves em JavaScript nativo.
Ferramentas interativas de diagnóstico: Quiz e calculadora de ROI
Em vez de recorrer a apelos genéricos de 'agende uma conversa', o funil engaja os profissionais através de ferramentas que quantificam vazamentos operacionais específicos antes da solicitação de contato:
- Quiz de Diagnóstico (/quiz) — Avaliação em múltiplas etapas que pontua cinco gargalos clínicos: clareza de posicionamento, perfil no Google Meu Negócio, usabilidade mobile, tempo de resposta e mecanismos de agendamento. O psicólogo recebe um diagnóstico calibrado para a sua realidade (consultório solo ou clínica multidisciplinar).
- Calculadora de ROI (/calculadora) — Modelo interativo executado no navegador que calcula perdas financeiras. Ao inserir o valor médio da sessão, a média mensal de contatos recebidos e as perdas de agendamento, o profissional visualiza com precisão o volume de receita anual que escorre por processos manuais desestruturados.
- Captura Protegida — Formulários blindados com validação anti-spam via hCaptcha, higienização de entradas no cliente e formatação estruturada de dados.
- Passagem Dinâmica para WhatsApp (/obrigado) — Após concluir o quiz ou a calculadora, o lead é direcionado ao WhatsApp com uma mensagem contextualizada pré-preenchida, permitindo um atendimento consultivo e imediato.

O funil não vende serviços; ele diagnostica hemorragias. Ao traduzir conceitos abstratos de marketing em consultas perdidas e prejuízos mensais tangíveis, a interface qualifica o profissional antes mesmo do primeiro contato.

- 100
- pontuação de performance e SEO no Lighthouse
- 0 KB
- de sobrecarga de frameworks no cliente
- 5 áreas
- analisadas no quiz de diagnóstico clínico
- Integral
- autoria em estratégia, design, copy e código
Arquitetura static-first e SEO técnico
Velocidade é uma métrica de empatia na área da saúde. Profissionais buscando soluções de gestão pelo celular abandonam páginas lentas em poucos segundos. Utilizando a geração de sites estáticos do Astro (SSG), o HTML é pré-renderizado no momento do build com CSS crítico inlined. Componentes dinâmicos (a calculadora e o quiz) operam como ilhas nativas isoladas, sem importar os pesados ecossistemas de React ou Vue. A infraestrutura inclui metadados OpenGraph completos, sitemaps XML automáticos e marcação Schema.org (LocalBusiness) para máxima autoridade orgânica.
O que isto não é
- Não é um estudo de caso de cliente ou entrega comercial para terceiros. A PsiAtiva é meu negócio próprio, apresentado aqui exclusivamente como prova de competência estratégica e técnica.
- Não apresenta métricas comerciais não auditadas. Sob as regras do portfólio, nenhuma taxa de conversão, custo de aquisição ou faturamento é mencionado.
- Não é um template pronto de landing page ou tema CMS. Cada seção, modelo de cálculo e fluxo de diagnóstico foi desenvolvido artesanalmente.
- Não é um folheto estático isolado. O funil da interface conecta-se diretamente a automações de qualificação e atendimento no back-end.
A perspectiva do fundador-engenheiro
Desenvolver o motor de captação da própria empresa exige uma responsabilidade que projetos de terceiros raramente impõem. Cada escolha de design, precisão de vocabulário e milissegundo de resposta afeta diretamente a confiança do público. A PsiAtiva comprova minha capacidade de unir visão de negócios, psicologia do usuário, design visual e código robusto em um motor digital eficiente e duradouro.
Evidência
No ar e operando em produção em psiativa.com.br, sustentando o fluxo de aquisição inbound da empresa. Entrega carregamento quase instantâneo e pontuações máximas no Lighthouse em dispositivos móveis e desktop. Nenhuma taxa de conversão, faturamento ou volume de agendamentos é declarada — uma ausência confirmada neste acervo sob princípios estritos de transparência.