Introduction

In this case study, I share my knowledge and experiences in creating a new design system while maintaining out daily work. I present the process in an autobiographical manner, supplementing it with the lessons we have learned along the way. You may skip our errors and make use of our best practices by going direct to the TLDR for a short version of the learnings and to Submissions for my screens. However, please keep in mind that doing so will mean missing out on the contextual background.

Role

Project Manager, User Experience Designer
Stakeholder Management, User Research, Visual design, Prototyping & Testing.

Background

We realized that our current design system was outdated and in need of improvement. We couldn’t convince the stakeholders at first, so I scheduled a meeting with them to show them the flaws in our current design, including problems with how it looked on ultra-wide monitors, its visual gap compared to other websites, following the wrong design trends, and its usability issues. What convinced them the most was how it looked in the colors of an upcoming important project - it looked ugly, nothing you want to show a customer.

To our delight, the stakeholders were on board. We managed to get it done while still handling our daily work. The old design was no longer working, and it was time to move on.

As it’s important to reflect on our work and ask ourselves what we would do differently today and ensuring we were doing our best work, I wanted to reflect on what we could do differently. So, I came up with the idea of a design challenge. One of the benefits of the design challenge is that the best idea wins, regardless of who came up with it - whether it’s a student intern, a junior designer, or a senior designer.

Our research showed that by tackling a few challenging screens, we could get a good understanding of the rest of our product pages. These screens set the standard for the next few years of our software, with design always following function.

I presented the stakeholders with these challenging screens and gathered their requirements. Involving the stakeholders was essential because they bring important knowledge about the company’s goals and experiences. Their perspective is valuable, and not including them could lead to misunderstandings and future obstacles.

Design challenge

After this work was done we finally started the design challenge. In this challenge we built a (self-proclaimed) Chinese wall. What makes me smile till today: I stole this idea from the Television show Suits. The idea was not to show, review, or even talk about our designs, ideas, or wireframes in the next two weeks with the other designers. This was a very fun and educational time phase in our work. Everyone wanted to create the best design but also wanted to know the direction of the other designers.

After these two weeks we had an internal meeting. Everyone had the opportunity to present and explain their work. We could train our skills in presenting designs. Additional we shared our thoughts and challenges with the others while being in a protected atmosphere. In retrospect, we remember this as valuable.

Presentation

In the next step we shared the results with the mentioned stakeholders. They were happy with the results and we have even been able to convince the technical product owners with our work. They enabled us to focus on the next steps and to leave the regular work on the table.

Merging the best ideas

We reviewed all the designs and tried to merge the best ideas. As a solution to this challenge, we tested the different designs with users and some of the stakeholders. After the testing we improved the most successful design with the ideas of the other designers.

Translation of Screens into the Design System

From the created screens, we extracted the individual granular UI elements such as the font, buttons, tags, etc. and also elements like lists, tables, and cards. For these, we then designed the various states (hovered, active, deactivated, …).
This way, the screens became a small design system, with which we could approach the next screens. Whenever we needed a new UI element that was not in the fresh system, we created it, presented it to others, and then added it to the system. And so it grew.

Update Dezember 2022: We did not stop there, once we had this foundation. We iteratively improved the design system based on user feedback over the past months and years.

Below are my submissions from autumn 2020. We selected this design because it received the best feedback and promised the most potential. You can see the result of our further development on the company website (Aug. 2022).

TLDR

Take the time to ask yourself about your own work: what would I do differently today and why?
Do a design challenge. This little competition compared with the opportunity to think outside of your design system unlocks lots of creativity.
Involve the Stakeholder upfront, but have something to convince them
Design follows function, no one needs more useless Dribbble or Behance eye pleaser
Take the hard away and communicate this openly in the team and to stakeholders.
Build a Chinese wall: No discussions or feedback among each other, so that everyone can develop freely.
Do an internal meeting first.
Do not try to squeeze all the ideas into one design, it is a waste of time. Find the best one and add the other good ideas.
It is obvious, but I will list it here anyway: Involve the user.
Update the system during use, you can’t plan all the scenarios in advance.