$$ ProgressBar - DoNotEdit $$
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Intro
Lead Product Designer • 60% productivity gains • 16,000+ component inserts across 14 teams • 0.88% detach rate
Building USA’s Best State Design System in <12 Months
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Overview
When I joined the State of New York’s Human Centered Design team, there was no unified design system, no component library, and no shared visual language across state agencies. The state’s brand guidelines were not being followed by designers and engineers. Each product team designed and developed in isolation, which made accessibility compliance, consistency, and collaboration extremely difficult.
The opportunity was enormous: to create a design system that could unify digital experiences for one of the largest public institutions in the country, ensuring every New Yorker could access clear, usable, and inclusive digital services.
I joined as a Product Designer and was promoted to Lead Product Designer within my first six months. I was the last to join the cross-functional design system team of seven people — including 2 designers, 4 engineers, and a brand specialist — working in close partnership with our sister Accessibility Team.
My role focused on building the system’s core Figma architecture, designing its most complex components, establishing variable and token structures, and leading documentation and training. I also contributed to the custom-coded documentation site, making the NYS Design System one of the most advanced public-sector design systems in the U.S.
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> The Challenge
Before the NYS Design System, state agencies maintained their own UI styles, often duplicating work and missing accessibility standards. Components weren’t reusable, and handoffs between design and development caused delays and inconsistencies. In one team’s words, “Mockups took twice as long in UXPin as they do now in Figma with the NYS Design System.”
This fragmentation not only slowed delivery — it risked inaccessible user experiences for millions of New Yorkers relying on critical public services.
The design system wasn’t just a visual refresh; it was a statewide transformation initiative. We aimed to create a design system that would:
In short, this was a chance to build one of the most scalable and accessible government design systems in the country — from scratch.
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Strategy & Goals
We set four guiding goals:
To measure success, I benchmarked progress against the U.S. Web Design System and tracked adoption through Figma analytics — monitoring component instances, detachment rates, and usage across teams.
We built the NYS Design System around Figma Variables, Auto Layout, and Code Connect, creating a variable-driven foundation that powers responsive behavior automatically.
I developed internal standards for naming, documentation, and structure that keep parity between design and code. This architecture made the system extensible, future-proof, and ready for token-based governance.
By month 12, we had achieved 54% parity with USWDS and built 26 highly accessible components — a remarkable pace for a team starting from zero.
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Process & Execution
We started with a clean slate: no shared Figma library, no design tokens, no structure. My first priority was to establish a scalable, variable-driven foundation that could evolve without breaking downstream work.
I created the first library of 26 core components and 95 styles, using Auto Layout and Figma Variables to make every element automatically responsive. I also defined a consistent naming convention for all layers and variants, ensuring seamless integration with our front-end codebase through Code Connect.
Our Figma library was architected to serve as a single source of truth — highly structured, documented, and optimized for design-to-code parity.
As our library matured, I saw an opportunity to solve a problem nearly every designer faces — the slow, manual process of switching between wireframes, mid-fi mocks, and final UI.
I invented Fidelity Modes, an **award-nominated Figma Variable mode** that allows designers to toggle instantly between low, mid, and high fidelity — no plugins required. It even works in FigJam, allowing teams to wireframe collaboratively, then paste screens back into Figma with fidelity settings preserved.
This innovation transformed our design workflow — reducing setup time dramatically and improving visual consistency from the very first iteration.
Collaboration was built into every step. I worked closely with our lead engineer, two junior devs, and the accessibility team to ensure design and code evolved together.
We mapped every Figma layer to its corresponding semantic HTML element, aligning component naming conventions with code for use in Code Connect. This eliminated the common ambiguity between design intent and implementation, ensuring what we built in Figma was exactly what shipped to production.
Simultaneously, I partnered with our sister Accessibility Team to make every component meet or exceed WCAG 2.1 AA standards. My background in accessibility from previous roles helped identify and prevent issues early, leading to a system that’s inclusive by default.
Once our system was stable, I focused on documentation and adoption. I recorded a three-part training video series, built “Getting Started” Figma guides, and hosted workshops with teams across the state.
The goal wasn’t just to ship a system — it was to build a community around it. I wanted designers to feel empowered, not dependent, so the documentation was written in plain language and filled with practical examples.
These efforts helped drive remarkable adoption: 14 teams using the NYS Design System within the first year, with 16,052 total component instances and only a 0.88% detachment rate — a strong signal of trust and consistency.
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Impact & Results
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Innovations & Differentiators
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Learnings & Next Steps
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Reflection & Closing
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Recognitions
</aside>
<aside> <img src="/icons/grid_lightgray.svg" alt="/icons/grid_lightgray.svg" width="40px" /> Continuation
</aside>