Design System

The Problem - Too Much Time Spent Sweating the Small Stuff

When I first joined DiveThru, it was a rapidly scaling startup with big plans to revolutionize quality mental health care access. However, I quickly realized our lack of a formalized design system was slowing down our design and development workflows and causing confusion during the design handoff process. Meanwhile, I was also noticing inconsistencies with our visual language that were impacting our brand identity and the cohesiveness of our product. 

Scope and Considerations

As the sole Designer, I had limited time to develop the design system alongside other design work. However, the design system had to scale fast, as I discovered new use cases daily. I knew I had to approach this challenge strategically.

Working with the Founder and developers, we established a set of short-term and long-term priorities. Rapid scalability and modularity were some of our biggest priorities. This meant compiling reusable components and taking a templated approach to design where applicable.

Project Goals

Design Process

My process for building this design system consisted of 4 main phases: audit, research, execution, and implementation.

Auditing existing layouts and patterns

The first thing I did was conduct a thorough audit of our branding guidelines and all visual components within our app and website. I took inventory of every UI element, including icons, imagery, brand colors, and text styles. I then made note of all the visual inconsistencies I came across.

Key Findings From Audit: 

• 4 different shades of turquoise are being used as our “primary” brand color.

• 7 varieties of body and heading text within our app and website.

• Conflicting branding guidelines and direction.

• Duplication of common components.

Research

I’ve built UI kits in the past, but nothing compared to the complexity of building a robust design system. I equipped myself with as much information regarding the common standards and practices of the best-in-class Design Systems.

I began my research by studying existing design systems such as Shopify’s Polaris Design and Salesforce’s Lightening Design. I took note of their guidelines and design principles to get a better understanding of what industry-standard design systems consist of. I also discovered the Atomic Design methodology created by Brad Frost and was inspired to use the approach.

Uniting under shared principles

Once we had an idea of the direction we were going in and what methodology we wanted to follow, I put together a set of guiding design principles to help us stay aligned on a common goal. I thought about DiveThru’s mission and focused on design principles that would unite our team while serving as a guide for our new approach.

Execution

As previously mentioned, we chose to follow the Atomic Design methodology to compile the building blocks of our design system. The principle of breaking down interfaces into smaller components and organizing them by complexity made the whole process easier to understand and less daunting.

Atoms

Atoms represent the most basic interface elements. They serve as the foundational and supporting structure of an interface. Our atoms included spacing blocks, a grid system, a color palette, drop shadows, buttons, text styles and other basic components.

Spacing Blocks and Grid System

The foundation of any good design system is the spacing and grid system. A well-defined spacing and grid system can increase the efficiency of the development process. It can also elevate the overall look and feel of a design. After talking with the development team, we agreed to go with an 8pt grid system that consists of a 12-column grid and an 8px baseline grid.

The 8pt grid system was useful for managing the spacing and sizing elements of our designs. The core principle of the 8pt grid system is that each UI component is a multiple of 8. This allows you to space, and size components concisely, leaving no room for guesswork while designing

Color Palette and Drop Shadows

The audit I conducted at the start of this process revealed several inconsistencies with our use of brand colors and drop shadows. The proper use of color within a product goes far beyond just aesthetics. Color supports the purpose of content, and can communicate things like interactive states, hierarchy of information, and distinguish differences between distinct elements. 

With this in mind, there needed to be intentionality with the use of our brand colors. I assigned each color a specific role based on its function within the interface. Defining color roles and drop shadows would make things easier to modify and customize as the design system expanded.

Typography

We use two different fonts for our app and web-based products. Montserrat for headings, and Archivo for body text, subtitles and button text. These two font pairings work well together because they’re versatile and easy to read on mobile devices and desktops. 

Buttons

A single button can have many different states. The most common being active, hover, focus, and disabled. I used all five of these states for the DiveThru design system, along with three different button types. The three button types include Primary, Secondary and Tertiary.

Molecules

Once our atoms were defined, combining them into molecules was the next step. The molecules I assembled for our system included form labels, input fields, and drop-down menus.  

Input Fields

The input fields I created for the design system also accommodated different states. With accessibility in mind, I placed the input field titles above the input fields so they wouldn't disappear when selected or when users enter their information. I also included error text for incorrect text inputs instead of just relying on color to display input errors.

Organisms

Organisms are a collection of molecules and atoms that are bonded together to form the complex individual components of a design. Some of the organisms I assembled for our design system included a website header, footer, login panel and app bottom navigation bar. 

Implementation

Asynchronous communication

A collection of components isn't enough to maintain a successful design system. It’s imperative to provide enough context to facilitate collaboration with internal stakeholders. Where possible, I aimed to:

• Provide rationale behind my design decisions with the leadership team and development team.

• Showcase the interactions, behaviours, and various states of components during development handoff.

• Cite my research sources and create in-depth documentation and guidelines on when and how to use the design system.

Impact

A design system is a living, complex organism in the sense that it will continuously evolve. Our design system is still a work in progress, but that's how it's supposed to be.

Overall, the design system played a key role in:

• Streamlining the design process within a lean startup environment.

• Creating a more cohesive look and feel across all our products.

• Providing developers with a single source of truth and a set of reusable patterns and components. 

Final Thoughts & Takeaways

Building DiveThru's first-ever design system was a massive undertaking with many challenges. It was a valuable experience as it allowed me to develop the necessary skills needed to confidently build and contribute to any design system in the future.

< Therapy Booking Case Study

Let’s Connect

Get in touch for opportunities or just to say hi!