REI Design System
Q: “Why does the site look like it was designed by 27 people?”
A: “ Because it was designed by 27 people”
The above statement is an actual conversation I had with a coworker at REI.
When I started working at REI in 2015 I inherited a website that was the result of years of artifacts and holdover styles from seasonal campaigns. The site was riddled with inconsistent patterns and inaccessible components which caused the user to to have inconsistent experiences as they moved through the funnel. An agency had been hired to redesign the site and was in the process of delivering the final designs so I was going to have to work with what we got.
The issue with the agency’s designs were that it was designed to be desktop-first, was heavy and not performant, and allowed for a multitude of variations in components which caused the development timelines to be much longer than what would be considered acceptable in order to maintain velocity and deadlines.
Although the money had been spent and the designs had been approved by leadership I was fully aware that the designs we had been handed were not going to work for the long term so I hatched a secret plan to fix the issue.
Evolution of a design system:
To solve for this I began an unsanctioned project, pairing up a very talented designer with a UX partner to audit the existing site and component variations and challenged them to create a base set of components that were flexible, performant, accessible, and repeatable that could be used across the entire site.
More team members joined the secret project and in 2016 we unveiled the first set of components and guidelines and began to test them on the site. Through time tracking we discovered that the new system increased the development team’s capacity by as much as 85% and increased the design team’s timelines by as much as 70%. Within a year we had completely erased the agency’s designs from the site and the Cedar Design System was on its way to being fully adopted.
As of 2022 the small team that began the project is now a full fledged product group and the entire site runs on the Cedar system.
The building Blocks
Using Brad Frost’s Atomic design principles we reduced every component to three core elements: a media block, a content block, and an action block. Starting from mobile first we developed the initial set of components that would take the place of the agency’s faulty site design.
Cedar Today
Since the initial inception of the design system, Cedar has grown to be a fully supported company initiative with a dedicated design systems team servicing the entire organization. The entirety of the system is available on Github and while I can’t take credit for its full current state, I’m very proud of the project and how it has evolved since I left in the capable hands of the team.
