- Product Designers
- UI Designer
- Product Managers
- Web Application Engineers
- InVision Support
- 3rd Party Technology Specialist
- Cross-functional Collaboration
- Design Leadership
Create a design system with a code library that enables digital teams to scale.
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.
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.
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.
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.
lululemon’s Product Design team can also quickly onboard new staff, contractors, and agencies with the confidence that the integrity of the design will be maintained and the cost of starting projects has be greatly reduced.
Due to the success of lululemon’s design system the initiative is slated be resourced as a independent product team for 2020.