The Opportunity
Our goal was to create a design system equipped with a code library that empowers our digital teams to scale seamlessly.
The Solution
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.
The Process
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.
The Results
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
Role
Manager of Product Design,
North American E-commerce
JUL 2018–AUG 2019
Contribution
Direction
Cross-functional Collaboration
Design Leadership
Strategy
Enrolment
Co-Creators
Product Designers
UI Designer
Product Managers
Web Application Engineers
InVision Support Team
3rd Party Technology Specialist