Nick Dominguez

TrueUI Design System

After 2 years of rapidly designing and shipping products at TrueAccord, I began to see the customer experience break down visually. I set out to work with our frontend engineers to begin document and rethink visual design patterns and optimize our UI for consistency, efficiency, and maintainability.

The Challenge
Building a flexible and modular design system

Designing a design system comes with its own unique set of challenges. Primarily I had to plan and organize a process for designing UI components, building them in HTML and CSS, and then making the code consumable by our front-end engineers. We also had to think through how an engineer could contribute back to the codebase and update components as needed.

My Role

I was primarily responsible for designing, building, and maintaining our UI components. I also built the initial design system website.

Process
Providing guidance and documentation

TrueUI Introduction Start

Introduction

TrueUI Design Principles

Design Principles

TrueUI Design Organization

Organization

TrueUI Design Measurements

Measurements

Process
Cataloging and documenting existing design patterns

I began to collect various design patterns from projects we had previously shipped and then I consolidated them into one Sketch project. I created Sketch components and symbols to serve as a foundation for our public-facing design system.

Process
Building a centralized location for the system

In late 2016 we created a shared git repository that deployed to TrueAccord.design as a centralized location for the system. Here the engineering team could reference and see all UI components as well as read guidelines on how to build UI's at TrueAccord.

Built with Hugo, Github and Netlify