Taking a deep dive into a UI/UX White-Label Design system, workflows and handoffs
In app development many companies face the challenge of aligning and efficiently incorporate design in the development lifecycle. In this article, I will try to show the process of setting up a White-Label Design System that is easy to use and reduce your design hours.
The challenge
The challenge during the setup of design workflows and design systems is how to keep everything simple, because designing mobile apps, websites or any other interfaces can get complex real quick. If you work with multiple designers and/or multiple brands a clear set of rules or principles that are backed up with easy-to-use workflows, file structures and design systems is the key to success. But the question for many designers out there is how you can achieve something like that. This is also the exact same question I and the rest of my team asked.
Researching for a solution
With the lack of knowledge and experience working with huge scale, multi branded mobile apps, I had to do a lot of research. I found out that the internet is full of information about this topic, but it is hard to find in-depth examples of how companies around the world practice design. This is why I reached out inside different design communities on Slack.
White-Label Design System
With the help of other designers, I came up with the idea to create a White-Label Design system. This type of design system is a flexible system that can adapt to any brand or style. This may be the perfect solution for companies that create similar app’s but for different brands.
The picture above is the basic explanation on how the White-Label Design System works. With the help of Anatole Ayadi, I created the first prototype to see if this system is worth it. Basically, you have a set of components that you usually have in a design system. For example, buttons, cards, headers etc. The difference is that instead of one set of colors, you need to be able to easily switch them. Here comes the foundation in the picture. A foundation contains all the color tokens, fonts, images, and logo’s that you need for your app design.
Every brand or client that wants your product has its own Foundation file with their own colors, fonts and brand guidelines. But there is one problem with this system. How can you keep your tokens connected to the components? To solve this, I started using the component-based token naming convention. As you can see down below, the foundation has a lot of different tokens with a value inside (hex code). The token name structure is like this: <type-element-state>. So, for example color-app-background. This indicates the background for the whole app. I chose to keep it as simple as possible because I was and still am new to this type of workflow.
Applying the foundation to the app
Just like an example foundation, it is also necessary to create an example app (Especially if you make a lot of apps). This example app contains all the flows and screen that you usually make when you design your app. We chose to also make a UI Kit that contains elements that we use a lot in the app.
It is important that all the tokens from the example foundation are used in the example app. If this is not the case and there are styles in the example app that are not connected, the transition will not work.
Before
If we take this app down below as an example you can see a basic news home screen with breakings news, latest news and a navigation bar. If we want to quickly create a new app (based on the same layout), we can do that by changing the foundation.
Swap Library
To swap a foundation with another one, you can use the “Swap Library” tool in Figma. This tool uses naming conventions to swap your tokens or components. As you can see down below the file uses the News station one Foundation.
When we click on “Swap Library” you will go to the menu down below. Here we select the right foundation to swap with. For this example, we chose the “News station two Foundation”. As you can see it automatically recognizes the tokens from both foundations.
NOTE: If there is one typo, Figma won’t recognize your tokens and the swap library will not work correctly.
After
After we click on “Swap library” again and Figma is done with performing the action, you will see that the design has changed. This is a quick example, so there isn’t much that got changed. Based on the project scale and complexity you can create this system as advanced as needed.
What will change after you start using this system?
At this moment you have the basic knowledge on how the system works. We tested the system with a quick example app and it all worked perfectly. But what will change after companies start using this White-Label Design System?
To begin with, you can create the first designs within two hours. Compared to not using a design system, this may reduce the design work with 95%. That is a huge decrease in work for the whole design workflow. Besides the decrease in time, you can also create a Single Source of Truth for your apps or products. One place where you can edit, add or remove elements and easily apply that to all the different apps.
Downside of this system?
One big downside of this system that it is complex, and it takes a long time to setup. If you want to use this system, be prepared to work on it for a few months before you can take it in production. It is a specific system for specific use cases, so it won’t work for every project. However, once implemented, this design system has multiple benefits that outweigh the time, effort and resources to implement it.
This was the first part of this three-part series, next article I will talk more about workflows and project structures. All these articles are made with what works for me. This doesn’t guarantee that it will work for you.
Any questions?
Feel free to ask any question about this article! I am happy to answer any questions on design systems. You want to get in contact with me? Follow me on Instagram, contact me on LinkedIn or send me an email:
LinkedIn — Jurre van den Berg
Instagram — uiux_jurre
Email — jurre@wydeweb.nl
