Skip to content
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.

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.
Group_10.svg
42.8 kB
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

Group_11.svg
41.3 kB
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
Group_2.svg
134.5 kB
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
Group_3.svg
36.6 kB

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.