-modified.png)
The Backbase design system was simplified in order to solve some of the painpoints that designers were experiencing with performance, usability, and consistency.
Backbase is a fintech company aiding 150+ global banks in updating their digital banking platforms. Designers and developers at Backbase customize the product to match the bank's branding, requiring easily themeable component libraries for this white-label approach.
I led a team of 12 designers to refactor the web, iOS, and Android component libraries. I helped us create a strategy for using the newly released Figma properties, managed timelines for stress testing those components, trained designers on the new ways of working with the libraries, and looped in key stakeholders at each important milestone.
Our client-facing designers were not happy with how complex our design system was built. They were struggling with the complexity of our components and found our libraries extremely time consuming to retheme.
Painpoints with our libraries included:
- Too many nested components
- Unecessary complexity
- Heavy files
- Difficult to retheme
We set five guiding principles for how we wanted to simplify our libraries and make them more user-friendly.
The new properties allowed us to significantly cut down on the amount of variants in each component.
As a result, our new libraries are much lighter and easier to edit.
One of our key strategies was to show all of the possible customizations for each component on the very first click.
This means designers will (almost) never have to click deeper into organisms, molecules, and atoms to change their specs.
The layers panel for each component is carefully constructed to be simple and easy to understand.
This was a huge improvement because our original files were littered with unnecessary nested components and unnamed frames.
One of our key strategies was to show all of the possible customizations for each component on the very first click.
This means designers will (almost) never have to click deeper into organisms, molecules, and atoms to change their specs.
In the past, designers had to sift through the layers panel to see all of the possible nested components inside of our templates.
Using figma properties we were able to make it more clear what components our templates included. Additionally, we made it easier to place content inside of the templates by levering the figma swap property.
The new templates were very well recieved for being more user-friendly and lighter.
We discovered that designers really struggled with creating tables, which are extremely common in banking interfaces.
Our original approach included lots of row components, but they rarely resized properly and the individual cells were difficult to customize. As a result, we discovered that most designers chose to detach the table components and build their own.
Our new approach simply provided a lot of variants for the row cell. Now designers simply place their cells in an autolayout and don't have to worry about resizing issues. Additionally, the simplified cell components were easier to change.
