All of the design tokens listed with their token name and hex code

Establishing Design Tokens to Reduce Development Time

Loanshout

Project Details
Role:
UX Designer
Team: Volunteer UX designers, product managers, engineers, and stakeholders.
Duration: 6 months volunteer project
Tools: Figma

Problem
Loanshout struggled with creating customizable white-labeled dashboards due to an unstructured design system. This led to inconsistencies and inefficiencies, as there were no clear guidelines for the design team to follow, hindering the speed and quality of work.

Solution
I implemented a design token system that streamlined the design process. By establishing a structured naming system for design tokens and creating tokens for desktop, mobile, and email templates, I improved consistency and reduced miscommunication between developers, designers, and stakeholders.

Impact
This solution saved the design team over 10 hours a week, reduced dashboard customization time, and improved customer satisfaction. It also laid the foundation for a scalable, flexible design framework that will support future white-label requests.

Example of how we assigned design tokens to each element of the design
Account Customization Settings Page
Successful white-labeled dashboards with unique branding colors