Point-of-Care Ultrasound Suite & Marketing Site

Point-of-care ultrasound (POCUS) clinical decision-support suite for medical practitioners — bridging diagnostic protocols, biometry reference tables, and multi-step risk scoring into a high-utility bedside tool. Nineteen modules designed across two surfaces (an 11-module clinical app and an 8-module administrative back office), built on a two-layer design token system, plus the marketing landing page coded in Next.js.

Agency employment at Spaceapps; the commercial client relationship belonged to the agency and I delivered as staff. The discovery workshop was run by Thiago, our tech lead, in FigJam and handed to me as a completed board. From that board onward, the product design across every module was mine alone — and the marketing landing page was mine to design and build.

Clinical decision support at the bedside

Point-of-care ultrasound (POCUS) happens directly at the patient's bedside in emergency rooms, intensive care units, and outpatient practices. Unlike elective radiology exams reviewed hours later at a diagnostic workstation, bedside ultrasound is an immediate, goal-directed physical examination tool. A clinician holding a transducer in one hand cannot navigate deep hierarchical menus, squint at crowded prose, or perform complex mental arithmetic under pressure. The interface must deliver definitive guidance in seconds.

🩺19

modules designed across two surfaces

📱11

bedside modules in the clinician app

💻8

content and governance modules in admin

🎨158

design tokens across 5 collections

The clinical suite: 11 modules at the point of care

The practitioner app (web+responsivo) is structured to place reference standards, calculation engines, and procedural guidance within thumb reach without cognitive overhead:

• Autenticação — Secure clinical practitioner sign-in, account creation, and password recovery.
• Home — High-urgency bedside dashboard prioritizing active calculations, high-frequency protocol shortcuts, and recent clinical history.
• MEDUltra — Clinical reference database with multi-parameter filtering and structured tables, including fetal biometry standards (such as 1st trimester Crown-Rump Length / Comprimento Cabeça-Nádega [CCN] percentiles).
• CalculUS — Interactive multi-step clinical calculation engine, leading with ACR TI-RADS thyroid nodule risk stratification across five diagnostic criteria.
• LaudUS — Standardized ultrasound reporting templates and pictorial ultrasound guides (e.g. abdominal wall endometriosis) indexed by medical specialty tags.
• ResumUS — Curated evidence digests and literature summaries translating dense studies into rapid bedside reference cards.
• ProtocolUS — Step-by-step procedural guidelines (e.g. first-line post-operative renal transplant ultrasound imaging protocol) tagged by specialty.
• Perfil — Practitioner credentials, medical registry records, and system preferences.
• Salvos — Dedicated offline-capable repository for bookmarked clinical guidelines and reference charts.
• Favoritos — One-tap shortcuts for frequently referenced clinical scoring tools and calculators.
• Últimas lidas — Chronological history of recently consulted clinical protocols and articles.

Translating ACR TI-RADS into an interactive clinical workflow

The repository description summarized Celus as a thyroid nodule calculator, which drastically understates the product while highlighting its most technically demanding clinical module. The American College of Radiology Thyroid Imaging Reporting and Data System (ACR TI-RADS) standardizes ultrasound evaluation to determine whether a nodule warrants fine-needle aspiration (FNA / PAAF) biopsy or routine surveillance.

In medical literature, ACR TI-RADS is presented as a dense scoring grid across five categories: Composition (0–2 pts), Echogenicity (0–3 pts), Shape (0–3 pts), Margin (0–3 pts), and Echogenic Foci (0–3 pts). Clinicians sum the points to classify the nodule from TR1 (benign) to TR5 (high suspicion of malignancy). The point total combined with maximum nodule diameter dictates the clinical action threshold.

Designing CalculUS required translating that tabular scoring logic into a tactile 5-step stepper (CalculUS-step1 through CalculUS-step5-2). Each step presents mutually exclusive morphological choices with explicit ultrasound feature illustrations. As the clinician selects findings, the point tally recalculates dynamically. Upon completion, the result screen presents the TR tier, malignancy risk percentage, and actionable threshold criteria (biopsy recommended vs follow-up ultrasound vs no further testing) without requiring the physician to cross-reference static textbook charts.

The back office: Governing medical knowledge without code deployments

