Design System
Create a design pattern library that will provide a consistent visual language across First Tech.
WHEN: 2019 - 2021
TEAM: 3 visual designers & 1 interaction designer
My ROLE: Managed and strategized research, manage the visual design, and user testing. Built and organized components. Built POC with Figma, UXpin, Invision DSM.
Challenge
As the product team grew in the past, there are several products were launched ranging from the website, digital sales platform, IOS mobile app, Android app, API marketplace as well as several internal applications. With a lack of a single source of truth, or enough guidance and support, it was difficult for design and development teams to execute projects as there were no universal design patterns established. It caused inconsistency among different platforms which hurts the First Tech branding.
Solution
We need to create a design system that will provide a consistent visual language. That will be the key factor to achieve efficiency within the organization in terms of coding and consistency in design.
Backstory & Timeline
Iterations on different components have been done and 60% of the components were re-designed around 2019. Plan to build the design system started in early 2020 to unify components and bring consistency.
Research
Competitive Research
Our team started researching on how other organizations organize their Design System. We looked at Google's material design, Cisco's Momentum Design system, and a few others. From there we came to the conclusion that some of the design systems are really detailed and some of them are still growing. But most of the mature system has basic components like Typography, Colors, Icons, Illustrations, Form elements, different buttons, accordions, Cards, tabs, etc. More mature ones have code HTML, CSS even React code attached to them.
Recommendations
From competitive research, our team concluded that we will start building our design pattern library with all three features below.
Components
Atomic label components which create the design system.
Specs & Pixel Spacing
Identify pixel width and height within component code and class.
Usage/Examples
Present components in a real-life example.
Target Users
Personas are model characters representing the actual user groups. We identified, two types of users, will use this Design System.
Building A Design System
Atomic Design
The general idea behind a Design System is to have scalable and reusable components that would be used as building blocks. Atomic Design principles are used to create the building blocks.
"Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner."
by Brad Frost
Atomic Structure Of The Design System
Atomic design is a methodology introduced by Brad Frost composed of five distinct stages working together to create interface design systems more deliberately and hierarchically. This concept came from Chemistry. In the natural world, atomic elements combine to form molecules. These molecules can combine further to form relatively complex organisms. The five stages of atomic design are below.
Real World Examples
Below is the example of a real-world scenario of how the Atomic system works.
First Tech Design System In Making
Step 1
Digital Brand Colors, Typography, and Grid Layout are few examples that were laid out.
Step 2
Detail design and specs are described.
Step 3
All the colors are tested with Color Contrast Analyser and accessibility guidelines are included for development.
User Testing
All the design components have gone through several testing.
Quantitative Testing
We tested each component against certain criteria. For example form elements such as input boxes, date-picker, buttons, etc. are tested inside a form. Participants performed tasks to interact with for specific components.
Qualitative Testing
We performed the 5-second test by identifying how it is being perceived after 5 seconds.
Future Scope
This is just a start. We are planning to assemble the Design System on a website that can be accessed from anywhere. This is important as vendors are working from outside who don't have any access to the intranet. Empowering all users such as designers and developers, respecting business, and changing technology are outcomes everyone can benefit from.
