BACKGROUND
My client is a prominent player in the fintech sector, specializing in providing innovative financial solutions and services. They aimed to offer customizable digital platforms to banks and financial institutions, enabling them to enhance their customer experience and streamline their operations.
The objective was to scale a basic version of a digital onboarding workflow to accommodate over 20 financial partners within the next quarter.
OBJECTIVE
The goal was to create a flexible, scalable, and brandable white-label product using a robust design system that could adapt to various brand identities and operational needs in the fintech space.
MY ROLE
As the project lead, I was responsible for strategic oversight and hands-on implementation of the design system. I facilitated collaboration between stakeholders, guided developers, and documented the design process.
Additionally, I worked closely with two key clients, conducting grooming sessions, reviewing user stories, and planning feature deliveries to align with the roadmap. This tailored approach allowed us to create customized flow solutions that addressed each client's unique needs.
WHAT IS A WHITE-LABEL PRODUCT?
White labeling involves rebranding a single product or service for multiple companies to sell as their own. This approach allows manufacturers to focus on production while resellers can concentrate on marketing and sales.
WHAT IS A DESIGN SYSTEM?
A design system is a collection of reusable components and standards (colors, typography, UI elements) that ensure consistency and efficiency across a product’s interface. It serves as a single source of truth for design and development teams, streamlining collaboration and reducing discrepancies.
WHY DO WE NEED A DESIGN SYSTEM FOR A WHITE-LABEL PRODUCT?
In fintech, where regulatory compliance and user experience are critical, a design system allows for seamless updates across the platform. This minimizes the risk of errors and enhances the overall user experience by maintaining consistency.
CHALLENGES AND SOLUTIONS
1. Creating a design system based on an existing workflow that did not use standard controls.
I utilized standard components in Figma to recreate the existing workflow, originally designed by developers. This standardization process helped identify essential components needed for a comprehensive design system.
2. Supporting dynamic content.
We migrated the existing translation schema to a Crowdin-powered CMS for efficient manual translation of keys. Each partner was responsible for translating the app during the onboarding process.
3. A single designer managing day-to-day tasks alongside the design system development.
To expedite the process, I began by duplicating an established design system, leveraging standard specifications and pre-built components, then adding unique elements to create a distinct appearance.
4. Understanding partner customization needs without direct communication.
As the product was not publicly available, we analyzed offline processes and engaged with business analysts who spoke with sales teams. This approach allowed us to validate our assumptions once partners were secured.
RESEARCH
I chose a material design framework for its customizability, alongside exploring other systems like Shopify’s Polaris, Atlassian, Microsoft Fluent, and Ant.design.
Framework
Rather than immediately diving into identifying each component within our existing applications, I chose to take a step back and consider the entire framework. My aim was to construct a robust and scalable system.
I followed the atomic design methodology, which involves breaking the system down into four tiers: Elements, Components, Patterns, and Themes.
1. Elements
Elements form the foundation of the entire design system. This layer includes colors, typefaces, grids, and spacing.
1.1 Typography
We had multiple variants available as the workflow required extensive use of explainer texts, tooltips, disclaimers, and nested components.
Configurations:
Font family
Font size (in px for Figma and rem for development)
Font weight
Line height (generally 1.5x font)
1.2 Spacing
I adopted an 8pt linear scale for elements, with a 4pt half-step for spacing icons or small text blocks. I prefer a 4pt baseline grid for typography, ensuring that the line heights of my font choices are always divisible by 4. This system is designed to reduce confusion and facilitate easy implementation.
1.3 Colors
Color is a critical aspect to consider, especially for a white-label product that aims to partner with multiple companies with distinct branding.
While changing color values might seem straightforward, it can be complex when rebranding an app. This process can lead to numerous instances where the design breaks down, resulting in developers and designers spending hours on manual overrides for new clients.
Therefore, we needed a granular approach to control colors in our UI. Over several months, we introduced and tested dozens of new color tokens that gave us full control over accessibility and the final outcome when applied to specific UI elements. These tokens included:
Brand Color Tokens: Primary and secondary colors provided by the partner based on their branding.
Base Color Tokens: The base shades of grey, black, and white are typically left unchanged, but it’s useful to have the option to configure them in case a brand’s primary and secondary colors match the Pantone.
Role Color Tokens: We defined component roles, such as button background color, text color, and secondary button border color, while inheriting the branding colors. This allowed us to have complete control over the UI library and even invert the theme for some partners from light to dark if needed.
Additionally, we built the capability to add new colors, such as those for links, tooltips, and disclaimers, in case the brand colors were insufficient.
2. Components
Standard components were built using the atomic structure. Some examples include buttons, input fields, and modals, which were designed to be reusable and adaptable to various contexts within the application.
3. Patterns
Components are made of elements and perform a well-defined function in the application. Patterns or modules are a valuable concept for a white-label app since they enable us to modify specific configurations while maintaining the remainder of the app’s design. This allows the design system to facilitate an agile product development process for both designers and developers.
4. Themes
Now comes the exciting customization part. We put together a designer's playbook that outlined the following steps to onboard a new partner:
Replicate the theme foundations file with the naming convention: Theme-Partner
Replicate the base workflow file with the naming convention: IWL-Partner
Replace the logo
Adapt the font family
Adapt the brand colors
Define the base colors
Define the role colors
Ensure accessibility with A11y — Color Contrast Checker
Publish the theme file
Apply the new theme to the workflow file
Replace the partner's name in the workflow
Publish the workflow file
Share the standard journey with stakeholders
Customize the journey based on inputs
Once approved, make the same changes to the mobile version.
Check for any prototyping glitches and do a walkthrough with a fellow developer.
Although the original theme file is more comprehensive, below is an example of how the theme was implemented for three partners, which represents only 40% of the original configuration.
Impact in Numbers
500+ interconnected components
12 partners onboarded successfully
500% faster onboarding for new partners
20+ hours saved by the design team
80+ hours saved by the development team
100% consistency with customizability
Documentation — The Cornerstone That Holds It Together
Documentation is a crucial element that holds the design system together. To promote the correct use of styles and best practices, we documented them and made them easily accessible to the whole team.
Apart from documenting styles, we also documented the reasoning behind the system, which helped other team members understand why certain decisions were made. By doing so, we were able to identify gaps in our reasoning and evolve the design system accordingly.
Additionally, we documented workflows, including those for creating components and styles, and for onboarding a new client in our design system.
