Tempo Labs Design System (2024)

Crafting a Design System for an Early-Stage AI Start-up to Streamline the Design Process

Timeline
2-week sprint at the end of my internship hand-off

Team
‍Sole Design System Designer (me)
1 Design Lead
3 Engineers
1 Founder

Outcome
MVP design shipped with a majority of features implemented, impacting 200+ active users.

00 Overview

Project Overview

Tempo Labs is a SaaS AI tool that streamlines the workflows of designers, engineers, founders.

I audited, optimized, and revamped an existing but underused design system. I created design tokens, components, and pattern libraries based on current usage, ensuring consistent visual language and hierarchy.

01 Exploring the problem

The problem

The current "design system" was created, but not used. Engineers and designers at Tempo, a start-up with a constantly fluctuating team, design and code according to intuition...

"Yeah I don't think we currently have a design system. I guess our designer is just very good at copy-pasting.."
-- Tempo Labs Founder

...which also leads to negative business impacts and inefficiency internally.

Long Onboarding Time
Longer time spent onboarding and aligning new designers on product functionalities and design process.

Negative cross-functional collaboration
‍Lack of a single source of truth between design and engineer means longer ship time and inconsistencies

Bad user experience
A consistent design system at the components level would help users build mental models surrounding a product.‍

02 Tempo Design System

1. Design Tokens

Auditing the current visual design to define tokens

When auditing the design system, I realized that designers and engineers failed to use it because 1) there were more things than needed and 2) there was no documentation to explain when something should be used. I narrowed down to the12 most commonly used colors.

Using tokens to explain and document rationales

Because Tempo's interfaces often take the form of layers on top of one another, it requires multiple shades of the same color. In order to make each shade more identifiable in the design system, I used design tokens that correspond to the taxonomies of the interface.

Defining Tailored Attributes for Design Tokens

Learning from companies like Atlassian, I defined the following attributes based on the interface of the existing products. Each attribute helps explain and identify each color.

2. Atomic Design and Building Blocks

Building Everything From the Ground Up

Because Tempo's dashboard feature includes internal hierarchies (story - task - subtask), it was crucial to create recognizable hierarchy across components.

Incorporating State Management in Components

In addition, I made a UI library with variations that indicate states at the atomic level, include edge cases and empty states. This allows designers to quickly build and edit components.

3. Design Documentation

Standardizing Large Reusable Components

When documenting large components, I prioritize allowing other designers and engineers understand how it fits into the larger design system ecosystem. To do this, I explain the following aspects of a component: