Michael Preuss
lululemon logo

Design System

Building lululemon's ecommerce design system and code library, which cut component variation by 60% and let digital teams ship consistently at scale.

Timeframe

Jul 2018 to Jun 2020

Company

lululemon

Role

Manager, Product Design, North American E-commerce (UX)

Read time

4 min

Read with...

Pick an agent

Gemini and Your Claw use copy and paste.

Part of

lululemon

Jul 2018 to Jun 2020

  • 01Audited every component on the ecommerce platform with Atomic Design, then shipped version 01 in four two-week sprints
  • 02Sketch library in InVision DSM with coded components in Storybook, kept in separate repositories as a lean service
  • 03Component variation fell 60%; lululemon planned to resource the system as its own product team for 2020

As Manager of Product Design for North American ecommerce at lululemon, I led the design system from the product design side: a Sketch library with a matching code library, built so the digital teams could ship consistent interfaces without redrawing the same parts.

The design system in use: Sketch open beside the InVision DSM library at version 0.8, showing the hero component's documentation and its desktop and mobile variants

The goal

We wrote it down before we built anything. The vision was a maintainable Sketch library of the components that were actually on our digital platforms. The mission was to increase the velocity of design. The objective was three things: make designers more efficient, make designs more accurate, and build trust with engineering. That last one was the point for me. I'd spent ten years in front-end engineering before product design, and I wanted a system that held up on both sides of the handoff.

Title slide from the design system deck: Vision, Mission and Objectives

Vision slide: a maintainable Sketch library of components that are on our digital platforms

Mission slide: increase the velocity of design, with a diagram of inertia pulling in every direction beside momentum pointing one way

Objective slide: improve efficiency of designers, ensure accuracy of designs, and build trust with engineering

The toolkit

The UX team designed in Sketch and used the Craft plugin to push prototypes to InVision and to reference the system from inside Sketch. The library itself lived in InVision DSM; the coded components lived in Storybook. We kept design and code in separate repositories on purpose, so the system ran as a lean service each side could version rather than a monolith everyone had to touch.

Toolkit slide, Sketch plus Craft plus InVision: the UX team designs in Sketch and uses the Craft plugin to upload prototypes to InVision and reference the design system

The audit and four sprints

Atomic Design gave us the lens. We broke the ecommerce platform down into atoms, molecules, organisms and templates, ran a fast audit of every existing component, and documented the duplicates and the minor variations. With that documentation in hand we ran four two-week sprints and shipped version 01 to the product design team.

Molecular design slide, atoms and molecules: atoms such as buttons, form fields, typography, checkboxes and radio buttons; molecules such as carousel swatches, banners, dropdowns, the image waterfall and accordions

Molecular design slide, organisms and templates: organisms such as the promotional tile, navigation and the product tile; templates such as PDP viewport 01, event listings and CDP filters

Version 01 to version 02

Version 01 went to the product design team with instructions and access to DSM, plus a board for issues and enhancements. While the team kept refining it, we worked with our Brand and Engineering partners so the system reflected what they needed too. Their feedback made version 02 straightforward, and the speed difference was obvious as soon as it landed. When we presented the system to executive leadership they saw the value in it and credited the product design team for the work.

The deck closed with the benefits we expected, from less time to start a design to less duplicate work, and a projection of the time it would save, drawn from TELUS's published benchmark for a design system. Those were projections, not measurements. The results below are the ones I stand behind.

Benefits slide: reduced time to start design and quicker to market, every Sketch symbol backed up in the cloud and version controlled, faster onboarding of internal and external teams, consistency across product teams, less duplicate work and higher job satisfaction; beside it, a chart titled "The heartache of design at scale: design debt" showing time on maintenance growing with each release

Value slide: 7,200 designer hours a year saved (projected) and up to 20x higher efficiency for design tasks, benchmarked on TELUS's published timing for a designer placing a standard symbol, about nine minutes before a design system and 30 seconds after

What it changed

Guests got a more consistent experience across the store, which does more for a brand's credibility than any single page. Product Design and Engineering had a smaller set of components to maintain: component variation fell 60%. Product Management got a library of parts they could treat as free when planning roadmaps, because the cost of building them had already been paid. On that showing, the plan for 2020 was to resource the design system as its own product team.

FAQ

Questions this page answers

01What was the lululemon design system?

A maintainable Sketch library of components with a matching coded library, built so lululemon's digital teams could ship consistent interfaces without redrawing the same parts. Design lived in InVision DSM and code in Storybook, in separate repositories, so it ran as a lean service rather than one monolith.

02How was it built?

We audited every component on the ecommerce platform with Atomic Design as the lens, documented the duplicates and near-variants, and ran four two-week sprints to ship version 01 to the product design team. Their feedback took us to version 02, and the speed difference was obvious straight away. I led it from the product design side, drawing on my front-end background, with lululemon's Brand and Engineering partners in the loop.

03What changed because of it?

Component variation fell 60%. Product Design and Engineering maintained a smaller set of parts, guests got a more consistent experience, and Product Management could treat the library as free building blocks when planning roadmaps. On that showing, lululemon planned to resource the system as its own product team for 2020.

04What tools did it use?

Sketch for design, Craft to publish prototypes and reference the system, InVision DSM as the library, and Storybook for the coded components lululemon's engineers consumed.

05Who used it, and how did it keep improving?

The product design team first, with instructions and DSM access, then Engineering through the Storybook library. An issues board collected problems and enhancements, and lululemon's Brand and Engineering partners shaped what went into the next version.