WLDS
Project overview
WLDS (White Label Design System) is a multi-brand design system that enables agencies to accelerate the design process across multiple client projects without compromising quality.
I developed the concept as part of my bachelor thesis in which I conducted a research for The NEED GmbH.
Role
Product Designer (Design Systems)
User Research, UX/UI Design, Architecture
Background
I gained my first experience with design systems during my mandatory internship. For a client project, my boss instructed me to use a design system for this. At first, I had difficulty working with it, but as soon as I recognized its added value, I developed a fascination for design systems. This led to my decision to dedicate my bachelor's thesis to this topic in order to delve deeper into the world of design systems.
Unlike some other bachelor theses, I had to write the project paper entirely on my own and had no support. However, this helped me to gain a deep insight into the subject matter, some key achievements of which I have listed below.
Finding out users problems. This has helped to empathize with the designers working with design systems which played a decisive role in the development of the concept.
Developed a concept for a mulit-brand design system. With the findings from the previous analysis, I could develop a concept which combines the best practices of the well-known design systems out there.
Achieving my bachelor's degree. For my thesis, I ended up getting a 1.8 from my professor for which I am really grateful for.
The process
The approach taken in this thesis is based on the human-centered design process in order to achieve the overall goal of the thesis. To this end, methods from this approach have been used in the further course of the thesis.
The human-centered design process is a systematic approach to designing products, services and systems that takes into account the needs and preferences of users. It is based on the principle that products and services should be designed in such a way that they are easy to use and meet the needs of their users.
In my thesis, I went through the first three phases of the human-centered design process:
Understand and describe the context of use
Specify usage requirements
Develop design solutions
Due to limited time and the large scope of design systems, phase four couldn't be completed.
Understanding the problem
After working with a few design systems, I noticed that certain problems kept recurring for me. That's why I decided to take a closer look at the experiences of other UX designers, which led to the following research questions:
"What experiences have designers had when using design systems"
"How can a predefined multi-brand design system be developed for agencies, while taking the requirements of the designers into account?"
To answer the research questions, interviews with designers and a developer from different organisations as well as a design system comparison were conducted.
Gathering insights
I had already identified the general problems associated with the use of design systems in a survey. To deepen my understanding of the problems, I then conducted my own interviews.
After collecting the recordings from the user interviews, the users' statements were organized in a table and evaluated according to Mayring. In addition, the usage context was presented using the “actual scenario” method in order to describe it.
The results show that respondents often lack certain elements, find them difficult to locate or there is a lack of transparency regarding the status. In addition the use of design systems can be a hurdle if documentation for a good introduction to the system is missing or inadequate.
Specifying usage requirements
The findings from the interviews were used to formulate user needs. These needs were then used to derive usage requirements, which served as the basis for developing the concept of the multi-brand design system. The formulated needs and requirements follow a specific syntax, which was adopted from the book “Basiswissen Usability und User Experience” (Basic Knowledge of Usability and User Experience) by Geis and Tesch.
Ideation
Before the concept was developed, a comparison of well-known design systems was carried out in order to identify best practices in the development and maintenance of design systems and to integrate these into the concept. Predefined comparison criteria were defined in advance to enable a systematic comparison.
Developing a concept
A few best practices that emerged from the comparison were:
Onboarding videos
Design Tokens (Naming and Architecture)
Live demos of components
Organizing the design system after Atomic Design
Organizing the elements after the alphabet and furthermore after their use
Possibility to give feedback and contact design system creators
Changelog and roadmap
Status of elements (components, style guides, …) to ensure transparency
Together with the findings from the interviews, these best practices along with other things were integrated into the concept. The design system is far from complete. It only contains certain solutions or approaches to the problems identified during the research. In addition, special attention was paid to scalability and flexibility.
Results and takeaways
In conclusion, it can be said that design systems are never finished, but must be continuously developed and maintained. That is why I am currently continuing to develop the design system privately, so that I can use it for my own projects and keep my knowledge of Figma and its capabilities up to date.
However, it is safe so say that the concept developed in my bachelor thesis provides a promising approach to keeping design systems scalable and flexible as well as keeping known user problems to a minimum, at least from the designer's point of view.
Some key takeaways from this project are:
Research is the key. Due to the limited time frame and difficulty to recruit interview partners, I could only work with what I have. It is safe to say that the findings would have been more representative with more and diverse interview partners.
Building design systems is not a one-man show. The complexity of design systems makes it very hard, almost impossible to build a design system all alone.
There is more than one solution. I find that there is no perfect solution to a problem. Once, for example, you build your design token architecture one way and later Figma is bringing out new functionalities which then requires you to adapt your system.