Kardia
Design System
Architecting a unified design language for heart health, bridging the gap between medical precision and human-centric interaction.
- Role
- Lead Design Engineer
- Timeline
- 24 Months
- Impact
- Global Scalability
The Problem
Fragmented design systems across mobile platforms were creating friction for developers and a disjointed experience for users.
Inconsistent UI patterns across iOS and Android left teams rebuilding the same components in isolation.
Slow development velocity due to lack of reusable, documented components shared between squads.
Accessibility gaps affecting medical compliance and excluding users with visual or motor impairments.
"We needed a single source of truth that could scale with our product while maintaining the precision required for medical grade hardware."
Product Design Lead
Approach
Research
Audited existing components across iOS and Android codebases, mapped fragmented patterns, and ran stakeholder interviews to surface pain points and alignment gaps.
Systemize
Created foundational design tokens — spacing, color, typography, radius — then built a modular component library in Figma with documented usage rules and variant logic.
Implement
Shipped React Native components with TypeScript for full type-safety, wired design tokens to code via Style Dictionary, and established a contribution workflow for ongoing team adoption.
Design Principles
Accessibility First
Every component meets WCAG 2.1 AA standards. Healthcare applications demand absolute clarity and inclusive design — there is no room for ambiguity when a user is reading their heart data.
Precision
Mathematical rhythm and consistent grids lead to predictable experiences that build user trust in medical data. Every spacing value, type scale, and touch target is deliberate and documented.
Token-Driven
Design decisions live in tokens, not component code. This keeps Figma and production in sync and allows theming — dark mode, high contrast, future brand variants — without touching component logic.
Contributor-Friendly
Clear documentation, naming conventions, and a contribution checklist mean any engineer or designer can extend the system without breaking existing patterns or introducing inconsistency.
Library
A comprehensive suite of React Native and Figma components built for scalability and medical-grade reliability. Every component ships with usage docs, accessibility notes, and Storybook stories — so engineers can ship confidently and designers can prototype at full fidelity.
Impact
Faster Dev
Consistency
Features Shipped
WCAG Level
For Designers
Reduced design debt by 70% and cut prototyping time significantly with synced design-to-code tokens. Designers went from rebuilding components each sprint to composing screens from a shared Figma library that matched production exactly.
For Developers
Achieved a 40% reduction in component code duplication across mobile apps with zero accessibility regression. TypeScript types and Storybook stories eliminated entire categories of implementation questions at code review.
For the Product
Shipped 60+ features in the system's lifetime without breaking existing surfaces. Enabled confident expansion to new form factors — tablet, watch, web — because the token layer abstracted platform differences cleanly.