GOAL
Create a set of standards to manage design at scale using reusable components and patterns.
1
Deliver high quality and consistent research, resources, tools, and operations?
2
Strengthen UX through leadership, design, and culture?
OUTCOMES & IMPACT
👍 Spearheaded building our design system from the ground up
👍 Designed platform-wide React components across 3 platforms, 8 micro-frontends, and multiple products
👍 Expanded the design system by 400%, covering components, patterns, and interaction models
👍 Accelerated UX design lead time by 30-40%
👍 Reduced UX and development rework through shared standards
👍 Elevated UX maturity across product and engineering teams
CONTENTS
1.0 Creation
Building the design system library and implement the UI components.
2.0 Contribution
A contribution model to ensure our team continues to build the design system each quarter.
3.0 Maintenance
Keeping the design system up-to-date to minimize drift
4.0 Analytics
Measuring the efficacy of the design system over time
1.0 CREATION
Why the System Exists
This design system was built to solve a scaling problem.
As Solace grew across products, platforms, and teams, UX quality became harder to sustain. Designers were spending time continually re-solving trivial problems, developers were re-implementing patterns inconsistently, and product teams lacked a shared language for decision-making.
The system’s primary goal was to operationalize good design, make quality repeatable, accessible, and measurable across the organization.
Designing for Scale
The system is a product, not a library.
That meant defining a clear vision, roadmap, and success metrics—aligned to both user experience and business outcomes. I established product principles rooted in the Solace brand and UX heuristics, ensuring the system could support highly data-dense, mission-critical workflows.
1
Get buy-in from stakeholders to allocate resources to building and maintaining the system
2
Create a vision to work towards
3
Research well-known design systems to understand what constitutes as a solid foundation
4
Build out patterns, symbols, and UI components
5
Create a design system SDLC and incorporate it into the feature SDLC
6
Evangelize the system to increase adoption and support with the broader audience
2.0 CONTRIBUTION
From building blocks to system design
After creating the basic building blocks, we needed process. We created repeatable guidelines that reduced ambiguity and sped up execution for our team. Standardizing these procedures greatly improved cross-team collaboration and reduced design lead time. In the end, these efforts helped us shift left in the Software Development Life Cycle and enabled us all to focus on bigger-picture problems.
1
Create documentation standards for the UX team so designers and developers always know what to expect
2
Create recurring meetings at the beginning of every quarter to prioritize, allocate, and size design tasks
3
Create an evaluation criteria so we know how to prioritize design system needs
4
Established a point system for design system tasks, giving teams a way to assess effort and intentionally plan work within their feature roadmaps
5
Write the tasks into the team's critical success factors to keep us accountable and democratize ownership
Our design system’s development lifecycle
The Moscow Analysis was used due to feasibility and access to user feedback
A regular quarterly contribution model for design system tasks
3.0 MAINTENANCE
Keeping the system up-to-date
As the design system scaled, maintenance surfaced as an operational gap. Many refinements to patterns emerged as small decisions during feature work that didn’t warrant formal roadmap ceremonies but still needed to be captured. To address this, I defined a lightweight maintenance process that logged, documented, and reconciled these micro-decisions, preventing the system from drifting out of sync.
This operational foundation allowed the system to grow sustainably as teams and products expanded.
1
Create a mechanism for designers to log rapid decisions in Slack
2
Create an automated workflow that integrates multiple tools together so all the decisions are centralized in one area in a digestible manner
3
Create a recurring working period where the team updates the system together
4.0 ANALYTICS
Measuring MFE adoption
I used AI and the CASTLE framework to measure the efficacy of the design system, with a primary goal of increasing adoption across all MFEs. Starting from business goals, I defined metrics that revealed whether teams were moving away from custom components and toward the system as a single source of truth. These metrics were translated into positive and negative signals to understand the current developer landscape and how the system was actually being used. Attitudinal signals were measured through surveys, while behavioral signals focused on adoption rates and defect patterns. AI-assisted analysis helped surface trends and guide targeted system improvements.
NEXT STEPS
The system is never “done.”
It continues to evolve through analytics, user research, and close partnership with product and engineering. By treating the design system as both infrastructure and strategy, it remains adaptable to new products, technologies, and organizational needs.
This work sits at the intersection of design, operations, and leadership where systems thinking has the greatest leverage.
Design System evolution
Our next task is converting our design system to be AI consumable, then integrating Claude AI ✨ with a Figma MCP server 🤖. Our goal is to allow users to bypass the full specs and go straight to vibe coding full features through their IDE. Afterwards, testing will be done to see if the tools meet user needs and outputs are accurate and high quality.
