SaaS Design System

Leading the revision of the design system, attaining UI consistency across 16+ key operational workflows.

My Role Lead Designer

Company  SmartBee Intelligence

Time  May - Oct 2021

Team 3 Designers and 6 PMs

Highlight

Colors

We use blue as our primary color with other secondary colors to inform users. The use of color is functional to help users identify the information.

Icons

The icons are used to build efficient communication and help illustrate abstract ideas.

Message Design

To ensure we respond to users’ actions well, we use the concept of attention level to use components.

Background

At SmartBee Intelligence, we have 5 product teams tackling issues that freight forwarders meet in day-to-day work. Maintaining design consistency becomes our primary task as we grow. In 2021, I led the revision of our design system to help SmartBee Intelligence build coherent experiences across multiple products and features.

Current Issue

After reviewing current products and discussing with related stakeholders, I noticed some key issues—

  1. There is no clear definition of how to use components. Different designers use the same component in various ways.

  2. There is no content writing guide or design principle. Product stakeholders and designers tend to create a new design that is inconsistent with the rest of the system.

  3. A strong lack of communication between product teams, and the design system doesn’t serve as a bridge to eliminate design inconsistency.

Audit Design System

To start, I reviewed the current design system. Along with the interviews with Product Managers and Designers, I found that --

  1. We've built a component library in Figma and Storybook. However, each component's usage is not defined. This causes components to function differently from one feature to another.

  2. There is a lack of communication between Product Managers. They used different terms to indicate the same objects in their products, increasing users' confusion.

  3. There is no single source link to the design system, nor do we have basic design principles or brand values to follow.

Research SaaS Desing Systems

To structure the content of our design system, I studied renowned SaaS companies' design systems, the main purpose was to understand what content they include in the Design System, and how they organize them. The systems I’ve researched include —

  • Atlassian Design System

  • Polaris by Shopify

  • Lightning Design System by Salesforce

  • Ant Design

  • Material Design System

Findings

  • Most design systems contain Foundation (design principles and value), Component, Pattern (Templates or reusable combinations of components), and Content (writing guide).

  • Message design, the way how we respond to user actions, is included in both Shopify's and Atlassian's Design Systems.

  • Content writing guide is defined according to the industry they serve. For example, Shopify put emphasis on the terms between merchants and consumers.

Atomic Design by Brady Frost

I also researched the concepts of building reusable design elements and found Brady Frost’s Atomic Design inspiring.

Our Goals

After internal discussion, we finalize our goals for this revision —

  1. Add Foundation, Pattern, and Content.

  2. Define the usage of component.

  3. Promote renewed design system to related stakeholders.

  4. Collect feedback and build future revision workflow.

Site Map

1 - Foundation

Color

When reviewing our color palette, we found that we lack a definition of how to use colors. Referring to Atlassian's color guidelines, we further add semantics to our colors.

Message Design

While we’ve made several message components, such as section messages, toast messages, etc. However, we didn’t define their proper usage as well. I reviewed and defined how to use these components based on attention levels (high to low attention), duration (the time message exists), and influence area (whole page or section).

2 - Content

To ensure the language we use fits the logistics industry standards, I consult industry experts. The writing guide is intended to help content writers produce an easy-to-understand script for logistics business users.

Examples of common writing ways on terms, units, and addresses.

Design Workshop

After revision, I hosted workshops with 2 product teams to promote updates and gather feedback. There is constructive feedback from engineers, product managers, and other stakeholders such as —

  1. How can other teammates, such as engineers or product managers, contribute to the Design System?

  2. Once there is an update in the Design System, how do we ensure related team members are acknowledged?

  3. How do we decide whether we want to add the component to our design system?

Takeaway

It is exciting to know that most stakeholders care about the design system and are eager to contribute. Through the discussion with product stakeholders, I learned that most design inconsistencies are caused by the lack of communication between teams. Design system plays an integral part in unifying design language.

In the future, we want to -

Build the workflow of reviewing designs, reporting issues, and updating the design system.