Suíte de ultrassom point-of-care e site

Suíte clínica de ultrassom em dezenove módulos sobre tokens em duas camadas.

Site do Celus, suíte de ultrassom point-of-care

Desenhei sozinho um produto clínico de dezenove módulos — um app de apoio à decisão em ultrassom para médicos e seu back-office — sobre um sistema de tokens em duas camadas que resolve em claro, escuro e dois modos de dispositivo, sem aliases quebrados. Depois desenhei e programei o site em Next.js, ligado a um serviço de captura. O produto em si foi construído por um desenvolvedor Bubble.

Função
Sole designer of the whole product — 19 modules across two surfaces — and designer + front-end developer of the landing page
Período
jul. de 2025 – set. de 2025
Stack
TypeScriptTailwindFigma
Evidência
  • Design + código
  • Código
  • Stack de produto
  • Arquivo de design

Ver o build (cópia própria)Código-fonte

Uma suíte clínica de apoio à decisão em ultrassom point-of-care (POCUS) para médicos — transformando protocolos diagnósticos complexos, tabelas de referência biométrica e pontuações de risco em uma ferramenta prática à beira do leito. Dezenove módulos desenhados em duas superfícies (um app clínico de 11 módulos e um back-office administrativo de 8 módulos), estruturados sobre um sistema de tokens em duas camadas, mais a landing page programada em Next.js.

Trabalho de agência na Spaceapps; a relação comercial com o cliente pertencia à agência e eu entreguei como funcionário. A etapa de discovery foi conduzida pelo Thiago, nosso líder técnico, no FigJam e entregue como um quadro pronto. A partir daquele quadro, o design de produto de todos os módulos foi meu, sozinho — e a landing page de marketing foi minha para desenhar e programar.

Visão geral da suíte de ultrassom clínico Celus: aplicativo móvel do médico, tabelas de biometria fetal, calculadora ACR TI-RADS, laudos padronizados e CMS administrativo.
Cinquenta e cinco segundos em loop contínuo — a suíte clínica de 19 módulos, ferramentas à beira do leito, tokens em duas camadas e governança de conteúdo no admin.

Apoio à decisão clínica à beira do leito

O ultrassom point-of-care (POCUS) acontece diretamente à beira do leito do paciente — em prontos-socorros, UTIs e consultórios ambulatoriais. Diferente de exames eletivos de radiologia analisados horas depois em estações de laudo dedicadas, o ultrassom point-of-care é uma extensão imediata e direcionada do exame físico. Um médico segurando o transdutor com uma das mãos não pode navegar em menus hierárquicos complexos, ler parágrafos densos ou fazer contas de cabeça sob pressão. A interface precisa entregar a resposta diagnóstica em poucos segundos.

19
módulos desenhados em duas superfícies
11
módulos clínicos no app do médico
8
módulos de gestão e conteúdo no admin
158
variáveis de design em 5 coleções

A suíte clínica: 11 módulos no ponto de atendimento

O aplicativo do médico (web+responsivo) foi estruturado para colocar referências diagnósticas, motores de cálculo e diretrizes procedimentais ao alcance de um toque, sem fricção cognitiva:

  • Autenticação — Login seguro para médicos, criação de conta e recuperação de senha.
  • Home — Painel clínico focado em agilidade, priorizando calculadoras frequentes, atalhos de protocolos e histórico recente.
  • MEDUltra — Base de referência clínica com filtros avançados e tabelas estruturadas, incluindo padrões de biometria fetal (como percentis de Comprimento Cabeça-Nádega [CCN] no 1º trimestre).
  • CalculUS — Motor interativo de cálculos clínicos, com destaque para a estratificação de risco de nódulos tireoidianos ACR TI-RADS em cinco passos.
  • LaudUS — Modelos padronizados de laudos e ensaios pictóricos de achados ecográficos (como endometriose de parede abdominal), organizados por especialidade.
  • ResumUS — Sínteses de literatura médica e resumos de evidências para consulta rápida à beira do leito.
  • ProtocolUS — Protocolos procedimentais passo a passo (como a avaliação ultrassonográfica de transplante renal no pós-operatório), com tags por especialidade médica.
  • Perfil — Credenciais médicas, CRM e preferências de conta.
  • Salvos — Repositório dedicado para protocolos e tabelas salvos para acesso rápido e offline.
  • Favoritos — Acesso direto e em um clique às calculadoras e escores de maior uso no plantão.
  • Últimas lidas — Linha do tempo com o histórico recente de protocolos e artigos consultados.

