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.