Context
At Utrust, inconsistent User Experience prompted a redesign and the creation of a comprehensive Design System.
Following Atomic Design principles, the system offered adaptive components, while accessibility and a unified design language were emphasized. The impact was significant, with faster workflows and improved collaboration between designers and developers. The Design System continues to evolve and has been instrumental in revamping the Payment Gateway and developing a new product, with Storybook serving as a React Components hub for easy maintenance and documentation.
"Once we get past the tedium of building the same thing over and over again we can focus our energy on more worthwhile tasks like accessibility, performance, and iteration. We can work on the fun stuff rather than the tedious things."
-Micah Godbolt
As with many other fast-growing startups, Utrust was having inconsistent User Experience mainly due to a lack of a design system.
Auditing current products
Utrust had 3 main products when we started on this initiative. **Merchant Dashboard** for business customers, **Payment Widget** for buyers, and a very detailed **Management Tool** for internal users.
We were about to revamp the Payment Widget to Payment Gateway with new functionalities and a much better experience so it was a good time to unionize the design language and fix the inconsistencies.
To provide:
- The same language between devs/engs and designers
- Consistent user experience across platforms/products
- Time savings through not designing/implementing same-ish components each time
- To create a structure for language, communication, file organization, documentation
Inconsistency
Not having a structured design system means every new designer or every new feature will have the potential to be remade slightly differently. These slight differences add up to repetitive work and worsen the user experience.
Atomic Design
The system follows [Brad Frost](http://bradfrost.com/)'s Atomic Design. I had been using the same structure since the studio days, adjusting it for each team and product.
Accessibility
I believe every designer should go to extra mile to make sure their designs are as inclusive as possible. So I test to make sure they meet [W3 Standards.](https://www.w3.org/TR/WCAG20/).
So the design system provides the text color - background color combination right on the color palettes to guide the current and future designers to use accessible colors.
Adaptivity
Our components are built to be adaptive. Some of them are designed to be displayed and worked the same across platforms but some of them are specifically designed for each platform. For example; data-heavy tables are toggleable on mobile and displayed as full rows in a more classic view on desktop views.
Over-documenting is underrated
I like to document my designs excessively. I explain my thought process, how I like things to be implemented, and why it's supposed to be implemented as described. Over the years I've been doing this I got excellent feedback, people seem to understand more and genuinely feel that they are designing with me, their thoughts are appreciated and they are a part of the design process. I leave documentation cards along with some discussion point cards for people to leave their thoughts openly.
At Utrust we've included the language rules in our product design library. This was done to ensure consistency across texts and the communications we have with our users.
Title rules:
Titles should always be in title case, heavier weight than the paragraph, and should follow our title text styles.
UX Wording:
We prefer to have friendly wordings, this means abbreviations, emojis, and puns are welcome!
Impact
Design systems change with the products they serve. This one is used by three products, and the impact showed early.
It started on the Payment Gateway revamp and rolled out to two more products. So far:
- Designers are faster at building new layouts and pages.
- Designers are way more focused on solving the actual problem rather than unwillingly focusing too much on how things look together.
- Developers are much faster at implementing the pages.
- Design and Developer relations are much better because we are all talking the same language.
The design system is living on Storybook as React Components. This way the Design QA is much simpler and we have documentation on the implementation as well as documentation on the designs.