Design System Creation

Overview

Company

National Outdoor Leadership School (NOLS)
A global nonprofit wilderness school developing leaders through outdoor education and expedition-based learning.

Project Goals

User
Empower design, development, and content teams to build consistent, cohesive, user-friendly interfaces, collaborate better, iterate faster, manage debt, and share knowledge.

Business
Break down department silos, decrease time to market, reduce production cost, improve user experience, extend market reach, and reduce cost of hiring.

Project Summary

I was a lead UI designer and system advocate for establishing NOLS' foundational design system, delivering a 48% increase in designer efficiency and 90% improvement in documentation and asset consolidation.

NOLS’ design, development, and content teams wanted to build a design system to improve collaboration, consistency, efficiency, and scalability. The company’s teams were siloed, suffered from extensive debt, and had trouble iterating quickly and efficiently with consistency. I was a lead UI designer and system advocate on the project. Our team followed a modified combination of the processes laid out in InVision’s Design Systems Handbook and DSM Field Guide. When I left NOLS, the portion of the design system I helped build out was responsible for a +48% in designer efficiency (a cost savings of $3,462 a year) and a +90% in documentation and asset consolidation.

Full Case Study

Introduction

Context

NOLS’ design, development, and content teams wanted to build a design system to improve collaboration, consistency, efficiency, and scalability.

For several years NOLS’ teams and websites had been growing without shared user interface standards. With 5,000+ pages on the main website, 10 separate standards documents, 15+ rarely maintained coded components, 0 user interface guidelines, no UI Kit, and a ~30% turnover rate*, NOLS’ design, development, and content teams needed a more systematic way to align, guide, and support their work.

One idea our design team had to address this was to build an atomic design library, which I was tasked with creating. As I built the library, it became apparent to me that the library alone would not be enough to overcome the problems our team was facing. After some research, I discovered the concept of design systems and decided that this was the comprehensive solution we needed to invest in. I pitched the idea of building a design system––a set of standardized guidelines and assets for creating user interfaces—to stakeholders in design and engineering leadership, and got buy-in.

A few months after beginning work on the design system, NOLS decided it needed to modernize and overhaul its website experience and our team began creating the system in conjunction with this redesign project.

*Year-over-year average company wide

Problem

NOLS’ teams were siloed, suffered from extensive debt, and had trouble iterating quickly and efficiently with consistency.

Based on complaints from our design and development teams, we knew that they were having trouble collaborating, iterating quickly, and maintaining shared documentation. We also knew from previous usability testing, customer complaints, and an UX audit by an external SEO company that the user experience on the NOLS website was fragmented and inconsistent.

Users & Audience

NOLS’ design system users were in-house design, development, and content teams as well as external third-party teams.

While our team didn’t conduct any formal user research for this project, we did have a basic understanding of our users through informal conversations with internal design, development, and content team members.

Role

UI Designer

I was responsible for visual style, component design, and documentation.

Created the first UI Kit for our team and documented best practices and guidelines for each component.

Deliverables

• UI Kit (Sketch, Abstract)
• Style Guide (InVision DSM)
• Website (InVision DSM)

Systems Advocate

I was responsible for pitching the design system to stakeholders, leading efforts to build it, and evangelizing the system with NOLS’ design, development, and content teams.

During this project, I worked on educating, engaging, and aligning stakeholders and teams on why we should build a design system. As part of this work, I gathered qualitative and quantitative data on the projected impact of creating a design system. This data, paired with the trust our team had built over a long time with stakeholders, led to a quick approval by our Creative Director and buy-in from other departments.

Deliverables

• Business case presentation
• Impact analysis report
• Stakeholder education materials
• System adoption strategy

Team

I was one of the lead designers and system advocates. I reported to one project manager, worked with two directors, and collaborated with three other subject matter experts.

In-House (9 people)

• Web Manager
• Frontend Designer
• Art Director
• Senior Writer/Creative Project Manager
• Senior Writer
• Writer
• Creative Director
• Senior Graphic Designer
• Graphic Designer

Scope & Constraints

Limited Core Team Capacity
Our team was not a dedicated design systems team and we had limited time outside of our main project work to invest in building our system.

No Developer Capacity
While the development team was interested and generally supportive of our design system work they were already at their maximum project capacity and couldn’t dedicate resources to building out the component library alongside the UI library.

Changing Team
Partway through this project my project manager (the Web Manager) left, the Art Director left, and the Senior Writer was replaced by someone new. Additionally, when the COVID-19 pandemic hit my entire department was laid off except for myself and the Creative Project Manager.

Process

