Timeline: Feb 2022
Loanshout, 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 would 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.
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.
Outcome
Saved the design team about 10+ hours of work a week and established consistent branding as well as reduced dashboard development time, enhancing efficiency and customer satisfaction.
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.
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.
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.
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.
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.
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.