Design System Onboarding

Onboarding developers to a scalable design system

“Styles come and go. Good design is a language, not a style.”
Massimo Vignelli

Results

Onboarded 80+ developers to Cedar

Process

Interviews, Competitive Analyses, User Journeys, Personas

Outcomes

Increased design system adoption which improved REI digital platforms and saved teams time

Client

REI

Role

Led strategy, design, and research

Timeline

2-3 months

Identifying a problem and an opportunity

I spearheaded the development of a formal Cedar onboarding process for new employees at REI. Prior to this initiative, many developers—both new and existing—were unaware of Cedar, leading to fragmented usage or complete neglect of the system leading to code debt. By refining the Cedar onboarding experience, we aimed to enhance adoption of the design system, improve the quality of code at REI, and elevate the design system through broader and more diverse feedback.

Research and exploration

Through interviews with developers and designers, cross-disciplinary workshops, competitive analysis, and the creation of personas based on our findings, I discovered that new and existing developers require a blend of two types of resources: hands-on materials for those who learn by doing, and written resources for those who prefer to learn through reading.

Defining the project

I created a project roadmap and defined the requirements and goals. We focused on creating a landing page of resources with step-by-step ways both new and existing developers at REI can use Cedar. Within that landing page, we also scoped an FAQ page and a video tutorial companion.

Goals defined were: get new developers to know what Cedar is in their first week, get developers to use an element or more in their first project, and understand points of improvement for Cedar in their first 4 months.

Iterating on visual designs

I designed and wrote the copy for the landing page, FAQ page, and tutorial video script. After gathering feedback from developers, I collaborated closely with cross functional partners to refine and deliver these resources.      

Delivering designs with continuous feedback

We created a comprehensive developer resource page and FAQ section with custom illustrations to guide developers from day one through year 10 in using and eventually contributing to Cedar. The pages include relevant cross-links for easy navigation. As an active contributor to the Cedar GitHub repository, I also helped write the HTML and CSS.

Results and outcomes

In just 2-3 months, I designed and launched the developer onboarding experience from inception to completion.

Saving developers countless time
Engineers quickly learned and use Cedar from day one at REI. Developers reported using this easy resource every single day. This not only increased awareness of existing tools within Cedar but also saved time by preventing developers from recreating elements of the design system due to lack of knowledge.

Continuous feedback for an ever-evolving system
I created and systematized via email a semiannual feedback survey that automatically collects insights to help refine and adapt these resources as developers' needs evolve.

Increased adoption
The adoption of Cedar by developers increased by >30%, with both satisfaction and understanding of the system significantly increasing.

Widespread success
We accomplished our above-stated goals (get new developers to know what Cedar is in their first week, get developers to use an element or more in their first project, and understand points of improvement for Cedar in their first 4 months). The massive success of this developer onboarding inspired use of this process to successfully identify a designer onboarding flow which I consulted on and implemented.