Overview

Our team followed a modified combination of the processes laid out in InVision’s Design Systems Handbook and DSM Field Guide.

Since our team was new to the concept of design systems and didn’t have past experience building them, we constructed our project process from suggestions laid out by design system industry experts. We planned to execute this process alongside our main project work as we had capacity. Once completed, our team planned to present the design system to the broader organization and continually advocate for it.

Kick-Off

To gain alignment quickly, our team conducted a kick-off meeting to identify our system goals, build process, and team model.

During the kick-off meeting, our team spent time thinking about and documenting why we were building a design system, how we would build it, and who would be responsible for building and maintaining what aspects of the system. By capturing these things, our team would be prepared to articulate and defend the importance of the system, account for how we would realize our plan, and clearly delegate project tasks.

*See above section for our build process

Research

Following the kickoff meeting, our project team researched and brainstormed system principles and structure to plan out what our system would include.

After gaining alignment in our kickoff meeting, each member of our project team took time alone to research and brainstorm our system principles and structure. We then came back together to present our ideas and combine the best ones. The resulting first drafts of both provided our team with a clearer idea of what we should include (and not include) when building out our system as well as how the system would support our company’s digital product.

Design Audit

To determine the amount of design debt in NOLS’ UI and prioritize what we should build, the designers on our team conducted a UI inventory.

Next the designers on our team conducted a design audit of the company’s UI assets. To do this they collected screenshots of different design elements as they existed across NOLS’ products and marketing presence (at different screen sizes and interactions states) and grouped them together by category in Sketch and Abstract files. This visual collection of design provided our team with insight into the amount of design debt within NOLS’ UI and gave us a better understanding of what we should prioritize building. The metrics from this audit also gave us a way to communicate to stakeholders how this design debt was linked to a poor user experience and lost time and resources.

As part of the web team, I supported this effort by helping to determine what we should audit, where and how we should store it, and what information we should be collecting. I also helped to provide auditing support and feedback for the designers.

Where We Looked

Design Language

Based on our design audit, our team crafted a set of foundational design decisions that we could use to quickly construct our digital product.

Once the design audit was complete, our team began building out our system’s underlying design decisions—color, typography, spacing, icons, and illustrations. Our Art Director began this process by expanding our color and typography scales for digital use (since at the time they were mainly designed for print media). I provided feedback on these new scales and added them along with our brand illustrations to our UI Kit and documentation website.

Outside of our work on the design system, I was also creating mockups for a separate project and realized that our team didn’t have any layout or spacing UI guidelines in place for the web. I brought this to the attention of the Art Director and worked with them to craft a new set of guidelines.

With these foundations in place our team was ready to begin building our UI Kit using these core design decisions.

UI & Content Libraries

Using the new design language elements, I built out a UI Kit in Sketch and Abstract. Alongside this work, I added guidance to the documentation site for the UI Kit components and written content.

With the design language in place, I was then in charge of building out our UI Kit. For each component I created multiple variations to account for interactive states and screen sizes. Once I had built out a component in the UI Kit, I would then create guidance for using it on our documentation website. Alongside this work, I also worked with our writers to put their content guidelines in place on the documentation website.

Around this phase of the project, my project manager (the Web Manager) left, the Art Director left, and my entire department was laid off during the COVID-19 pandemic except for myself and the Creative Project Manager. These departures, alongside the devastating loss from the COVID layoffs, meant that I lost the majority of the people I was building the system for and gained many more responsibilities that slowed down my progress building out the UI Kit.

Outcome

What Happened

When I left NOLS, the portion of the design system I helped build out was responsible for a +48% in designer efficiency (a cost savings of $3,462 a year) and a +90% in documentation and asset consolidation.

While I left the company before I was able to finish building out the component library in code, the pieces of the system that had been built (design language, UI kit, content guidelines, and documentation website) had a significant impact on collaboration, efficiency, consistency, and accessibility at NOLS.

• +48% in designer efficiency (a cost savings of $3,462 a year)
• +90% in documentation and asset consolidation
• +50.29% in documentation coverage
• +1462.9% in shared documentation
• Fixed 303 consistency issues
• Fixed 68 accessibility issues

Lessons Learned

People and culture matter.
A design system is not just a set of standardized guidelines and components; it is a framework for collaboration and communication among designers, developers, and content creators. For a system to be successful, those using it must be willing to work together, share knowledge and resources, and adhere to the guidelines established.

Focus on your company’s needs.
When building your design system, it’s important to tailor it to the specific needs of your company, rather than trying to emulate the systems of other companies—which may not be relevant to your needs.