Traduzindo o ACR TI-RADS em um fluxo clínico interativo

A descrição do repositório resumia o Celus como uma calculadora de nódulos tireoidianos, o que reduz drasticamente o escopo do produto, mas evidencia seu módulo de maior exigência técnica. O ACR TI-RADS (Thyroid Imaging Reporting and Data System do American College of Radiology) padroniza a avaliação ultrassonográfica para determinar se um nódulo na tireoide deve ser submetido à punção aspirativa por agulha fina (PAAF) ou acompanhado por ultrassom de rotina.

Na literatura médica, o ACR TI-RADS se apresenta como uma grade densa distribuída em cinco categorias morfológicas: Composição (0–2 pts), Ecogenicidade (0–3 pts), Forma (0–3 pts), Margem (0–3 pts) e Focos Ecogênicos (0–3 pts). Os médicos somam os pontos de cada categoria para classificar o nódulo de TR1 (benigno) a TR5 (alta suspeita de malignidade). A soma dos pontos, combinada ao maior diâmetro do nódulo, define a conduta clínica recomendada.

Desenhar o CalculUS exigiu transformar essa lógica tabular em um stepper interativo de 5 etapas (CalculUS-step1 até CalculUS-step5-2). Cada etapa exibe opções morfológicas mutualmente exclusivas com ilustrações claras dos achados ultrassonográficos. Conforme o médico seleciona as características, a pontuação acumula em tempo real. Ao final, a tela de resultado entrega o nível TR, a porcentagem de risco de malignidade e a conduta recomendada (critério de biópsia por PAAF vs acompanhamento por ultrassom vs nenhuma intervenção necessária), eliminando consultas manuais a tabelas estáticas de diretrizes.

Motor de cálculo ACR TI-RADS em 5 etapas: composição, ecogenicidade, forma, margens e focos ecogênicos acumulando pontuação até o limiar de biópsia TR4.
Quinze segundos em loop contínuo — o stepper de estratificação de risco ACR TI-RADS acumulando pontos em tempo real até a conduta clínica recomendada.

O back-office: Gestão de conteúdo clínico sem dependência de deploys

Diretrizes médicas, protocolos de conduta e modelos de laudo não são funcionalidades de software estáticas; eles evoluem conforme novas pesquisas e consensos de sociedades médicas são publicados. Se atualizar um protocolo de transplante ou revisar um modelo de laudo exigisse abrir chamados de engenharia e subir novas versões de código, a plataforma perderia sua utilidade clínica.

O back-office administrativo de 8 módulos (Admin) foi desenhado para conceder autonomia à equipe médica gestora. Além de gerenciar acessos de profissionais e acompanhar métricas de invocação das calculadoras, o coração do painel é o CMS dedicado às três frentes de conteúdo: LaudUS CMS, ResumUS CMS e ProtocolUS CMS. Editores médicos podiam redigir, revisar, categorizar e publicar diretrizes atualizadas diretamente para a ponta clínica.

Back-office administrativo do Celus: suíte de 8 módulos para governança do conhecimento médico, editor rico de protocolos, marcação de especialidades e telemetria de uso.
Doze segundos em loop contínuo — o painel administrativo que permite aos médicos gestores atualizar protocolos e laudos sem necessidade de deploys de código.

Design system de produção: 158 variáveis e tokens em duas camadas

