Tokens & Variables
Timeline
2023 - Present
Team
2 engineers, designer
Role
Research, design systems
Color tokens being applied through Figma variables
Overview
In late 2023, I initiated and led the implementation of design tokens for the redesign project of Cambridge Mobile Telematic’s (CMT) flagship app, DriveWell Go. I collaborated closely with two engineers to introduce a token system for the first time at CMT.
Our goal was to create an improved solution that would enable effortless white labeling of DriveWell Go, and allow our customers greater customization options for their app compared to our current offerings.
Current DriveWell Go being white labeled for another customer
Background
DriveWell Go serves as the template for any white labeled app at CMT. Customers often ask for their UI styles to be incorporated into their app, such as button shape. Currently, our framework is convoluted and does not allow for ease of customizations.
When DriveWell Go got approved for a complete redesign, I saw this as the perfect opportunity to introduce a token system. I recognized the potential for our customers to receive the customizations they have been asking for, and more.
At the time, I had limited knowledge about tokens, but I was confident that adopting them would not only enhance flexibility for our customers but also streamline development and design efforts for white label projects.
Execution
Collection of Token Taxonomy inspiration from research
I initiated research on tokens, prioritizing the establishment of a strong token taxonomy. My goal was that our team shares an understanding around naming conventions so that collaboration, handoffs, and component construction are seamless in the future.
I started by referencing established systems like Adobe’s Spectrum and Atlassian’s Design System, and also drew insights from expert articles written by Nate Baldwin and Nathan Curtis.
Naming exercise for the button component
After having a general idea of where to head with token taxonomy, I organized and facilitated sessions in Miro with engineers and other designers to establish our shared language.
To start, everyone inspected a given component and noted down names for the concept and states, if any.
We then utilized dot voting to prioritize concepts, followed by discussions to refine and ultimately choose a final option for the concept.
Based on the research done and the team working sessions, we ended up with two collections of Figma variables, primitive and semantic. Next, I would need a way to export these variables so that the engineers could start incorporating them as tokens.
We found that using the Design Tokens plugin by Lukas Oppermann works great. This plugin will also give us the flexibility in the future support tokens for other properties, such as typography, spacing, radii, etc.
Expected Impact
The redesign of DriveWell Go is still in progress, so the metrics below are what we expect to see once we can begin on white label app setup.
-
50-60%
Development time saved on WL app setup
-
50%
Design time saved on WL app setup
-
25%
Reduction in app delivery costs
Next Steps
Next in line for tokenization are size, spacing, radii, and typography tokens. I intend to follow the process we used for color tokens, ensuring that designers and developers share a comprehensive understanding and rationale behind the tokens established.