CASE Study
Design System for
Suite of SaaS Products
I initiated and led the creation of a shared design system that unified multiple SaaS products and design teams. Beyond reusable UI components, the system established scalable workflows, governance, and collaboration practices that improved consistency between design and engineering.
My role
Director of Product Design
- Design system strategy
- System architecture
- Workflow and governance design
- Component architecture
- Design–engineering collaboration
- Team enablement and mentorship
Workflow & System Infrastructure
The design system was built as a scalable ecosystem rather than a single component library.
I designed a network of interconnected Figma libraries, documentation, and working files that supported different stages of product design while maintaining a single source of truth.
The infrastructure enabled:
- clear ownership of design assets
- predictable contribution workflows
- faster discovery of reusable resources
- efficient collaboration between multiple product teams
- scalable maintenance as the system evolved
The diagram illustrates how product design work flows through shared libraries, documentation, validation, and delivery while maintaining consistency across teams.
Design System Strategy
As multiple products evolved independently, maintaining consistency became increasingly difficult.
I established the strategy, governance model, and contribution guidelines needed to transform isolated UI assets into a shared product infrastructure.
Key initiatives included:
- defining contribution and review workflows
- establishing component ownership
- introducing reusable patterns across products
- introducing seed-hue-based palettes for multiple products
- documenting standards for designers and engineers
- creating a scalable foundation for future growth
Component Architecture
Components were designed to maximize flexibility while minimizing maintenance.
Using variables, variants, and composable building blocks, I reduced unnecessary duplication while allowing products to adapt components to different brands, platforms, and themes.
The architecture emphasized:
- scalability
- consistency
- maintainability
- performance
- predictable customization
Component Classification
As the library expanded, designers increasingly spent time locating the right components rather than designing.
To improve discoverability, I introduced a classification system based on component purpose rather than visual appearance..
The system combined:
- logical component categories
- color-coded Figma Sections
- reusable templates
- annotation standards
This reduced search time, clarified intended usage, and made onboarding significantly easier for new designers.
Component Example
Button(s)
The button system demonstrates the principles used throughout the design system.
Instead of creating hundreds of individual components, behavior was centralized through variables while visual variants remained reusable and composable.
This reduced maintenance while supporting:
- multiple sizes
- nine button styles
- four brands
- light and dark themes
- icon configurations
- accessibility states
Design-Engineering Collaboration
The design system became a shared language between design and engineering.
I introduced common conventions that enabled frontend teams to build a corresponding UI library while maintaining consistency with design decisions.
This collaboration improved:
- implementation consistency
- design handoff
- component reuse
- long-term maintainability
Team Enablement & Adoption
A design system succeeds only when people use it consistently.
I mentored designers on system thinking, reusable component design, and contribution practices while supporting adoption through documentation, reviews, and day-to-day collaboration.
The goal was not only to create components, but to establish shared ways of working across the organization.
Impact
The design system established a scalable foundation for product development across multiple SaaS products.
Accessibility considerations were embedded into reusable components and interaction patterns, encouraging accessible design decisions by default rather than as an afterthought.
It helped teams:
- deliver more consistent user experiences
- reduce duplicated design effort
- accelerate interface creation through reusable building blocks
- improve collaboration between design and engineering
- onboard new designers more efficiently
- support future product growth with shared infrastructure
System Thinking
This project extended beyond creating reusable UI components.
It involved designing the infrastructure, workflows, and governance required for multiple teams to build products consistently while remaining flexible enough to support different brands, platforms, and future product growth.
- Shared libraries
- Contribution workflows
- Component architecture
- Documentation
- Design-engineering alignment
- Team enablement