Had the opportunity to work at Sweepr and help to create a design system to align thier suite of web apps.
When I first joined sweepr invested in four web apps:
A CMS for creating self-support content
Create recognizable aliases for interaction
Self-supporting monitoring for customer support
A monitoring service for interactions
The problems here were the classic case of designing multiple products without a centralised design system:
Inconsistent styling, design language & patterns across the different products
More time spent on designing new components, patterns and less on the actual problem
We carried out a design audit on all of the existing products to get a sense of the polarity and inconsistencies between each of them.
It also provided us with data on which components are used most frequently, allowing us to determine the elements that should be focused on first.
One of the most important aspects of any digital product is the typography. We researched and trialled a number of super families to determine
one that could be used across our products. Eventually, we settled on using Inter for its versatility, readability at smaller font sizes, and its numerous OpenType features.
Before creating our palette, we first had to determine the colours that we wanted to support, such as:
State colors (such as success, info, error, & warning)
Once we had done this, we then needed to create the different accent from each of the base colours. Therefore, each base colour would have 9 accents (e.g. green-100 to green-1000) to provide us with plenty of versatility for each base colour.
Our design audit had provided us with a list of components currently being used that we would need to redesign, but I also carried out a lot of research on other design systems to collate data on other components that we may need in our products.
There was also an organic nature to this, where components would be created for the design system when and where they're needed.
Having your one source of truth in Figma is great for the designers but not very accessible to developers for numerous reasons.
To combat this we created internal documentation to showcase the design system components in a more accessible method, as well as explain best practices, show code examples and link to resources.
The first product I started to work on after we had created the design system was the Interaction Editor.
This meant more time could be shifted towards higher complexity tasks such as UX thinking, structure and design.
Creating our design system had a large impact on the overall company. It allowed us to create new products and features more efficiently and effectively.
It also provided our engineering team with a one source of truth for all components & styles, allowing them to code more efficiently and produce more consistent, accessible components.
Copyright © 2021 Kenneth Okereke