TrueUI

TrueUI Design System

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.

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

Providing guidance and documentation

TrueUI Introduction Start TrueUI Design Principles TrueUI Design Organization TrueUI Design Measurements

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.

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.

AVVAY

Building a brand new online marketplace to serve creative professionals.

TrueAccord

Bringing to market a more humane and customer focused debt collection experience.

Tenable Network Security

Making online security products easier to use.

AVVAY Booking

Redesigning the booking experience on AVVAY to reduce complexity and increase transparency.

Toggle Manager

Designing a more simplified and polished experience to the Toggle Manager web application.

AVVAY Pro

Building a brand new platform for creative professionals and production agencies to connect and work together.

TrueUI Design System

Designing and documenting user interface patterns for consistency, efficiency, and maintainability.