TrueUI Design System

TrueUI Design System

View Live Project

Background

After 2 years of rapidly designing and building the product at TrueAccord visual cohesion and user experience began to break down. Emails began to look and feel differently from landing pages. Landing pages began to behave differently from customer account dashboards. So it was clear that a reusable system of visual user interface components was needed for the team to continue to rapidly build and ship product while keeping quality high. With a strong focus on consistency, efficiency, and maintainability I set out in to build the company's first design system.

Challenge

Perhaps the biggest challenge we faced was answering the "syncing question". How could we ensure that the system was updated and reflected the latest and greatest from the design team? Design systems can be unidirectional or bidirectional. Components can be purely consumed from the system by the engineering team and other designers. Bidirectionally they can also be consumed and fed back by creating new components. For us, we decided to take a unidirectional approach. One member of the design team would design, build and maintain the repository of all UI components. This would ensure that the system could scale and reduce the potential for dissonance that could occur by having other team members contributing to the system.

Another great challenge we faced was engagement. Getting the team to use the system was the goal. I set out to solve this challenge by driving as much awareness as possible. Showing the value behind TrueUI was critical. This meant being intentional with team conversations and even presenting the system formally through team meetings.

Role

I was responsible for following phases of the project:

  • Interaction Design - Identify and design interactions and behaviors
  • Visual Design - Design user interface components, typography and layouts
  • Frontend Development - Build HTML and CSS for engineering team

Work Samples

For the structure of the design system, I used Brad Frost's Atom Design framework to organize and categorize the various components of the design system.

TrueUI Atoms Global

Color Palette

TrueUI Atoms Typography

Type Scale

TrueUI Atoms Images

Branding Specifications

TrueUI Atoms Buttons

UI Buttons

More Case Studies