Design System

lululemon

Image of the Sketch DSM interface within a MacBook Pro
Manager of Product Design,
North American E-commerce
Jul 2018–Aug 2019

The Opportunity

Create a design system with a code library that enables digital teams to scale.
Vision, Mission & Objective title slide
Vision: A maintainable Sketch library of components that are on our digital platformsVisual representation of unfocused inertia versus inertia transferring to momentum then velocityObjective: Improve efficiency of designers, ensure accuracy of design, and build trust with engineering

The Solution

Using a toolset consisting of InVision DSM, Sketch, Craft, and Storybook we built a modular design system. The design elements and coded components each lived in separate repositories which allowed our team to use the best tools while creating a lean system that is services based and not a monolithic solution.
Slide stating the tech stack implemented is Sketch, Craft, and InVision

The Process

We adopted principles from Atomic Design to lead our decision making for breaking down the components on the e-commerce platform. We then did a quick audit of all of the components on the platform, identifying duplication and minor variants. With this documentation we set up 4 sprints, each with a 2 week timeline. These sprints positioned us to have a 1st version of lululemon’s design system that could be used by the product design team.
Examples of Atoms and Molecules from Atomic DesignExamples of Organisms and Templates from Atomic Design
With version 01 ready to be used by our product design team we gave the team instructions and access to InVision DSM. We also set up a board to document issues and enhancements. While our team was finding ways to make the design system even better we interfaced with our Brand and Engineering partners to socialize the work and ensure everyone’s needs were considered.
With the feedback from our product design team, iterating to version 02 was quite simple and the speed and efficiency was felt immediately. As a nice touch, once we could demo the design system to executive leadership they saw the value as well as the passion of our product design team.

I led this initiative from the Product Design side and used my background in front-end engineering to ensure we created something that increased our efficiency, ensured accuracy, and would lead to a strong relationship between design, business, and engineering.

The Results

lululemon’s guests now enjoy a consistent experience that adds to the credibility of the brand. Product Design and Engineering both have a smaller set of components to manage and Product Management now has a library of components they can think of as ‘free’ when budgeting and developing roadmaps due to the scalability of the system.
Chart illustrating how design systems can reduce design and technical debt
lululemon’s guests now enjoy a consistent experience that adds to the credibility of the brand. Product Design and Engineering both have a smaller set of components to manage and Product Management now has a library of components they can think of as ‘free’ when budgeting and developing roadmaps due to the scalability of the system.
Bar chart showing the efficiency TELUS created from their design system
Due to the success of lululemon’s design system the initiative is slated be resourced as a independent product team for 2020.

Want to collaborate?

Let's Talk!