Creating a multi-theme design system

Client
Digital Turbine

Role
Product Designer

Year
2024

The Problem

Our biggest user-facing product is a white label product offered in two different themes. This means that on any given day our sales and product teams could be showcasing our product to six different clients, all with different branding. The design team would have to spend hours recoloring our prototypes, mentally tracking the phone carrier's brand primary and secondary colors. While this theming structure was easy enough to distinguish, it led to a very large Figma library that ran slowly and was difficult to maintain.

That’s where all my fun started.

Research

I approached this issue as I would any other project because at the end of the day it was a user experience problem, except this time the end users were myself and my coworkers. I started with an audit of our current component library and color library. I documented how many surfaces, buttons, and text styles tracked to the same neutral-## color.

I began consuming all the Dan Mall content I could find on the internet and found inspiration in the documentation created by companies like Ford and their use of tokens to create a design language that spanned all their car models’ UI. 

Implementation

I established biweekly component governance meetings to create a space to review any new components and allow other designers to present components or styles they would like to see added to the system.

We slowly rolled out our updated design system while deprecating our previous one making sure all down stream pages and legacy files were not broken due to the sudden change.

Accomplishments

  • We reduced the time of recoloring prototypes from 4+ hours to seconds with our new variable library

  • The design system became a source of truth for dev and QA teams and helped improve consistency of the product. 

  • Our over ten products at the company had a shared naming convention. This exercise extended to our files and layers, meaning any designer could pinch hit when needed and would find a familiar file and naming structure.