Telos Design System is the first design system that we created and a corresponding component library. I helped created the system from scratch.
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.
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.
We built a
with reusable components guided with standards and can be assembled together so that experience could be consistent across different products.
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
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.
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.
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.
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.
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.
We don’t use a lot of images in our design, but we have a consistent style of icons to provide a standardized design.
Shape: rounded corner = 5px
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.
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.
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.