Leading lululemon’s design system strategy
Created and implemented a unified, scalable system—defining the strategy, foundations, components, and standards that drive design excellence, efficiency, and alignment across teams worldwide.
Design System
Strategy & Optimization
Overview & Impact
Over the past two years, I’ve led lululemon’s global design system strategy, focusing on design excellence, scalability, and operational efficiency. This initiative consolidated fragmented libraries, improved cross-team collaboration, and built a flexible, token-driven foundation that supports consistency, responsiveness, and the company’s global rebrand.
7 → 1
Libraries unified into a system
65%
Reduction in redundant work
35%
Fewer detached instances
My Role
As Senior UX/UI Designer, I defined and delivered the end-to-end strategy and implementation of the system.
Strategy & Vision: Established the roadmap and guiding principles for a unified system across platforms and regions.
Foundations: Built shared, tokenized structures for color, type, spacing, and radius to enable global scalability.
Components: Rebuilt and optimized core components for responsiveness, accessibility, and flexibility.
Standards & Governance: Created contribution workflows, approval systems, and comprehensive documentation.
Education & Adoption: Led workshops and usability tests to build confidence and empower designers to work efficiently.
Company:
lululemon
Timeline
Q4 2023 - Q3 2025 | 2 years
Team
Design Systems
Website
The Challenge
Trust & Adoption
Designers felt unheard, and the system didn’t follow its own standards or meet their use cases — leading to low adoption and lack of trust.
Consistency & Quality
Teams created local one-off components that varied slightly and broke visual cohesion, resulting in inconsistent experiences across platforms.
Scalability & Growth
With digital growing rapidly, global expansion, and a rebrand on the horizon, fragmented libraries made scaling inefficient.
Clarity & Guidance
A lack of approval workflows and documentation left teams uncertain about how to contribute or follow best practices.
Process
Timeline
Phase 1
Audit & Discovery
To understand the health of our design system, I audited all active libraries across Web, iOS, International, and B2B, reviewing component structures, naming, accessibility, and token use. I also led designer interviews and workshops to uncover pain points around adoption, governance, and workflow efficiency.
The audit revealed extensive redundancy and inconsistency—with multiple teams rebuilding the same components differently. Rigid components and missing foundations made the system hard to use and scale, while accessibility gaps and lack of governance reduced trust and adoption.
These insights became the blueprint for the next phase: defining a unified strategy, shared foundations, and a scalable governance model to move the organization toward a single, cohesive design system.
Phase 2
Strategy & Definition
Building on the audit insights, I defined a clear strategy and structure for lululemon’s global design system. This included creating a unified roadmap across Web, iOS, International, and B2B, establishing naming conventions, metadata standards, and component organization, and aligning with engineering and brand partners on scalable token architecture.
The new strategy focused on unification, scalability, and clarity—consolidating fragmented libraries, setting quality standards, and introducing governance workflows and documentation templates. These foundations enabled a shared language across teams and positioned the system to scale globally, setting the stage for implementation and tokenization in the next phase.
Phase 3
Foundations & Tokenization
With the system strategy in place, I built shared foundations and a tokenized architecture to create consistency and flexibility across all platforms. Tokens for color, spacing, radius, and typography unified design across Web and iOS, eliminating redundant styles and reducing inconsistencies that previously slowed production.
By introducing responsive spacing, adaptive type scales, and regional text collections, we automated responsiveness and localization—allowing components to adjust seamlessly across devices, languages, and markets. Where components were once fixed and fragile, they’re now dynamic, scalable, and globally adaptable—laying the groundwork for lululemon’s rebrand and international growth.
FF4647
8 px grid
F f
Font Family
Motion
Icons
Brand/Primary
Light | Dark
Gap/Small
Mobile | Tablet | Desktop
F f
Heading Size
Mobile | Tablet | Desktop
Text Copy
English | German | Korean
Universal Foundations
Primitive Collections for iOS & Web
These consist of:
Type primitives tokens
Color primitives tokens
Static spacing & radius tokens
Icon library
Motion library
Web Foundations
Semantic Collections for Web
These consist of:
Responsive type tokens
Semantic color tokens
Responsive spacing & layout tokens
Region language & font tokens
Phase 4
Component Optimization
After establishing the system foundations, I rebuilt key components to be lean, adaptive, and responsive. Many legacy components were rigid, fixed-width, and duplicated across teams. By restructuring them with token-based spacing, typography, and flexible properties, I created dynamic, reusable building blocks that scale seamlessly across breakpoints and content types.
This optimization replaced dozens of redundant variants with streamlined, responsive structure. Designers can now build layouts that automatically adapt to any screen or configuration, improving efficiency while maintaining consistency and quality.
80%
Reduction in redundant variants
Streamlined dozens of rigid component versions into flexible, adaptive structures.
70%
Faster design workflows
Automated responsiveness, cutting time to create breakpoints from hours to minutes.
Phase 5
Rebrand Implementation
Using the new foundations and evolved components, we successfully launched lululemon’s global rebrand—bringing international and web experiences under one cohesive design system. Shared tokens and responsive components allowed teams to update color, type, and spacing instantly, ensuring brand consistency and accelerating rollout across platforms.
Ongoing
Education & Adoption
With the new system in place, I focused on empowering designers to use it effectively. I led hands-on workshops, office hours, and usability tests to teach responsive design practices, variable use, and governance workflows. These sessions helped bridge gaps in understanding and built confidence in the system’s flexibility.
By pairing education with continuous feedback loops, we increased system adoption and reduced reliance on one-off solutions.
Designers reported faster project starts, greater trust in component reliability, and clearer understanding of how to contribute—turning the system from a resource into a shared foundation for collaboration and quality.
Results & Impact
The new design system streamlined workflows, strengthened collaboration, and elevated design quality across teams. By unifying foundations and modernizing components, we eliminated waste, improved responsiveness, and built a scalable framework that continues to support global growth and brand evolution.
7 to 1
Unified libraries
65%
Reduction in duplicate work
85%
Increase in adoption
100%
Foundations tokenized
Summary
Through this initiative, I shaped lululemon’s design system into a scalable, trusted foundation that empowers teams to design and deliver with consistency and confidence. The work bridged strategy and execution—aligning people, process, and technology to reduce friction and enable growth. It continues to evolve as a living system, supporting lululemon’s global brand and the teams who bring it to life.