Industry
Technology
Problem
During their startup phase, Scoot's web application was built by a team of engineers focused on delivering new features to their clients. A collection of custom components was built, introducing tech-debt to maintain. The team wants to introduce a design system with the goal of enhancing usability, enforcing consistency, and creating efficiency for engineers.
My Role
Defining design standards, creating a style guide, building a UI kit, and working with engineers as they build a React components library.
Project Timeline
4 weeks (plus ongoing support for the engineering phase)
Approach
Before starting, I interviewed Scoot's leaders to learn about their business strategy, cultural values, and identity system. This way I could build a design language that reflected their brand. Next, I created a process to design and deliver the following items:
​
-
Design Principles
-
Style Guide
-
UI Kit (for Figma)
-
React Toolkit
​
I also worked with the team to create design processes that will help them maintain a systems-thinking approach in future projects.
Here's the 6-step process I used to create the 4 items outlined above:

Step 1:
Audit Existing Components
There are a few reasons I wanted to start with a components audit:
​
-
To learn the app. Spending time breaking it down into individual components gave me an intimate understanding of the app's architecture and features.
-
To create a list of components at the atomic level. The audit gave me a detailed list of atoms, molecules, organisms, and templates. This served as a checklist for building out the UI kit.
-
To identify inconsistencies and inefficiencies. Documenting the various instances of a single component helped visualize these problems.
​
Here's an example, showing the many different styles of buttons in Scoot:

Visualizing the problem helped the team see the value of introducing a design system, both for consistency and efficiency.
Step 2:
Evaluate Components for Efficiency, Usability, & Accessibility
I'll use the button component from step 1 as an example. Here are some insights I shared with the team after my evaluation:
​
-
Efficiency. The efficiency gains were low-hanging fruit. The new system would give them 1-2 button components (with various properties) to maintain instead of the dozen or so they had.
-
Usability. I like to collect industry best practices from Nielsen Norman, Interaction Design Foundation, etc. Here's the Nielsen Norman article I shared for button design.
-
Accessibility. At a glance you can tell the teal color they were using for links has accessibility issues. Beyond that, I used a Figma plugin called "Spark" to check for ADA compliance when choosing text colors for the style guide. Adding an accessibility check to your design system process helps make sure your apps are accessible without having to rely too much on manual audits.

After documenting my evaluation of Scoot's components, I had a checklist of problems to solve as I moved on to the next phase of the project.
Step 3:
Design Principles
To create design principles for Scoot I referenced my notes from the stakeholder interviews I did at the start of the project. I also collected examples from other design systems to pull inspiration from.
​
Next, I defined the items I wanted to include, iterated through some ideas, and collaborated with stakeholders to identify revisions.
​
Here are the basic principles that guide design for Scoot.

Also, here is the high-level design process that helps enforce consistency, maintain efficiency, and empowers designers to spend more time solving problems.

Step 4:
Style Guide
The style guide includes design tokens and guidelines for the following elements:
​
-
Typography
-
Color
-
Grid
-
Shape
-
Elevation
​
In addition to defining common styles, the guidelines in the style guide give designers a set of standards to follow. This helps create a common design language that helps multiple contributors design with consistency.
Next up, create a UI kit that follows Scoot's new design principles and style guide.
Step 5:
The UI Kit
The Scoot UI Kit was built to give designers a set of reusable components to work with as they explore new ideas for the app. It also helped define requirements for the React toolkit that was to be built in the next phase of the project.
​
Following atomic design principles, I started with basic UI components (atoms) like buttons, icons, inputs, badges, etc. Each component was designed based on usability best practices, accessibility standards, and Scoot's design principles.
Basic UI Components
User Communication
Next, user communication components were built following Google's Material Design standards.
Navigation
Scoot uses a vertical navigation menu since it has a broad IA structure. Since Scoot is a relatively new app with a roadmap of new features, vertical navigation will provide the flexibility and room for growth the app needs.
Data Tables
Data tables are important to Scoot's users since they need to manage large amounts of detailed information, and take action. Usability best practices for actions, filtering, and pagination will help Scoot's users complete tasks quickly and easily.
Step 6:
React Toolkit
This project helped Scoot lay the foundation for their design system. The team started with a collection of custom components and a pile of tech debt, and ended with a set of design principles, a style guide, and a UI kit.
​
The next step for the team is to build a React toolkit that will serve as the source of components for the Scoot app. As the design system matures, it will allow the team to deliver new features quickly and efficiently, with a consistent user experience.