Quinn
Using Figma variables to reduce the time it takes to create new tenants’ design system from hours to minutes.
Context
Quinn is a Seed-stage AI fintech B2B2C startup that provides AI-powered fiduciary financial plans to RIAs, Comparison sites and banks. We enable them to cross sell their products and services within the context of a financial plan without the need to hire more financial advisors.
Background
Quinn’s value proposition revolves around the ability to seamlessly integrate our product into one of our clients existing user journeys and products.
We felt their end users need to feel like they never leave the client companies site in order to trust in the financial plan they receive.
Goal
Whenever we onboard a new client, all that is needed to spin up their own white labelled Quinn platform is:
5 brand colours
Company logo
Typography
Number of other UI details (such as button radius etc)
All of this lives in a Config file, and using a multi-tenant architecture, the core product remains more or less the same code-base wise.
Challenge
Previously, every client had their own design system file and production screens file with their own variables applied (for colours, typography, radii.)
Whenever we made a product-wide change to even the smallest component, each design system and production file would need to be updated per client.
That’s 4 files that would need updating for 1 change…
Process
In order to solve this, we created 1 Master design system file that included all of the client specific components as well as all of the global components.
We then move the client variables to the production files and archived all of the client specific design system files.
The last step was to re-route all of the components within the production files to point to the Master design system file and then use the variables from the current file.
Outcome
The new setup means whenever their is either a client specific change or product-wide change, we only need to update the Master design system file. We can then publish the changes and any affected clients can automatically benefit.
When there is a client specific change, that is most often at the user flow level and can be don within the production file.
Implementing this change was time consuming and laborious, but has already saved us days and over the course of a year, weeks of time.
Impact
95% reduction in time to create new DS and production files
50% reduction in existing design debt
75% reduction in future design debt
Role
Product designer
Timeline
December 2024
Duration
1 month