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
Introduction
Design Principles
Organization
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.