Medical guidelines, reporting standards, and literature summaries are not static software features; they evolve continuously as clinical societies publish new consensuses. If updating a post-op transplant protocol or modifying a diagnostic report template requires engineering tickets and code releases, a clinical platform stagnates.

The 8-module administrative back-office (Admin) was designed to give clinical editors direct operational control. Beyond user credentialing and analytics tracking calculator invocation frequency, the core of the admin suite is dedicated content management across the three primary clinical knowledge types: LaudUS CMS, ResumUS CMS, and ProtocolUS CMS. Medical leads could draft, peer-review, tag, and publish updated imaging protocols and report templates directly to clinicians' devices.

Production-grade token architecture: 158 variables and two-tier aliasing

Celus sits on Spaceapps' design-system starter file, which originated from a DesignBoost course template with an Untitled UI neutral gray ramp. My contribution was transforming an academic template into a production-grade variable architecture that the agency subsequently adopted across all client projects:

• 0. Primitives — Spaceapps starter metadata plus project-specific table primitives (MEDUltra/tabela, Salvos/MEDUltra).
• 1. Colors — 112 primitive color variables defining the brand green spectrum (Main/Primary/400 = #35b48b, Main/Primary/600 = #108b6a), semantic neutral ramps, and transparency alphas.
• 2. Semantic — 36 semantic tokens (Background/*, Text/*, Stroke/*, Button/*, Logo/*) mapped directly into primitives, resolving across both Light and Dark modes with zero broken aliases.
• 3. Typography — Inter font family for both headings and body copy, optimized for clinical legibility on high-DPI displays.
• 4. Dimensions — Responsive viewport modes for Laptop (1280×700) and Mobile (360×630) with synchronized layout grids.

The marketing surface and form capture

While the clinical app lived in Bubble, the marketing landing page was mine to design and code in Next.js 14 App Router (zokuWebDesign/Celus). The page showcased the clinical modules, interactive calculator previews, subscription tiers, practitioner testimonials, App Store / Google Play badges, and a contact capture section.

The contact form connects to an 86-line Express microservice (server/server.js) deployed on Render, exposing POST /newsletter and GET /health. This was straightforward form ingestion rather than clinical backend engineering, and it is worth naming honestly: marketing capture, not patient health records.

Developer handoff, fitted to the builder

The Bubble developer worked straight from Figma's dev mode, auto-layout structure and token inspector, and asked to skip a separate handoff document, so I didn't build one.

What this is not

• Not my build of the clinical application. I designed 100% of the UI across 19 modules; a Bubble developer built the app, calculators, and back office.
• Not my discovery workshop. Thiago, our tech lead, conducted the FigJam research sessions with stakeholders and handed me the board.
• Not a design system invented from scratch. I inherited a course template with an Untitled UI gray ramp, restructured it with auto-layout and a two-tier token architecture, and productionized it for agency-wide reuse.
• Not a medical backend or API integration. The Next.js repository holds a marketing landing page wired to an 86-line Express form-capture service on Render.
• Not just an ACR TI-RADS calculator. The thyroid risk calculator is one calculation engine inside CalculUS, which is one of eleven modules in the bedside app.
• Not backed by clinical conversion or adoption metrics. The project shipped and was used by real clinicians, but no quantitative metrics exist — a confirmed absence across this portfolio.
• Not currently live at the client's original domain. Spaceapps' hosting lapsed and salus-celus.com.br is gone; the self-hosted mirror and Wayback snapshot are the surviving records.

Clinical rigour as a design discipline

Designing for healthcare enforces a discipline that consumer software rarely demands: ambiguity is an unacceptable failure mode. A misread score, an unclear threshold, or a misplaced biometry chart directly impairs clinical judgment. Celus demonstrates the ability to assimilate dense medical guidelines, translate algorithmic scoring systems into intuitive interfaces, and deliver production-ready token systems that engineers can implement with precision.

Evidence

The product was delivered and went live with real medical practitioners before the agency's hosting lapsed. The original domain (salus-celus.com.br) is dead and was never archived, making the self-hosted mirror on my domain and its Wayback Machine snapshot the only surviving proof of the coded landing page. Another developer built the application itself using Bubble, evidencing my product design rather than my engineering. No quantitative clinical conversion or engagement metrics exist — a confirmed absence across this corpus, not an uncollected one.