Clinicians are drowning in data. We built the lifeboat.
Healthcare professionals — especially those in functional medicine, longevity, and integrative care — spend hours manually reviewing fragmented medical records. Lab results arrive as PDFs from different labs. Genetic reports come from separate services. Diagnostic records are scattered across providers.
N1 Healthcare is an AI-powered clinical intelligence platform that transforms this chaos into clarity. Clinicians upload medical records, and the AI extracts structured data — biomarkers, diagnoses, procedures, medications, genetic markers. From this, it generates Comprehensive Health Reports (CHRs) — detailed, editable summaries that doctors review before sharing with patients.
The core philosophy: Augmenting, not automating, clinical insight. Doctors remain at the center of care. The AI supports their expertise — it never replaces it. Every output is editable, every report is reviewable.
The Value Chain
Upload
Medical records (PDF/Image)
AI Extract
Biomarkers, diagnoses, genetics
Review
Clinician edits & approves
Generate
Comprehensive Health Report
Share
Reviewed report to patient
Who It's For
| Specialty | How They Use N1 |
|---|---|
| Functional Medicine | Multi-system analysis across labs, genetics, and lifestyle factors |
| Longevity & Concierge | Biomarker optimization, preventive strategies, longitudinal tracking |
| Integrative Care | Holistic patient views combining conventional and alternative data |
| General Practitioners | Structured extraction from complex patient records |
| Specialists | Pattern recognition across years of fragmented data |
The Gap We Fill
Traditional EMRs store data but don't extract insights. Generic AI tools lack clinical context. Patient-facing apps aren't built for clinical workflows. Full automation platforms remove clinician judgment. N1 sits in the sweet spot: intelligent enough to extract and organize, transparent enough to let clinicians control every output.
The Figma Era: Building a healthcare design language from scratch.
When I joined in September 2025, the platform existed as an early concept. My job was to translate a complex clinical workflow into an interface that felt simple — without oversimplifying the medicine behind it.
The first four months were pure Figma. I was designing every screen of a 10-module platform, building a component library, and learning healthcare terminology I'd never encountered before. Terms like ICD-10, CPT codes, SNP analysis, and pharmacogenomics became part of my daily vocabulary.
Design System Foundations
I established two distinct visual systems — one for the platform interface and another for the clinical reports that get shared with patients.
Platform Interface
- Primary: Teal #1B6971
- Font: Inter
- White backgrounds, clean cards
- Interactive, data-dense layouts
- 8 spacing tokens (4px–32px)
CHR Medical Reports
- Primary: Navy #1B4965
- Font: Segoe UI
- Print-optimized layouts
- Narrative-driven, patient-readable
- WCAG AAA contrast targets
Component Library
I designed and documented a comprehensive component library covering every interaction pattern the platform needed:
48 Button Variants
Size × Type × Danger × State combinations
63 Custom Icons
Sidebar navigation + general-purpose SVGs
5 Input States
Default, focus, error, disabled, success
4 Toast Variants
Success, error, warning, info notifications
Tables
Expandable rows, sticky headers, status badges
Modals & Tooltips
520px/640px modals, 4-position tooltips
10 modules. One coherent clinical experience.
Every screen operates within a patient context — clinicians select a patient from the header, and all data relates to that patient. The sidebar organizes features by clinical workflow: Patient → Clinical Data → Reports → Treatment.
Medical Records
Upload PDFs/images (up to 25MB), AI extracts structured data through a 5-stage pipeline. 6-screen upload modal.
Biomarkers
Track health indicators over time with charts, reference ranges, and abnormal value alerts. Filter by sample source.
Diagnosis
ICD-10 mapped diagnoses with Active/Resolved/Chronic status tracking. Linked to source records.
Procedures
CPT code mapping, provider/facility tracking, clinical outcomes, and procedure history.
Genetics
SNP analysis, pharmacogenomics, carrier status, and cardiovascular/methylation risk assessment.
Medications
Prescription drugs, supplements, dosage schedules, interaction detection, and medication history.
CHR Reports
The flagship feature. AI-generated, fully editable health reports with a 28-parameter quality checklist.
Patient Management
Multi-patient context switching, doctor-patient associations, isolated data per patient.
Billing & Credits
Stripe-powered credit system, auto top-up, transaction history, and invoice generation.
Onboarding
13-step interactive platform tour, email verification, billing setup, and first report generation.
Flagship Feature: Comprehensive Health Reports
The CHR is the crown jewel of N1. It combines biomarker data, diagnostic history, genetic risk factors, and lifestyle context into a narrative that both clinicians and patients can understand.
Every CHR passes a 28-parameter quality checklist across 7 categories: Data Accuracy (7 checks), Visual & Layout (5), Content Structure (6), Personalization (4), Compliance & Safety (3), Edge Cases (1), and Branding & PDF Quality (2).
Medical Records: The Upload Experience
I designed a 6-screen upload flow that guides clinicians from an empty state through file selection, upload progress, AI analysis, and completion. The processing pipeline has 5 visible stages — Preparing → Parsing Info → Grouping → Storing → Complete — giving clinicians transparency into what the AI is doing with their documents.
Biomarker Tracking: Making Data Visual
The biomarker module was one of the most design-intensive features. Clinicians need to see trends over time, compare values against normal ranges, and quickly identify abnormalities. I designed sparkline previews, expandable chart cards, sample source filtering, and color-coded reference range indicators.
Enter Claude Code: When a designer learned to ship.
In January 2026, everything changed. The team decided to move from Bubble (no-code) to React, and every team member would use Claude Code — an AI coding assistant — to become a generalist. Including me, the designer.
I'd never used a terminal before. I didn't know what Git was. I couldn't write a single line of JavaScript. But I sat down, opened Claude Code, and typed my first command. Within three days, I was running full workflows with multiple MCP connections and managing 6 documentation files.
The Learning Curve
Terminal basics & first setup
Learned what a terminal is. Set up Claude Code. Connected Figma MCP. Created keyboard shortcuts. Customized my theme.
File management & permissions
Learned Claude can organize files and folders. Understood permissions. Built my documentation system.
Full workflow running
Connected ClickUp MCP. Running multi-MCP workflows. 11 markdown documentation files. Task tracking automated.
CHR review & quality process
Created structured review checklists. Understanding the 28-parameter quality framework. Contributing to sprint planning.
First GitHub repo & deployment
Created my first repository (LinkedIn templates tool). Deployed to Vercel. Live tool at a URL. Auto-deploy from GitHub.
Competitor analysis & data viz
Analyzed 8 health platforms. Built interactive SVG chart prototypes. Created documentation for project context.
Pure CSS/SVG charts & design experiments
Built gauge charts, line charts, donut charts — all without JavaScript libraries. Started CHR design experiments. First GitHub PR to org repo.
What I actually built with AI.
Vibe coding isn't about replacing design thinking — it's about extending design execution. Instead of handing off a Figma file and waiting, I could describe my design intent and see production-quality code within minutes. Then iterate. Then ship.
Here's everything I designed and coded:
Brand System
9 documentation files covering 86 colors, full design tokens, typography scales, spacing systems, and brand guidelines. All created and maintained via Claude Code.
Platform Docs
26 markdown files across 5 sections, 3 GitHub PRs merged. Product summary, feature specs, domain glossary, architecture docs.
CHR Experiments
8 visual design experiments — Professional, Claymorphism, Dark Dashboard, Glassmorphism, Minimal Clinical, Card Grid, Sidebar Nav, High Contrast WCAG AAA.
Chart Library
45 chart types across 2 HTML prototypes. V1 with pure CSS/SVG. V2 with ApexCharts. Gauge charts, sparklines, heatmaps, radar, and more.
Graph Visibility
Full feature design: research → 8 competitor analysis → 4 wireframe approaches → 3 interactive prototypes → final sidebar split-view.
Marketing Site
7 concept variants built with Next.js, Framer Motion, and Lenis smooth scroll. Deployed to Vercel. 104 AI-generated images.
Platform Guide
17-step onboarding sidebar. 4 desktop design versions + 2 mobile versions. Shepherded from concept to implementation spec.
Logo Redesign
24 logo variations generated via AI (Gemini Imagen 3). Explored lettermarks, wordmarks, and symbol combinations.
Deep Dive: CHR Design Experiments
The Comprehensive Health Report is the product's flagship output — the thing patients actually see. I created 8 distinct visual directions to explore what a clinical report could look like beyond the standard boring PDF.
Each experiment was a fully functional HTML/CSS page — not a static Figma frame. I could share a link, the team could interact with it, scroll through data, and give feedback on a living prototype.
Deep Dive: Graph Visibility Feature
The biomarker section needed better data visualization. I led the full design process:
- Research: Analyzed 8 health platforms (InsideTracker, Levels, WHOOP, Oura, Function Health, Nutrisense, Cronometer, Welltory)
- Documented findings: 46,000+ word research document identifying common patterns across platforms
- Wireframes: 4 distinct approaches — sparkline cards, sidebar panel, dedicated page, inline expand
- Prototypes: 3 interactive HTML/CSS prototypes with real data, hover interactions, time range filtering
- Final direction: Sidebar split-view — list on left, chart detail on right
Deep Dive: Marketing Website
I designed and built the n1.care marketing website — 7 different concept variants — using Next.js, Framer Motion animations, and Lenis smooth scroll. I generated 104 images using Gemini Imagen 3 for the website content.
86 colors. 48 button variants. Two visual languages.
The N1 design system had to serve two very different contexts: an interactive web platform where clinicians manage data, and a static PDF report that patients read. Each required its own visual language, but they needed to feel like they came from the same brand.
Color System
86 documented colors across primary teal (10 shades), neutral slate (10 shades), semantic colors (success, error, warning, info — each with light/dark variants), and CHR-specific navy palette.
Typography
Inter for the platform. Segoe UI for reports. Display sizes from 72px down to 12px caption. Weights: Regular (400), Medium (500), Semibold (600), Bold (700).
Spacing & Radius
8-token spacing scale (4px–32px). 3-tier border radius (4px badges, 8px buttons, 12px modals). Consistent across every component.
Components
22 component categories: Buttons (48 variants), Icons (63), Inputs (5 states), Toasts (4), Sidebar (open/closed), Modals, Tooltips, Tables, Tabs, Accordions.
How the workflow evolved.
Before — Traditional
- Design in Figma
- Write spec handoff docs
- Developer interprets & builds
- QA finds inconsistencies
- Iterate through Jira tickets
- Days to see results
After — Vibe Coding
- Design in Figma
- Describe intent to Claude Code
- Review generated code
- Iterate in real-time
- Ship working prototype same day
- Minutes to see results
The key insight: AI amplifies capability — it doesn't replace taste. I still made every design decision. Claude Code just removed the barrier between "I know what this should look like" and "I can make it real."
What Changed, What Didn't
| What Changed | What Stayed the Same |
|---|---|
| Speed of prototyping (days → hours) | Figma as the design source of truth |
| Designer shipping code directly | Design review with the team |
| Documentation-driven development | Sprint-based workflow (2-week cycles) |
| GitHub PRs from a designer | Clinician-first design decisions |
| AI-generated image assets | Brand consistency and taste |
My Learning Approach
I'm a kinesthetic learner — I learn by doing, not reading. Before AI, my process was: watch YouTube → practice → experiment. After AI, it became: jump in → ask AI → learn as you go. Claude Code didn't change that I learn by doing — it removed the passive watching step.
The numbers behind the work.
The Broader Impact
- Documentation became a design superpower — 50+ files meant any team member could pick up context instantly. Claude Code could regain full project context from my documentation alone.
- Prototyping speed increased dramatically — Interactive HTML prototypes replaced static Figma frames for stakeholder reviews. Feedback loops shortened from days to hours.
- Design-to-code gap closed — As a designer shipping code, I could ensure pixel-perfect implementation of my own designs. No more "that's not what the mockup shows."
- The team adopted the model — The documentation-driven, AI-assisted workflow became the standard. Everyone became a generalist using Claude Code, with a 20-hour weekly cap.
What this project taught me.
- Healthcare UX demands control-first thinking. Every design decision was filtered through one question: does the clinician stay in control? This shaped everything from edit buttons on AI outputs to the 28-parameter QA checklist on reports.
- Documentation is a design deliverable. In a remote, AI-assisted team, your documentation IS your handoff. I wrote 50+ files that anyone — human or AI — could use to understand the product deeply.
- Vibe coding is a design superpower. Not because it replaces design skills, but because it removes the friction between "I know what this should look like" and "I can make it exist." The bottleneck moved from execution to taste — which is exactly where designers win.
- Leaning into discomfort is a strategy. I chose to embrace a tool I didn't understand, a codebase I couldn't read, and a workflow that was completely foreign. The result wasn't becoming a developer — it was becoming a more capable designer.
The most valuable thing about N1 Healthcare wasn't any single screen or feature — it was proving that a self-taught designer, armed with AI, can ship an entire clinical intelligence platform without writing code from scratch. The future of design isn't just about making things look good. It's about making things real.