Updating and Creating a Design System
My role: UX Design Intern, Visual Design
Collaborators: Principal Product Designer, Sr. Product Designer
Duration: 5 Weeks
Tools Used: Figma
Background
Tesorio is a startup company in Fintech that has a platform for managing cash flow performance of money going in and out of a company.
A design system was set up in the past by the design team using Sketch, and has recently been moved over to Figma. The front-end (FE) developers had their own code component library set-up in Storybook, based on the patterns seen, and the work they implemented. I came on board to help align the two component libraries, by developing a new design system and design tokens, so there will be better consistency across designs and patterns in product distributions.
Goal
The goal of this project was to create and update the design system and design tokens to align with both libraries used by the design team and FE developers.
Foundation
Before starting to work on the new system, it was important to discuss what principles were most important to us in order to set a solid foundation.
Accessibility - Going forward, we wanted to transition colors and font size to be accessible to others. It was important to sort through what we were using and compare it according to Web Content Accessibility Guidelines (WCAG). If guidelines were not met, those were the changes we needed to make.
Consistency - As the product continues to grow, we needed to make sure our design patterns were consistent across the board. That meant sorting through the product and looking at what buttons, fonts, header size, and other elements we were using matched across the platform.
Tokens
Tokens are central pieces of UI information that can be used across platforms to represent design elements such as color, typography, fonts, and more. We decided to use tokens as a better way of organizing our library and to have an easier way of updating the design system in the future.
Colors
Our color palette is divided up by primary colors, accents, and neutrals. Our blue palette is a custom palette chosen by the design team. Since our blue’s are custom, they are labeled between 100-1000, so if we choose to add a new color down the road, it will be easier to add in for coding purposes (example: blue-150).
We updated our accent and neutral colors with a palette inspired by Radix-UI. Although we have various shades from light to dark, we only used a select few based on accessibility and for specific use cases.
Our yellow palette is at a smaller scale since it’s currently being used for warning states only.
Accessibility
Before handing over our new color palette to the developers, we wanted to make sure the colors we had matched with WCAG, so we tested each color and took note of the contrast value.
Values:
> 4.5 = good contrast
3 - 4.5 = acceptable for text 18pt and larger
< 3 = low contrast, do not use for critical text
These values provided us with a better understanding of which colors can be used, and how they can be used against a contrasting background color.
Sample palette with accessibility values
Color Tokens
Once we decided these would be our color palettes, we turned these colors into tokens. This way, if we needed to make global changes, all we would have to do is go into our token library to make the change, and they would revise all elements using that color.
Typography
We used Roboto as our main font with a base size of 14px. It was important to go through the product and inspect the sizes currently being used from the smallest to the largest. We also needed to check that all fonts were the same, and if not, where they were being used. Then we did the same inspection for font weight and line height.
Font weight varied based on the hierarchy of its’ use, and line height was primarily set to standard.
Headings
In order to ensure consistency, I sorted through the product using the Inspect tool to verify we were using the correct header sizes on pages and cards. I took screenshots of headers and took note of what size they were to go over with the design team. This way we could discuss the correct size and clarify guidelines before making changes.
Global Text
After reviewing our typography guidelines, we created global text styles. This way we could standardize our specifications and both the designer and developer would be aligned on how to carry out future product changes.
Measurements
Spacing
For our spacing, we used multiples of 4px. This was applied to padding within components, as well as the space between UI elements and alignment on a page. We decided to use a range of 0px-80px to provide the flexibility for adaptive layouts. These measurements were added to our token library and were promptly implemented.
Summary
Tokens are an integral part to building a successful design system. They are the atoms of the molecule. Standardizing these elements provides faster iterations for components and other design patterns. I added each of these tokens to our global styles in Figma, which supported our next steps in building components.
Components
Components are reusable UI elements that allow designers to quickly generate mockups and provide an easier system for making changes to design patterns in the future. They contain the colors, typography, and guidelines provided in the design system and token libraries. Components also provide a visual design for designers and are the code for developers to implement in the final product. For this project, I will be discussing a few components that I created: Specialty buttons, forms, and notification components.
Note: For each component that required multiples or variants, I created an atom component where all changes to the design would stem from the atom. This way I would only have to change one master component that administered the revision across the component library. For example, our disc button and icon button groups stem from an atom component.
Specialty Buttons
There are many types of buttons that can be used. Our primary, secondary, and transparent (tertiary) button components were put together before I started on the project. The buttons that I helped build were the specialty buttons. These buttons had different use cases, but are used in many areas throughout the product.
Button Group/Attached vs. Button Group/Spaced
Our grey button group are attached buttons that supply multiple actions. This is a unique button, that is solely for the bulk select feature.
Our blue button group are grouped secondary buttons with spaces in between. They are used in workspaces to provide actions of lesser importance on the page. However, they must be paired together because there is no significance of hierarchy.
Button Toggle
Our button toggle was another unique button. We had many areas where the primary and secondary buttons were attached, but users had difficulty distinguishing which button was in use. Due to this confusion, we decided to create the button similar to a toggle (switch), where the button in use enlarges and is selected as a primary button.
Forms
The form components consist of text fields and dropdown fields. These are used when a user needs to input textual information. Since we use all different variations of these forms, I decided to create a master component in Figma that has the ability to hide or show the content we want to use. From there, I created specific types of form elements, as well as forms with various states (i.e error, success, warning, and informational).
Here is a sample of how I used this master component to create the various forms shown above.
Notifications
Our notification components consist of alerts and toasts. Alerts are messages that require long term attention, whereas a toast may appear short term after an action was rendered. We have notifications in four different states; success, warning, error, and informational text. Each state is color coordinated in order to catch the users’ eye and to inform them of a matter that requires attention.
Design Guidelines
In order for the team to properly use our new components, I created design guidelines on how to use each state. These apply to both notification and form variants.
Outcome
During my time working on this project, I was able to provide a jump start on updating the design system and tokens for the team. Design systems are an ongoing project and they will always require upkeep. This was a huge need for the design team, so I worked on the more critical pieces first to help them move forward. Each component was extremely detail oriented and there were always questions about how we wanted it designed, or how it should behave for the designers in Figma and the developers in Storybook. In the end, not only did we complete those tasks, but I was able to provide some miscellaneous components (modals, calendar picker, action bars, and tooltips) and page templates for the designers to use as well.
This project has given me a huge appreciation for what a good design system can do. It provides better work efficiency and collaboration for designers and developers to use in the future. Furthermore, this project has allowed me to really hone in on my Figma skills and has given me the confidence to work on prospective design systems.