REWE Design System

Scope & delivery

When you search the term, the results are mostly colourful screenshots of big collections of UI artefacts. However a Design System consists of many more parts that are not immediately obvious. Our system consists of:

• Documentation
• Tokens and Theme overview
• Theme builder
• Layout builder
• Components
• Delivery infrastructure

 

 

We deliver native web components, that can be used in any tech stack for the web. Styling happens in theme files, which are configured with tokens. The documentation explains the philosophical reasons and guides all users of the design system to use it to their advantage.

Components are built in JSX with stencil, the docs are written in markdown and published with 11ty. Designers adjust styling decisions using the theme builder and prepare layout prototypes with the layout builder. Changes to production can be visible immediately, without having to write any code.

 

What is a design system

Making a plan to guide others is hard in todays world of digital products. Creating a flexible, adaptable system is preferable to a static preview. At REWE we are in the process of building a system, with me as the main driving force.

For us, a design system is a collection of tools, templates, guides and examples that make creating digital products easier, faster and more consistent. We need the design system to supply a single source for UI elements that reaches across all teams, at the same time, and can be maintained in one place.

 

A special challenge

At REWE we have a microservice architecture in place. Meaning, lots of teams supply lots of parts of a whole, including the front-end in every part. This decision was made deliberately, team autonomy and fault isolation were preferred to a centralized monolith. This however means that designers can't roll out UI and UX changes easily, since they have to be consistent across the entire product landscape. Changing the tiniest thing becomes a gargantuan task of team synchonization, to ensure a smooth roll-out across all services. Someone has to watch over all duplicated parts and ensure that our quality criteria are met.

 

 

Persistence is everything

For the longest time, noone thought that this predicament could be solved. You just had to live with it and do your best. This was a design problem, so the designers had to solve it. Since designers typically lack deep knowledge about the technical side, little to no progress was made. Several attempts to establish a pattern library failed. The situation irked me so much that I taught myself web development, to really learn and understand the problem and become technically versed.

Of course I underestimated how hard the problem really was. I had to learn web development so thoroughly that it transforms into a tool, that I can then use to tackle the problem.

 

 

This project (and this guy, among others) pushed me from nothing to the slope of enlightenment, with a long way still ahead of me. The effort was already worth it, the collected knowledge allows me to evaluate new ideas and form a viable solution path.

 

Working in design means working for humans

Dissecting a problem is solving the problem. As with everything, you need the right tools for the job, in this case the ones that helped the most are the 5-whys and Issue trees. But finding all the answers and dissecting all the issues brought me no closer to making the design system a reality. Let's look at what I am really trying to do:

Make a design system.

why?

Because then design decisions come from a centralized point, the famous single source of truth.

why?

Because then designers have control over that truth in one place.

why?

Because then developers do not need to worry about matching UI styling anymore.

why?

Because there often is a mismatch between what has been designed and what has been build, which confuses the customer!

why?

Because an inconsistent UI is hard to learn and feels less reliable for a broad group of our customers.

As you can see, while discussing technicalities and workflow, all the work ultimately resolves into offering a benefit to other people, in our case designers, developers and customers.

 

A shift of focus

So, after improving my skills and ability, it turns out the most important thing to master is empathy. If you make anything for other people, it is your job to serve and enable them to reach their goals. When others feel better after working with your output, they will want to work with you again.

The project focus moved from creating digital artefacts to making sure others see and feel the benefit, that this system brings. Many articles that mention it sound corny, but in the end its true: Serve people and their needs with your work, and your work will last.