Designing a System That Scales
Building a unified design foundation across products, teams, and code.
Role
Senior Product Designer (Design System Lead)
Industry
Healthcare Service
Scope
Org-wide infrastructure supporting 8 apps
The Challenge: Systemic Fragmentation
As the company evolved into a multi-product ecosystem, the UI layer remained fragmented. Design decisions were made directly in development using a raw Tailwind library without a centralized design strategy.
This created three critical risks:
Accessibility Liability: Inconsistent contrast and focus states were a major barrier for our primary users, who often navigate with visual disabilities or assistive technology.
Brand Dilution: A disjointed user experience across products, undermining trust in a sensitive service area.
Engineering Debt: Developers were "reinventing" the same components across different products, slowing down delivery and increasing maintenance costs.
Lack of Parity: There was no shared "language" between Figma and code, leading to friction during handoffs and QA.
Strategy: Bridge, Don't Replace
My strategy was to build a system that felt like a natural extension of the developer workflow, not a hurdle.
The Tailwind Audit: Instead of replacing the engineering foundation, I audited the Tailwind library and extracted only the essential components. This ensured immediate "dev-friendliness" and high adoption rates.
Foundations-First: I prioritized Variables (Tokens) over components. By defining the "DNA" (colors, spacing, typography) first, we ensured that every future component would be accessible by default.
Alignment over Aesthetics: I focused on aligning cross-functional teams on a Governance Model to ensure the system would grow through process, not improvisation.
System Work: Infrastructure over Interface
I treated the design system as a product, focusing on technical architecture that mirrors the codebase.
Accessibility as a Foundation:
Typography: Selected Inter for its high legibility and x-height.
Color Variables: Created a semantic naming system. Every token was validated against WCAG 2.1 AA/AAA standards to support veteran users.
Focus States: Engineered high-visibility focus rings specifically for keyboard-only navigation.
Design-Code Parity: I structured the Figma library to mirror the Storybook architecture. If I named a variable
brand-primary-hover, the developer saw the same token in their code.Variable Strategy: Implemented Figma Variables for spacing, radii, and colors, allowing us to test "Themes" (like High Contrast Mode) instantly across all 8 apps.
Delivery & Collaboration: Driving Adoption
A system is only successful if people use it. I focused on building a "Contribution Culture."
Tailored Communication: I presented the system differently to each audience:
To Engineers: Focused on tokens, props, and reducing custom CSS.
To Managers: Focused on speed-to-market and cost reduction.
Governance Loop: Established a dedicated Teams channel for component requests. Every update was a partnership between a dedicated designer and an engineer to ensure the system remained lean.
Education: Mentored the design team to stop "drawing screens" and start "building with patterns," shifting the team’s maturity from execution to orchestration.
Management & The Contribution Loop
As the system grew from a "form-kit" to an enterprise-wide asset supporting 8 applications, the biggest risk was fragmentation—teams either creating "rogue" components or over-complicating the existing ones. I established a formal governance model.
1. The "Three-Way" Check
To prevent the design system from becoming a "junkyard" of one-off components, every request via our Teams channel was filtered through three questions:
Is it Universal? Does more than one application (out of the 8) need this?
Is it a Pattern or a Component? Can this be solved by combining existing components (e.g., a Card + a Button)?
Is it Accessible? Does the proposed change maintain our strict contrast and focus-state standards for veterans?
2. The Request Lifecycle
I designed a clear workflow to ensure no request disappeared into a "black hole," which maintained high developer trust:
Discovery: A developer or designer submits a request in the Teams channel.
The "Sync" Meeting: A 15-minute technical review between the Lead Designer (System Owner) and Lead Developer to discuss API props and Figma constraints.
Drafting: The component is built in a "Beta" Figma file and a "Experimental" Storybook branch.
Validation: Final QA check for accessibility (keyboard tab-order and screen reader labels).
Promotion: The component is merged into the Main Library and documented.
3. Documentation & Parity
We enforced a "Twin-Track" documentation rule. A component was not considered "Done" until:
In Figma: It utilized Variables for spacing/color and included "Usage Guidelines" (When to use vs. When not to use).
In Storybook: It mirrored the Figma naming convention exactly (e.g.,
Input/Veteran-High-Contrast). This eliminated the "translation layer" between design and code.
Outcomes
The project successfully moved the company from a "dev-led UI" to a "system-first" culture.
Scale: The library now supports 8 applications with 100% visual and functional consistency.
Velocity: Significantly reduced design-to-dev handoff time; components are now "drag-and-drop" rather than "custom-built."
Accessibility: Achieved a unified standard where 100% of new features are accessible for veterans from day one.
Operational Truth: The Design System (Figma) and Storybook (Code) are now the "Single Source of Truth" for PMs, QA, and Stakeholders.
100%
Reduced inconsistencies
3x
Increased design-to-dev speed
8
Scaled system across products
Other projects
Digitizing the Veteran Journey: Connecting the Dots
Transforming a complex, phone-based claim process into a clear, task-driven digital experience.
Designing for Service: A Mobile-First Veteran Benefits Calculator
Simplifying the path to government benefits by bridging the gap between complex legal algorithms and human-centered design.
From Excel Chaos to a Unified Retail Powerhouse
Orchestrating the end-to-end design and strategy of a responsive platform that unified fragmented legacy workflows into a high-velocity digital marketplace.