Banca Sella invests in a unified design system for web and app banking

Belka’s Department of Bills and Bonuses is happy to announce that Banca Sella’s team have successfully unified their design system across desktop and mobile apps. They expect to see high returns after collaborating with Belka for their Figma migration and newly improved workflow method.

Banca Sella is an Italian bank with around 300 branches, founded in Biella, 1886. It is recognized for its high-quality services for businesses and families, and its ongoing commitment to innovation in offering tailored solutions. With a strong focus on digital services like home banking and mobile apps, the bank enables customers to manage their financial needs and access personalized advice with ease. Given the importance of digital products in their offerings, the design team at Banca Sella needs the best workflow to deliver seamless and effective user interfaces.

After significant progress with the mobile app and the website, the library was growing rapidly and included many components. The Design Studio team at Banca Sella was doing an excellent job, but some aspects could be optimized by better organizing the library and choosing a single tool for the workflow.

The problem

When Belka jumped on board, they quickly discovered the core of the problem: there was no common standard. Each designer was using components in their own way, without shared guidelines, and they knew they could do better. 

Without a ‘single source of truth’ to allow everyone to work in unison on both the app and web design, the team couldn’t work at optimum.

Migration and method

Belka and Banca Sella agreed that migrating to Figma was an essential first step, but it wouldn’t solve the problem entirely. Figma was necessary, but the team also needed a simple, tailored approach and a clear, shared method for working on components that would prevent the proliferation of variants. 

So, the teams agreed to invest in three key areas:

1. Migrating to Figma

Why use two separate tools when Figma can manage everything in a more centralized and streamlined way? Belka moved all the components plus the key app and web flows to Figma, allowing the team to work efficiently within a single tool.

2. Building custom multi-theme libraries

Working to untangle the duplicated components, Belka streamlined and simplified the libraries to create just two custom multi-theme versions on Figma—one for the app and one for the website.

The components were significantly reduced and optimized in the process. The app tiles, which originally had over 250 variants, were simplified into just five components with a total of 15 variants that can be combined to cover all necessary use cases. This drastically reduced the number of components and lightened the maintenance effort.

Thanks to design tokens, Banca Sella’s team can quickly switch between versions too. With dedicated themes for B2C and B2B, the design system is now solid, scalable and flexible.

3. Developing the right method for the team

Having a powerful tool like Figma wasn’t enough; the team needed to know how to use and maintain it over time. 

“We trained the Banca Sella team on how to use Figma effectively, how to manage components, and how to modify them,” says Mattia Marinangeli, design system team lead at Belka. “We helped them establish a workflow method to clearly indicate when a variant needs to be added and understand how to update existing components, ensuring the system remains efficient and adaptable as it evolves.”

The app widget went from 120 variants on Sketch to just 17 variants in Figma, with only three components. Life is easier now.

The value of a unified design system

With a unified design system and a reliable method for their workflow, the Banca Sella team can handle maintenance and updates easily. This was put to the test during the project, when they needed to adapt the design system not only for app Sella app but also app Sella Invest. By building a solid and scalable structure based on design tokens, the Sella team could quickly add the new theme without rebuilding libraries or components from scratch. 

The team at Belka can’t wait to see what Banca Sella do next with their unified design system and new workflow!

‍

Want more advice from the Belka team? 

• Chiara and Sara discuss how to understand whether you need design tokens.
• Do you want to improve your multitheme components in Figma? We have the template for you.‍
• Do you have a design system but feel stuck and frustrated with your work? We can help you with a design system audit.

‍