White-label

design system

White-label design system

Unifying Finleap Connect's open banking product portfolio through a shared and well documented design system with customizable tokens.

Unifying Finleap Connect's open banking product portfolio through a shared and well documented design system with customizable tokens.

Industry

Fintech
Open Banking

Timeline

Mar 2022 - Jul 2022

Core team

Jacobo Busto - Chief Design Officer
Sonia Castillo - Brand Designer
Patricia Román - Product Designer
me - Product Designer

My role

White-label design system initiation
Implementation of the new branding
Handoff & documentation
UI & supportive material design

Introduction

Introduction

Finleap Connect* is a leading independent open banking platform provider in Europe empowering banks and financial institutions with cutting-edge financial tools.

The company had experienced rapid growth through acquisitions, which, while positive, created a significant issue: the product portfolio became fragmented. Each acquired company brought its own tech stack and design language, leading to inconsistencies across the product portfolio. This made it difficult to sell as a unified offering, not to mention slowing down the design and development processes, and creating inconsistencies for the end-users.

To address this issue, we set up an ambitious objective to unify the entire product offering through a common Design System that would simplify our internal workflows and provide more cohesive and professional experience for our clients, who needed easy-to-implement, customizable solutions that aligned with their own brand identities.

My role as a product designer was to kick-start this initiative, handle our cross-team collaboration and contribute my part to the development, documentation and handover of the shared design system, that by the end of the project replaced the different systems we had in place.

*The company was renamed as Qwist after the project ended.

The challenge

The challenge

We faced a portfolio of 4 product lines of comprehensive solutions from connecting to banking systems to using open banking data for verification, risk profiling and opportunity identification.

Our core challenge was that these product lines were managed by multiple teams and we couldn’t start from scratch in terms of development, as all the products were already out and running. We needed to come up with an agile and global approach to accomodate all the teams' needs.

Additionally, our bonus challenge was that the company had just gone through a rebranding which we needed to adapt within the design system and use as the default styles to showcase our products and brand identity to our clients.

We had a portfolio of comprehensive financial products, but they lacked a cohesive visual language, creating a disjointed experience for users and
making it difficult for the company to present a unified brand.

We had a portfolio of comprehensive financial products, but they lacked a cohesive visual language, creating a disjointed experience for users and
making it difficult for the company to present a unified brand.

Design system selection

Design system selection

The first step in building our unified design system was a series of in-depth discussions with the development leads across all our product teams. These meetings were crucial for understanding the technical constraints and specific requirements of each product, ensuring the new design system would seamlessly integrate with their existing codebases.

Given the need for agile implementation, we opted to build upon a third-party design library. We evaluated several options, ultimately choosing Eva Design System. Eva's strengths lay in its UI component library based on atomic design principles, its support for both Angular and React (essential for our diverse tech stack), its well-defined color system, and its comprehensive documentation.

However, it still required considerable customization to meet our needs. We implemented styling using variables for flexibility, created component variants to accommodate different use cases, and designed entirely new components specifically for the open banking domain.

The first step in building our unified design system was a series of in-depth discussions with the development leads across all our product teams. These meetings were crucial for understanding the technical constraints and specific requirements of each product, ensuring the new design system would seamlessly integrate with their existing codebases.

Given the need for agile implementation, we opted to build upon a third-party design library. We evaluated several options, ultimately choosing Eva Design System. Eva's strengths lay in its UI component library based on atomic design principles, its support for both Angular and React (essential for our diverse tech stack), its well-defined color system, and its comprehensive documentation.

However, it still required considerable customization to meet our needs. We implemented styling using variables for flexibility, created component variants to accommodate different use cases, and designed entirely new components specifically for the open banking domain.

Customization widget
and UI demos

Customization widget and UI demos

Customization widget and UI demos

To showcase the capabilities of our unified design system and to empower our clients to experience the products firsthand, we created interactive demos for our 2 main products. These demos, accessible directly from our website, allowed potential clients to explore the functionalities and see how their branding would integrate to our products.

Complementing the demos, we developed two PDF guides explaining the customization process in simple terms. These guides were shared with our product and sales teams, equipping them with the resources to effectively communicate the customization options to clients and facilitate successful product adoption.

To showcase the capabilities of our unified design system and to empower our clients to experience the products firsthand, we created interactive demos for our 2 main products. These demos, accessible directly from our website, allowed potential clients to explore the functionalities and see how their branding would integrate to our products.

Complementing the demos, we developed two PDF guides explaining the customization process in simple terms. These guides were shared with our product and sales teams, equipping them with the resources to effectively communicate the customization options to clients and facilitate successful product adoption.

A key part of our strategy was to provide potential clients with a clear understanding of the design system and its impact on the user experience.

A key part of our strategy was to provide potential clients with a clear understanding of the design system and its impact on the user experience.

The impact

The impact

This project was a complex undertaking with a significant positive impact throughout the company. When the first version of the design system was completed, two product teams started the gratual implementation of it. It could be quickly detected how it improved our internal efficiency in both the design and development processes.

We also received positive feedback from the sales team saying that all the additional materials provided to them simplified the sales processes and conversations with potential clients.

All in all - I’m proud of our collaborative approach between multiple teams and the polished deliverables we produced.

This project was a complex undertaking with a significant positive impact throughout the company. When the first version of the design system was completed, two product teams started the gratual implementation of it. It could be quickly detected how it improved our internal efficiency in both the design and development processes.

We also received positive feedback from the sales team saying that all the additional materials provided to them simplified the sales processes and conversations with potential clients.

All in all - I’m proud of our collaborative approach between multiple teams and the polished deliverables we produced.

4

4

4

Product lines unified

Product lines unified

Product lines unified

8%

8%

8%

Improvement detected in client
conversion times in first 6 months

Improvement detected in client
conversion times in first 6 months

Improvement detected in client
conversion times in first 6 months

2x

2x

2x

Faster implementation
efficiency on new features

Faster implementation
efficiency on new features

Faster implementation
efficiency on new features

White-label design system

Unifying Finleap Connect's open banking product portfolio through a shared and well documented design system with customizable tokens.

Industry

Fintech
Open Banking

Timeline

Mar 2020 - Jul 2021

Core team

Jacobo Busto - Chief Design Officer
Sonia Castillo - Brand Designer
Patricia Román - Product Designer
me - Product Designer

My role

White-label design system initiation

Implementation of the new branding
Handoff & documentation
UI & supportive material design

Create a free website with Framer, the website builder loved by startups, designers and agencies.