NEUTRON DESIGN SYSTEM
category:
UX Design
services:
Design
Tools Used:
Figma
Role:
UX Design Lead
Case Study: Neutron Design System
HCA Healthcare, U.S.A
The Neutron Design System was architected to unify HCA Healthcare’s vast digital ecosystem. By establishing a single source of truth for design assets and code components, we streamlined the product development lifecycle. The system was successfully adopted by 15+ product teams, significantly reducing technical debt and accelerating the design-to-development handoff.
The Challenge
Fragmentation at Scale For a healthcare giant like HCA Healthcare, consistency isn’t just aesthetic—it’s operational. With dozens of digital products being developed simultaneously, the organization faced a critical challenge: fragmented user experiences and mounting technical debt. Product teams were reinventing the wheel for basic components, leading to slower deployment times and inconsistent clinical workflows. We needed a unified language to bridge the gap between design and engineering across the enterprise.
The Process
We followed the Core Steps for Creating a UX Design System to ensure Neutron was scalable, accessible, and adoptable.
Step 1
Step 2
Step 3
Step 4
Step 5
Visual Audit & Inventory
We conducted a comprehensive audit of the existing 15+ flagship applications. We took screenshots, categorized elements, and identified the most frequent inconsistencies.
- Finding: We found over 40 variations of the primary “Submit” button and 12 different styles of data tables.
Defining Design Principles
Before drawing pixels, we established guiding principles to align the team:
- Clinical Utility: Clarity and data density take precedence over decoration.
- Accessibility First: All components must meet WCAG 2.1 AA standards (crucial for healthcare).
- Efficiency: The system must speed up workflows, not slow them down.
Establishing Foundations (The "Sub-Atomic" Level)
We built the visual language in Figma using Design Tokens. This allowed us to update values in one place and see them propagate everywhere.
- Typography: A robust type scale optimized for data-heavy dashboards.
- Color Palette: A semantic color system (e.g.,
Status/Criticalinstead of justRed-500) to ensure consistent meaning. - Spacing: A 4px/8px grid system to ensure alignment rhythm.
Component Creation (Figma Architecture)
Using Atomic Design methodology, I built a brand new Figma library.
- Modern Figma Features: Utilized Auto Layout, Component Properties (Booleans, Swaps), and Variants to keep the library lightweight but flexible.
- Interactive Components: Created high-fidelity prototypes within the system to demonstrate hover, active, and disabled states to developers.
- Pattern Library: Combined atoms (buttons, inputs) into molecules (search bars) and organisms (patient data headers).
Documentation & Handof
A design system is only as good as its documentation.
Usage Guidelines: Detailed “Do’s and Don’ts” for every component.
Spec Sheets: Clear red-lining for developers regarding padding, margins, and token mapping.
Governance Model: Established a contribution process for how new components are requested and added to Neutron.
The Solution: Neutron
A Single Source of Truth I led the architecture and strategy for Neutron, a comprehensive design system built to serve as the single source of truth for HCA’s digital ecosystem. Moving beyond a simple sticker sheet, we treated the design system as a product in itself.
- Atomic Architecture: We established a library of reusable, accessible components that align with strict healthcare compliance standards.
- Cross-Functional Governance: I facilitated alignment between engineering leads and design teams to ensure code-parity (React/CSS) for every design token.
- Documentation & Onboarding: We built a centralized documentation hub that democratized access to guidelines, reducing the onboarding time for new designers and developers.
Results & Impact
Acceleration & Reliability The adoption of Neutron transformed the product development lifecycle. By decoupling design decisions from execution, we achieved:
- Widespread Adoption: Successfully integrated across 15+ active product teams, creating a unified look and feel for clinical and operational tools.
- Speed to Market: Drastically reduced development time for new features by enabling teams to assemble interfaces rather than build from scratch.
- Reduced Risk: Minimized UI-related errors in mission-critical applications by standardizing interaction patterns.
Conclusion
Creating the Neutron Design System was not just about organizing Figma files; it was about organizing people and processes. By treating the design system as a product in itself, we moved HCA Healthcare from a fragmented design approach to a cohesive, efficient, and scalable product development lifecycle.
