The Label: Applying a rebrand to an established design system

Senior Product Designer, Joanne Wong, shares how she applies her culinary aptitude to a design system rebrand.

I absolutely love cooking and baking. Every week or so, I challenge myself to use the ingredients I already have at home to create new dishes (#sustainablecooking). Design systems are really quite similar. But instead of creating dishes and meals from ingredients, you create components or pages from smaller elements such as typography, icons, and colours.

We’ve already introduced you to a couple of the new ingredients — namely typography and colours — within our design system. It’s now time to show you how we cooked up our new visual design language, The Label.

It may seem pretty simple, right? Just replace the text styles, colours, spacing, and voilà! Wrong. Although you can sometimes substitute ingredients in the kitchen, it might not always be the best idea. For instance, let’s say you’re baking cookies with plain flour, eggs, milk, and salt, you wouldn’t just replace them with almond flour, apple sauce, oat milk, and soy sauce. If you did you’d end up with a very questionable cookie. Ingredients — just like core brand elements — need to complement each other.

Using the right tools

I used to believe I could use any cheap, old pan to cook whatever I wanted. However, as I became more proficient at cooking, I realised that investing in my non-stick pans would help me immensely. The tools you choose are crucial to success.

Soon after our design system team had started applying the new styles to our components, we decided to switch to Figma. Our previous tool only allowed one individual at a time to access the component library when we had to make changes. This obviously made our work slow and cumbersome.

Figma has helped us to be more productive while creating all of our different components. Especially whilst working remotely, the real-time collaboration and presentation features helped us to collaborate effectively, communicate easily, and make decisions quickly. This not only improved communication between designers, it also helped designers, engineers and product owners work together more seamlessly. Sometimes, you just really need the right tools.

Cooking up components

When we started to create our components using our new brand elements, there was a lot of back and forth with our designs. It felt like our team was in a test kitchen, where we put our most creative ideas and techniques before adding them to the final menu. We shared our dishes, asked questions, and gave feedback to help each other improve. Here were some of the considerations we took into account:

• Does this component use our styles? (Are we using the right ingredients?)
• Does this component work well with the other components? (Does this dish work well with the rest of the menu?)
• Does this fit our design language? (Does this fit with the theme of our restaurant?)
• Is it accessible? (Do we meet hygiene regulations?)

Working together

Finally, it was time to create a full menu using our dishes (this is where we were getting fancy).

Although we had created our components in our Figma library and starter file, we could not simply redesign our entire website and app. There are tiny nuances between each page and some have major business implications that we, as the Zalando Design System (ZDS) team, would not have been aware of.

It was time for chefs from other cooking stations to come in and help us out. We established relationships with our embedded designers by using a lightweight version of design pairing. This new process was introduced to allow us to think big and act fast. An individual from the ZDS team would be paired with an embedded designer who would suggest design solutions using our new components. This relationship allowed us to see our components being used in context, and by looking at things on a holistic level we could ensure that we’d created a coherent product experience.

Cooking up something new, let alone running a restaurant, is no easy feat. It requires the right ingredients, the right tools, and the right people. But when this all comes together, you create a memorable experience that keeps customers coming back, ‘hungry’ for more.