Tradebeyond • 2024
Design System
Google Material 3
Atomic Design
Design Tokens
Advance Figma
Background
When I joined Tradebeyond, I notice the legacy "design system" is poorly maintain and is basically unusable. This situation not only slow down design process since there is no system to follow, it also create a inconsistent experience between different product. As a result, I took the initiative to establish a design system for Tradebeyond.
Chanllenges
The challenges we face can sum up in below:
(a). Missing a centralise & unify components library. Every past designer creates their own components in separated files with no organization. Causing a vicious cycle that makes the component library more and more fragmented and messy.
(b). No foundation to follow. Take color as an example, If I want a color that convey success, I simply can't find one because no such foundation color token is defined. Result in all sorts of different colors used in different Tradebeyond's products
(c). Lack of documentation and design guidelines.
To solve these problems, I took ideas from the famous atomic design to start with.
The Atomic Design
Below sections will go through how I uses the concept of atomic design and applied to Tradebeyond's products, with the inspection app - QA Pro being the primary example. Click here to learn more about "Inspection Pro" first.
[Atoms]
To start off, design tokens needs to be defined. This ensure every UI element uses the same set of token instead of each designer coming up with their own values. These "atoms" can range from color to radius corner, and icon to font size.
One thing to mention is Figma's 2023 update has made creating and managing design tokens easier through the "variables" feature. So after setting up foundation token, we can match them to semantic token for the UI element to use. These semantic token uses name that describe their purpose in short and clear form. Below are some color token for Web Platform.
Web Color Token
As for the Mobile App (e.g. Inspection Pro), since we are using Google's Material 3 Design System under Flutter framework. I can use the same set of foundation token but match them to Material 3 semantic token. Creating a consistent color between Web platform and Mobile product .
Mobile (Material 3) Color Token
[Molecules]
Once we have the "atoms" ready, we can create the components. In Inspection Pro, although there are already handful of components ready to use in Material 3 library, some custom components are still needed.
Some examples of Inspection Pro's components
[Organism]
Next, multiple "molecules" combine to form "organism". In another word, larger component that are made with several smaller components.
This checklist card is form by components like Inline Table, Text Field and Icon Button.
Use case : During inspection, the inspector might need to answer a series of question. They do so by completing these checklist card
This section of UI is combine of Result Chip, Text Field and Text Button.
Use case : A code check section is where the inspector need to scan the code on the product to see if it matches with the item code.
[Templates]
With various UI component in place, it is crucial to setup some template or pattern for these component to fit in. This can ensure a consistent UI/UX across the app. Here are the 4 main templates of Inspection Pro.
Sectionize Page
Sectionize Page w/ List
List Only Page
Short Section/Mobile Table
Configuration
Components are made to be configurable with different properties using feature from Figma like "Swap Instance", "Nested Instance", "Variant" & "Boolean Properties" etc. For examples, designer can toggle different element that appears in the checklist card, or change the field to different type or state.
Accessibility
All UI component color contrast passes the WCAG AA standard to meet the accessibility requirement. Both normal and large text have a color contrast larger than 4.5 : 1 .
Final Result
After months of work, I have set up a initial design system for Tradebeyond. With 2 foundation file of color and icon, where the centralise color token/palette and icon is stored. Then, products from mobile and web will build their own components base on the foundation. All of the components built will also be placed inside a single file for clear documentation and organisation.
