Beat Design System

To tell you this story I need to start with some background. In 2018, Payvision (a Dutch Fintech company) went through a rebranding process following its partnership with ING. In 2019, the new brand has its debut with the new Payvision website and marketing campaign. In 2020, it was time for the product suite to be rebranded, and thats when the Design System comes in.

At Payvision, we always had a small centralized design team which helped us to have consistent design patterns across the products. However, with several developing teams responsible for each product, wasn’t always easy to ensure all products had consistent design patterns and the components had the same behavior. Moreover, the re-development of the same components in different products was constant because the dev teams were often in technology silos. So we took the rebranding opportunity to sell to the stakeholders and developers the necessity of a design system. We would build our (Beat) Design System and rebrand the products by implementing it.

My role in this project started as the UX designer and continued as the Team Lead of the team. This is how we did it:

1. Component identification

My first task was to go over all the product suite identifying what elements across products had the same functionality. Often, I found elements that should look and behave the same but weren’t or had discrepancies due to different teams developing the same designs and a case of a product that was done by a third party agency.

2. Component consolidation

After that, I consolidate the different versions of elements into one components that had all functionalities and states needed for all products. We also reviewed edge cases and scalability of those components.

3. Re-design

With that list in hands, we rebranded each component going from atom design to the full screens of products to make sure all fitted and made sense. We increased the library considerably with new states and use cases. We did that together with the development teams and looking at established Design Systems like Shopify and Material.

4. Documentation

After the building the UI library, we added all components and use cases to the design system manager in invision. The invision app was used to explain the branding and the design cases for each component. Next to this, the development team started building the components and adding them to storybook. This page is focused on the developers with all technical explanations on how to consume the library of components, snippets of code and all the examples.

5. A design system is a living organism

After the release of the Beat Design System 1.0, we continued to get feedback from the developers from other teams and continue to evolve the component library with different components, states, use cases, examples, dos and dont’s and so on.

6. What I learned

Here, i’d like to share some of my personal learnings for doing this project:

A design system is not a component library
Maybe it goes without saying but still I was surprised to realized the amount of work it goes before and after building the design library. Something you also have to keep reminding to stakeholders that tend to focus on the visual things only.

A design system is not a side project
We started like this in Payvision and it wasn’t taking off until we made a priority. A design system is a long term project that will take more time in the beginning in order to save design and development time in the future.

The developers have to love the idea as much as the designers
You don’t have to make too much effort to sell the idea of a design system to a product designer. However, if the developers (of both the system and the products in the company) do not buy this idea as well, it can be difficult to implement in a already live product. It takes more time in the beginning and the developers will have to agree in technologies and ways of building the product.

Have everyone on board but keep the ownership
That’s an important point that we failed hard and (luckily) quickly. Since a design system is a collaborative project that has to group most of designers and developers in the company, we thought would be good to have everyone collaborate on the components and meetings from the get go. Turned out to be a big mistake. The lack of ownership plus the fact that it wasn’t a priority (as we learned on point 2) made the project slow and we didn’t make a lot of progress. The more people involved, the more they would skip a meeting, failed to give feedback, not have time to work on a component and so on. So my team took back the reins and started working to get the 1.0 version out. We kept our biweekly meetings with the development teams, but this time with a structured agenda, reminders before the call, our progress and questions. The more progress we show, the more they would get interested to participate and, with the structure in place, we could discuss smaller tasks they could do to help us.

Take advantage of the momentum
Since the creation of the design system was done way after the design and development of most of Payvision’s product suite, we needed to find a sweet spot to start development and implementation. Luckily, we had the rebranding on our side together with investment from ING’s partnership. So we took that chance to sell the design system to the stakeholders. I don’t believe we would have had the resources to do so if it wasn’t for those factors. In the case of the first implementation we also took advantage of choosing a product that would already go through a technology refactoring and addition of new features. You can read more about it here.

It’s hard work but a lot of fun
This project started very small and soon we understood the magnitude the team was taking in. We hire an extra developer, trained the designers and went to a lot of workshops/meetups about design systems. This project made me even closer with all the development teams and the product owners. Also made me improve my presentation and sales skills and have better understanding of development.

The design of the Beat Design System was done together with Alberto and Duan. Development was done by Carlos, Alex, Slawek, Juan Carlos, Javi and the help of many others in the Payvision team ❤️.