4 in 1: meet the Multibrand Design System of de Volksbank
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
💡 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 yetDaniël
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
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.
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.”
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 😍
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.