Harrison Lai

Explore

Projects

Telos Design System

⁠

Screen_Shot_2021-03-28_at_8.01.17_PM.png

⁠

Telos Design System is the first design system that we created and a corresponding component library. I helped created the system from scratch.

Overview

Role

I worked with our lead designer and marketing team to come up with standard visuals, then work with Front-end developers to implement a component library.

Problem Space

I was the second designer to join the team, and with me joining the team we need to ensure that we are providing the same user experience with multiple designers. Also, with more products that are needing to revamp we need to start slow in order to move fast.

Solution

We built a design system with reusable components guided with standards and can be assembled together so that experience could be consistent across different products.

Outcome

We standardized the design and follow guidelines to provide united experience across different products. By using the design and component library we are able to reduce design and implementation time.

⁠

Check out the Component Library →⁠

⁠

Detail Process - Building the system

Visual Audit

Starting from where we are

Our first step is to look at all our current designs and gather different designs and visuals among different products to get an idea of how can we standardized them, also what scenarios would need to be considered while building the components in the future.

Design Language

Creating the basic, the language

By doing some research and looking at different design systems and component libraries, we figure out some basics that would need to be built first before we start building the components. The four main categories will be used in almost all components that you build in the future.

⁠

Typography

Text is used in almost all designs, hence the font style and all the other properties play an important role in communicating clearly. We picked only 2 fonts to keep it simple, one is used mainly for headings and the other is for body copy. We also created different scales and adding other properties like font-weight and letter spacing for different use cases and platforms.

Font family

Type scale

Font size

Font weight

Line height

Letter spacing

⁠

Color

Colors are used commonly to represent your brand and the status of a component. We have 1 primary color and black/gray along with other functional colors to better communicate our designs. Also, adding the different shades of each color provides more flexibility when needed for a different level of emphasis.

Primary

Black/Grey - Font color

Functional colors

Information

Success

Warning

Danger

Sizing/Spacing

In order to create a standard pixel-perfect design across platforms, we need standard spacing, grid system, and breakpoint. We implement “rem” and follow breakpoint to provide consistent design deliverables and better communicate with developers.

Layout

Grid

Breakpoint

Spacing: 1rem = 8px

⁠

Imagery

We don’t use a lot of images in our design, but we have a consistent style of icons to provide a standardized design.

Icon

Shape: rounded corner = 5px

UI Library

Creating components

We collected all the parts and pieces that mean every button, input fields, forms, modal and more. We look at all of them to see if we can merge some and discard some. After combining and cleaning up, we standardized them and created variations based on potential statuses, and keep flexibility in mind while building.

Basic

Font

Color

Spacing

Interaction (Function)

State (Status)

Other properties

⁠

Component Library

Implementing

In order to keep our design from being just ideas, we work with our front-end team to implement our design system in Storybook, where we can see how things will interact and if it meets our expectations. This provides a couple of advantages, first is that we can ensure the users are interacting with products that are exactly the same as our design. Second, this reduces the development time when we are using the same components in different features, and even when we need to updates, it will update in all other places, which is pretty much like symbols/components in the design, this also ensures consistency. We also implemented design tokens for basic design language, typography, and colors, which can speed up the implementation time for new components and new features.

⁠

Screen_Shot_2021-03-28_at_8.01.17_PM 1.png

⁠

Guidlines

Rules and Documentation

Documentation and guidelines are what separate a UI library from a true design system. We documented rules for the design language and each components and provided examples if applicable, this includes what each component is and when to use it. The naming of each components also provide some value information of when to use it. Also, when we are creating components we create variations for different use cases so that it could provide some examples when designers are looking for ideas.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.