Design System
Modular system and component library
Timeframe
Jul 2018 to Jun 2020
Company
lululemon
Role
Manager, Product Design, North American E-commerce (UX)
Read time
2 min
Read with...
- 01Opportunity: design system with a code library
- 02Solution: modular system with Storybook
- 03Process: audit, sprints, and adoption
Opportunity: design system with a code library
Our goal was to create a design system equipped with a code library that empowers our digital teams to scale seamlessly.
Solution: modular system with Storybook
We utilized a toolkit comprising InVision DSM, Sketch, Craft, and Storybook to craft a modular design system. The design elements and coded components were housed in separate repositories, fostering a lean, service-oriented system rather than a monolithic one.
Process: audit, sprints, and adoption
Taking cues from Atomic Design principles, we guided our decision-making process to deconstruct the components on the e-commerce platform. We conducted a swift audit of all existing platform components, identifying duplications and minor variations. Armed with this documentation, we organized four sprints, each with a two-week timeline. These sprints positioned us to unveil the initial version of lululemon's design system for use by the product design team.
With version 01 ready for the product design team, we provided them with instructions and access to InVision DSM. Additionally, we established a board to record issues and enhancements. While our team continually sought ways to refine the design system, we engaged with our Brand and Engineering partners to ensure alignment and consideration of everyone's needs.
With feedback from our product design team, iterating to version 02 proved straightforward, and the increased speed and efficiency were immediately apparent. Impressively, when we presented the design system to our executive leadership, they recognized its value and appreciated the dedication of our product design team. Personally, I led this initiative from the Product Design perspective, drawing on my background in front-end engineering to ensure the creation of a system that enhanced our efficiency, upheld precision, and fostered a robust relationship between design, business, and engineering.
Results: consistency and component reuse
lululemon’s guests now enjoy a consistent experience that enhances the brand's credibility. Both Product Design and Engineering teams manage a smaller set of components, and Product Management benefits from a library of components they can consider "free" when planning and developing roadmaps, thanks to the scalability of the system.
Due to the resounding success of lululemon's design system, the initiative is set to be resourced as an independent product team for 2020
Decision support
FAQ: Fast answers, no filler
The objective, outcomes, and next best path in under a minute.
01What is the lululemon Design System deep dive?
A lululemon case study on building a modular design system and code library, so Product Design and Engineering could scale with less duplication.
02What problem did the design system solve?
Component duplication and small variations slowed delivery and created inconsistency. The design system reduced variation by standardizing components and making reuse the default.
03What was built in the design system effort?
An Atomic Design-informed component audit, a modular system design, and an initial version shipped across four two-week sprints, with a workflow that made iteration from version 01 to version 02 straightforward.
04What outcomes are documented?
A more consistent guest experience, a smaller component set for Design and Engineering, and a component library Product Management could treat as baseline building blocks for roadmaps. The work was set to be resourced as an independent product team for 2020.
05Who is this approach for?
Best for teams with component sprawl and repeated UX patterns across a large surface area. Less useful when the product is small, the UI is stable, or speed comes from custom work over reuse.
06Where can I go deeper next?
Return to the parent case: lululemon.