O Celus foi estruturado sobre o arquivo starter da Spaceapps, que tinha como base um template do curso DesignBoost com uma escala de cinzas neutras da Untitled UI. Minha contribuição foi transformar um template acadêmico em uma arquitetura de variáveis pronta para produção, que a agência adotou posteriormente em todos os seus projetos de clientes:

  • 0. Primitives — Metadados de base da agência e primitivas específicas de tabelas (MEDUltra/tabela, Salvos/MEDUltra).
  • 1. Colors — 112 variáveis primitivas de cor definindo a escala verde da marca (Main/Primary/400 = #35b48b, Main/Primary/600 = #108b6a), neutros e escalas de transparência alpha.
  • 2. Semantic — 36 tokens semânticos (Background/*, Text/*, Stroke/*, Button/*, Logo/*) mapeados diretamente nas primitivas, resolvendo em modo Claro e Escuro sem nenhum alias quebrado.
  • 3. Typography — Família Inter para títulos e corpo de texto, garantindo legibilidade imediata em telas de alta densidade.
  • 4. Dimensions — Modos responsivos para Laptop (1280×700) e Mobile (360×630) com grids de layout alinhados.

A superfície de marketing e captura de formulário

Enquanto o aplicativo médico rodava em Bubble, a landing page institucional era minha para desenhar e programar em Next.js 14 com App Router (zokuWebDesign/Celus). A página apresentava as ferramentas clínicas, demonstrações interativas da calculadora, planos de assinatura, depoimentos de médicos, badges para download na App Store e Google Play, e captura de contato.

O formulário de contato se conectava a um microserviço em Express de 86 linhas (server/server.js) hospedado no Render, expondo as rotas POST /newsletter e GET /health. Trata-se de uma captura simples de leads, e não de engenharia de backend clínico — vale nomear com precisão: captura de formulário institucional, não prontuário eletrônico.

Handoff ajustado a quem construiu

O desenvolvedor Bubble trabalhou direto no Dev Mode do Figma, na estrutura de auto-layout e no inspetor de tokens, e pediu para dispensar um documento de handoff separado; por isso, não o produzi.

O que isto não é

  • Não é a minha construção do aplicativo clínico. Eu desenhei 100% da interface dos 19 módulos; um desenvolvedor Bubble construiu a aplicação, calculadoras e banco administrativo.
  • Não é a minha discovery. O Thiago, líder técnico, realizou o workshop de pesquisa no FigJam com os stakeholders e me entregou o quadro pronto.
  • Não é um design system inventado do zero. Herdei um template de curso com escala da Untitled UI, estruturei com auto-layout, organizei tokens em duas camadas com modos Claro/Escuro e tornei-o o padrão de produção da agência.
  • Não é um backend médico ou integração de API clínica. O repositório Next.js é uma landing page de marketing conectada a um serviço Express de 86 linhas no Render para captura de e-mails.
  • Não é apenas uma calculadora de tireoide. O motor ACR TI-RADS é um dos módulos de cálculo dentro do CalculUS, que é 1 de 11 módulos do aplicativo clínico.
  • Não possui métricas quantitativas de conversão ou engajamento clínico. O produto foi entregue e operou com médicos reais, mas nenhuma métrica numérica foi registrada antes de o serviço expirar — uma ausência confirmada neste portfólio.
  • Não está mais no ar no domínio original do cliente. A hospedagem da agência expirou e salus-celus.com.br não responde mais; o mirror em domínio próprio e o arquivo no Wayback Machine são as evidências preservadas.

Rigor clínico como disciplina de design

Projetar para a área da saúde impõe um rigor que produtos de consumo raramente exigem: a ambiguidade é um risco à segurança do paciente. Uma pontuação mal interpretada, um limiar de corte confuso ou uma tabela biométrica de difícil localização afetam diretamente a decisão médica. O Celus comprova a capacidade de assimilar literatura técnica densa, traduzir diretrizes clínicas em interfaces intuitivas e entregar sistemas de tokens consistentes que a engenharia consegue reproduzir sem ruídos.

Evidência

O produto foi entregue e chegou a operar em produção com médicos reais antes de a hospedagem da agência expirar. O domínio original do cliente (salus-celus.com.br) está fora do ar e nunca foi arquivado, tornando o mirror no meu próprio domínio e seu registro no Wayback Machine as únicas provas sobreviventes da landing page que programei. A aplicação em si foi construída em Bubble por outro desenvolvedor, evidenciando o meu design de produto e não a minha engenharia. Não existem métricas quantitativas de conversão ou engajamento clínico — uma ausência confirmada neste portfólio, e não uma falta de coleta.