Establishing design tokens to reduce development time

Date:

January 2022

Deliverables:

Design token documentation, user research

Overview: Loanshout, a mortgage SaaS platform, introduced a new customization feature for Loan Officers who wanted to white label the product. Loan officers provide their logo and color preferences and the design team will design a unique dashboard tailored to their brand. I helped design a straight-forward white-labeling system through the implementation of design tokens into the existing design system at Loanshout. This system cut dashboard design and development time by 88%.

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

Problem

LoanShout was facing challenges in creating customized client dashboards for loan officers due to a lack of guidelines and direction within the existing design system, creating inconsistencies within the site.

The existing design system needed to be structured and organized in order to enable the design team to produce multiple dashboards at a fast rate.

define icon

Project Goals

Our overarching objective is to create a comprehensive solution that caters to these diverse needs, closing the knowledge gap surrounding orca vocalization, and mobilizing a broader community to actively contribute to the preservation of these remarkable creatures.

This multifaceted challenge involves various stakeholders with unique goals.

🏆
Brand Leadership: Establish AB Photo & Video as an industry leader through a comprehensive website redesign that reflects their expertise in architectural photography.
📈
Optimized User Experience: Address usability issues and enhance the overall user experience of the website. Simplify the user flow to lead to increased engagement, satisfaction, and conversion rates.
🎥
Diversify Services and Market Position: Enhance market competitiveness by differentiating AB Photo & Video with the introduction of videography services and expanding offerings to attract a wider range of luxury architectural clients

The Process

Nomenclature of Tokens

The development of a comprehensive naming system was a crucial component in the success of our token implementation. Following extensive research, brainstorming, and cross-functional team discussions, we arrived at a naming system that encompasses four categories: Significance, Usage, Prominence, and State. This meticulously crafted nomenclature draws inspiration from widely adopted design systems, such as Asana and REI. The implementation of this naming system has resulted in streamlined communication and expedited workflows, culminating in an improved user experience.

An Excel table listing all of the design tokens and their assigned name.

Flexible system across all framework

Our platform boasts a flexible system that seamlessly integrates with all frameworks. To streamline our process, we assigned a unique token to every element across our desktop, mobile, and email templates. However, this posed certain challenges as there were instances where numerous tokens were missed, causing miscommunication amongst developers, designers, and stakeholders.

To address this, we developed a new set of tokens for our email templates to differentiate between our platform and emails. Moving forward, we learned that documentation was integral to the success and sustainability of our system. We also created several spreadsheets that included quick start guides, best practices, and our design principles.

Ultimately, we found that the introduction of email tokens was necessary, but could have been made easier had they been included in the initial naming process.

Example of how we assigned design tokens to each element of the design

Account Customization Settings

Using LoanShout’s newly established design tokens, we introduced a white-labeling customization service to its customers. I designed the account customization settings feature for loan officers to submit their white label requests. The design tokens contributed to the development of an efficient white label system that enabled the production of multiple white label requests in a shorter time frame.

Account Customization Settings Page

Challenges

Customizing LoanShout's interface to match a customer's branding presented some difficulties. While changing the color hues appeared to be a straightforward solution, it became clear that certain hues did not complement LoanShout's existing color palette. Furthermore, we encountered missing components like checkboxes, which required adjusting the tokens throughout the process.

Successful white-labeled dashboards with unique branding colors

What's next for Loanshout?

In July 2022, market volatility forced the UX design team to pause their work, but not before achieving significant progress with LoanShout Design Tokens. We successfully created a white-label design system from the ground up, developed more than 20 custom label products in a fraction of the time, and educated the team on the value of a common design language.

In retrospect, we learned some valuable lessons from this experience.

  • The design system is a living ecosystem that requires dedicated attention to maintain and evolve alongside the product's development.
  • A common design language fosters effective communication across designers, developers, and stakeholders.

With big plans for the future of LoanShout, the pause for design is a good time to take a step back and reflect on what we have accomplished. A library of design tokens, resources, and documentation have been created for future designers to easily pick up where we left off.

This is some text inside of a div block.