REI – Cedar Design System

R O L E UI Designer
T E A M Lead Designer | Senior UX Designer | Design Technologist | Front-end Developers | Product Manager

REI is, first & foremost, an outdoor retail business. The job of Cedar, REI’s homegrown open source design system, is to tell a cohesive brand story across different digital mediums and improve accessibility to the digital properties. Their mission is to make online shopping easier for customers within the REI ecosystem.

I contributed to the grown of the Cedar design systemand improved and enhanced the tooling and infrastructure of its design libraries and toolkits. This helped the designers using the system to iterate on their work faster and helped improve the design to dev handoff.

Growing the system

O V E R V I E W
To grow the design system, I contributed to the discovery and creation of new components as well as updates to existing ones.

S O L U T I O N / P R O C E S S
Creating components for a design system required doing in-depth research. I had the help of my Cedar design team and members of the larger digital design team. After all, they are our biggest customers and users of our design system. The work they do helps solve the larger business needs and drive revenue by defining the customer experience across the various REI properties.

I needed to understand how our biggest customers, the digital design team at REI, were utilizing the components from either the toolkits or by creating their own using our style libraries.

Working with the larger digital design team, we researched on how a similar component might be used in other design systems, including those with similar behavioral and interaction patterns. We also conducted an audit of current usage of the components across different REI properties.

This research, along with user interviews, helped me define a path to discovery and create guidance and documentation on usage and accessibility requirements along with specifications to build.

All of this work helped me create a component that solved for most use cases.

Design system tooling

O V E R V I E W
The digital designers at REI use components and/or token libraries from Cedar to iterate on their designs.

S O L U T I O N / P R O C E S S
Working across multiple teams, I am the point lead for the creation, update, and maintenance of the design libraries and toolkits for the Cedar Design System. These are the libraries and toolkits that the designers in our larger digital team use to build their designs for the REI site and app. This requires constant research into other design systems and how they document, architect, and present information to users. In collaboration with my own design team, I helped achieve proper taxonomy and file structure in the libraries for two different toolsets in Figma and Sketch/Abstract.

It required a very structured approach on how to architect libraries and toolkits as the releases for the design system are on a quarterly cycle. We support two versions of the system at any given point (i.e., the current and previous quarter), while working on updating the system for the next quarter.

I not evolved these libraries to a state where they can be scaled and have also ensured system parity between design tools & code. This has taken the sting out of the handoff process when designers have to deliver their designs to developers to build.

A snapshot of Cedar design libraries and toolkits in Sketch/Abstract and Figma

The “And/Or” problem

O V E R V I E W
If you’re wondering about the “and/or” conjunction in the phrase “designers at REI either use the components and/or style libraries that I create”, let me explain. The design system we provide is built on Vue.js framework. This becomes problematic when consuming teams are not using Vue as their platform of choice for front-end development.

S O L U T I O N / P R O C E S S
Along with the rest of the Cedar team, I not only provided design system support, documentation & guidance (via the Cedar documentation site), but also a library of color, typography, motion, grid, spacing & prominence pattern libraries known as style tokens. These tokens are provided so the consuming teams can reconstruct a component on their platform of choice with our support & have the component look as if they are not on Vue. It allows them to have exactly the same look, feel, and interaction as if it was being pulled directly from the Cedar Design System.

All the tokens are published & maintained in our repository in GitHub. I had to make sure these are always mirrored in the tools being used by designers.