03 — Health · 2024
Lumina
Healthcare SaaS spanning a patient portal and clinician workspace—WCAG-conscious UI, HIPAA-aware patterns, and a token-based system both squads could ship from.
Role
Full-stack engineer (design systems)
Timeline
14 weeks
Team
Clinical advisor, 2 designers, 4 engineers
Status
In production
Mobile task completion
+34%
Accessibility issues (audit)
47 → 6
Design–dev handoff time
−50%
Clinician daily active use
92%
The problem
Two legacy apps diverged in UX and accessibility. Clinicians retyped patient context; patients abandoned flows on mobile.
The solution
Unified routes under one app shell, shared form and table primitives, and session handling that respected role boundaries and timeout policies.
What I owned
- Co-led design system in code (tokens, components, docs)
- Implemented patient booking and results flows
- Built clinician queues with role-scoped data access
- Pair-reviewed security-sensitive endpoints and audit logs
Stack
- Next.js
- TypeScript
- React Query
- Tailwind CSS
- Storybook
- Node.js
- PostgreSQL
- Auth0
Engineering highlights
- 01
Accessible by default
Focus order, live regions, and contrast-checked tokens baked into primitives—not patched per screen.
- 02
Role-aware shell
One deployment with route guards and feature flags per persona; reduced duplicate code paths.
- 03
Documented system
Storybook with usage notes and do/don’t examples—designers and engineers shipped consistently.
How we shipped it
- 01
Research
Interviews with nurses and patients; consolidated journey maps and non-negotiable compliance constraints.
- 02
System sprint
Tokens, typography, forms, tables, and empty states. Published contribution guidelines.
- 03
Feature delivery
Portal and clinician tools in vertical slices with shared QA checklists for a11y and PHI handling.
- 04
Rollout
Phased migration per clinic, training decks, and hypercare week with product + support.