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

Previous
Previous

Pitch deck visual design

Next
Next

Hyve pivot