4 in 1: meet the Multibrand Design System of de Volksbank

For this safari we were invited by Ad de Bont and Daniël Wedema from de Volksbank. De Volksbank is a family of bank brands: ASN Bank, BLG Wonen, RegioBank and SNS Bank. All brands have their own identity, but are part of a single Design System. We talked with Ad and Daniël about the challenges they faced setting up this multi-brand Design System.

Ad de Bont has been working at de Volksbank for 2,5 year. Previously as UX designer for SNS, now as Lead UX designer part of the platform team responsible for their multi-brand Design System.
Daniël Wedema has an IT background, he is part of a team that started the single platform approach. 3 years ago they started with the ambition: build it once and use it for 4 different brands.

Now, 3 years later they succeeded in a single platform, multi-brand Design System! A huge challenge, with lots of political or organizational hurdles. But together with design, development and business they pulled it off. “We had to build up everything from the mud, but what we got was an immense gain of speed!”

The Design System is a must

Currently their design team is growing rapidly, supported by 60 developers. Integrating a Design System is crucial for de Volksbank to maintain an efficient workflow, when co-working with many others. They explained this is one of the main reasons why a good Design System is a must for them. Ad de Bont: “Without a well documented design library which you can distribute among designers and without having developers working from the same code base, you would be re-doing everything 40 times.”

The Design System helped our brands focus on the things that really matter.

Ad

For their Design System to work they strictly separate UX design from visual design. Everything included in the Design System ‘works’ the same. By changing the styling, components get the visual identity from the brand.

Forms with visual styling for all 4 brands
Visual styling for all 4 brands

💡 Tip: de Volksbank started filling their Design System with online processes and forms. It helps to define a Minimal Viable Design System for your organization. What do you really need as a team? What could you start with? Our checklist can help you get more focus.

All custom built

When starting out, the IT team looked at different tools, but again and again it wasn’t exactly what they were looking for. Their requirements? Something that always shows the latest version of a component, interactive examples and of course suitable for a multibrand Design System.

That is why Daniël Wedema and his team decide to build something from scratch in Angular, which they call: ‘The Guide’. The Guide is very strict about versioning and quality control. Everyone is always working with the latest version. There’s no way a team can decide to keep working with older versions of components.

What we were looking for, didn’t exist yet

Daniël
Developers can look up building blocks in 'The Guide'
Developers can look up building blocks in ‘The Guide’

To make the platform more tangible they made it possible to click through all component without a back-end attached, all data is faked to make it look realistic.
Whereas the platform was mainly developer focused in the beginning Ad joined 1,5 years ago to also include the missing design layer.

Our first Design System was designed by developers, for developers ;-).

Daniël
The Guide is completely interactive with 'faked data'
The Guide is completely interactive with ‘faked data’

Looking for partnership

When they just started out, The Guide was the only documentation and governance was very loose. Everyone could freely contribute and brands communicated directly to developers. That’s when they decided that all teams should have a dedicated designer. Ad stated this was quite a scary transition, by doing this they were taking away some of the freedom of developers.

They strongly believed that if they wanted to grow the Design System, they need cooperation from the teams. As a first step they started a partnership with just 1 team. Once they got this process up and running they got traction to be able to do more.

old governance structure
Old governance structure

Platform and value team

The current structure is a structure of a platform team, surrounded by value teams. The platform doesn’t contribute any direct value to the business, instead they offer techniques and tooling to the value teams. The value teams create actual value to the business and users. Within every value team there is at least one dedicated designer.

The process is very much centralized. All request (both from designers and stakeholders) go through the platform team. They assess and coordinate. When the request is valid, the platform team either designs and build the new component themselves or asks the designer from the value team to design and document it for them.

In terms of alignment, this process is a huge win for efficacy! Ad: “As a platform team we coordinate everything with the brands. By now they are also used to it, that we always go for a solution that works for every brand.”

New governance structure
New governance structure

To include all designers and keep everyone engaged, they organize weekly design meetings. During these meeting they invite all designers and discuss how things are going and how they can improve. How can we help each other?

💡 Tip:Design Systems are 80% people and how we work together. Want to get started with improving your governance and process? Our Design System Proces Puzzel could help you with the first steps.

Sketch libraries and a single source of truth

Besides the Angular platform they work with Sketch libraries and their own documentation platform. The documentation platform is their single source of truth. All stakeholders have access to this platform.
For designers they created extensive Sketch libraries. Every element is created for all 4 brands, this is something they won’t argue about. If it is not in the library, it doesn’t exist.
The most important goal of the Sketch library is that a designer is able to make everything for all brand very quickly.

Sketch library with components for all 4 brands

Visibility within the organization

Ad and Daniël pointed out that the biggest challenge for the coming months is visibility.  To be able to grow the system, we need to spread why we created the Design System, why we work like this and what the benefits are. Ad: “We’ve been very busy building, but it is also very important to become visible”

Open-source tooling 😍

The team of de Volksbank has big ambitions! The team would love to open-source the custom built tooling and share it online. This tooling enables other developers outside of de Volksbank​ to build their own multi-brand Design System. But for now the biggest ambition is to grow the Design System and start including more and more parts from de Volksbank experience!

4 tips from de Volksbank

We asked Ad de Bont and Daniël Wedema what their tips would be for others in the same situation. What would you advise them when they want to start with their own Design System?

  • Create 1 team for design and development. This is a must for a successful Design System.
  • Developing a multi-brand Design System? Create one platform and make this almost a sacred thing. Don’t create anything custom for a brand. If want to succeed, look for agreement within your organization for this single platform.
  • Governance! Design Systems are all about agreement, those are even more important then the technical platform or libraries you choose. Of course, the technology behind it is important, but you’re not going to win the war with it.
  • Get commitment from management. Especially for everything related to governance and changing the way you work together. Ad and Daniël are both very happy with all the support they got from their managers. They worked together in making this a success.

More about Design Systems?

Curious how other organisations in the Nederlands build and maintain their Design Systems? Check out our research State of Design Systems in Nederlands, 2018.

Or visit our Meetups about Design Systems and download our tools.

Vragen over Design Systems?
Maurice denkt graag met je mee.

Maurice Timp

Onze Design System Lead beantwoordt graag al jouw vragen.

Stel Maurice jouw vraag

Maurice Timp - Angi Studio

Wij gebruiken cookies voor de beste ervaring van de website. Tijd teveel, beklijk onze privacyverklaring