Creating a Polite Design System for a Loud Brand
Some of you might remember the rebranding of Merck KGaA, Darmstadt, Germany, back in 2015. When the CDO entered the company one year later, we were faced with certain challenges in digital design that resulted from the purposeful loudness of the brand. While the idea behind the branding was to be so loud in order to stand out within the industry, we needed to define guidelines for digital experiences in order to be able to control the volume of our brand and eventually not confuse the user.
Brand vs Service Design
When your assets have been created with the purpose of being bold, vibrant and groundbreaking it can be quite tough to provide empty space or visual hierarchies at the same time. Our company is the colourful spot within the industry — in its wide-spread business set up as well as in its appearance. That’s why it is important for the brand to easily arouse attention. Yet we take our user-centred approach very seriously. And we need to be able to guide our users within our platforms, no matter in which field of application or on which device.
Our tool for visually supporting the brand and enabling usability is what we call Service Design. We defined rules for an unobtrusive, polite and diplomatic design language that is there for the user. It serves only the purpose of guiding and distinguishing within our interfaces.
Let me give you an example.
This mock-up showcases the difficulty of a brand-only interface in which the user has multiple options to interact with. Now, which element is the most important?
By taking away loudness but keeping the brand alive through the usage of distinctive colours and the M font, we managed to create visual hierarchies and a basic user guidance.
The same principle — and challenge can be used at illustrations. There we also identified usability issues when brand illustrations are placed together with (long) text paragraphs. Applying similar methods, reducing brand loudness and highlighting important elements while maintaining the brand identity led to a significant decrease of user distraction.
The M Font
Of course, the M font acts in the same way as the entire brand and arouses attention all over, sometimes even more than appreciated. We had to come up with a solution that treats the users with the highest priority and at the same time keeps the brand character vivid throughout our experiences.
Even more challenging was to deal with our brand’s running text font, Verdana, in digital environments. While Verdana takes away a lot of space, it is very difficult to effectively use it on modern screen sizes. In order to close the gap to our service design here, we proposed a new font considering legibility, availability, adaptability, modernity, and style. We selected Lato, designed by Łukasz Dziedzic and Google. This font satisfied all our needs, being very easy to match with our companies’ expectations and also being very popular and thus vivid — a huge contrast to the old fashioned Verdana.
Applying Atomic Design Patterns
Our inspiration for the design system we wanted to build on was rather a coincidence than something we wanted to force since it matches so nicely to our companies’ pharmaceutical identity — atomic design.
When planning to set up your guidelines you have to be clear of a structure on which your contents will be lined along. As we always worked with a very modular and flexible design approach, applying this to our guidelines was only logical.
The conclusion of all that was that we wanted to provide assets within a Sketch file which contains all data structurally according to our guideline’s structure. These patterns would be the main template on which we then started to build the guidelines, the assets, the illustrations, and the descriptions.
Small Team — Big Company
Companies like Merck KGaA, Darmstadt, Germany — currently employing more than 50,000 people in 66 countries — need guides in order to keep everything running. If small teams are acting in a startup alike manner, this automatically leads to friction, which is good.
While we always try to have very straight ideas and be clear of what we want to achieve, it is sometimes challenging having to convince within the company. Yet long meetings and discussions are necessary to build up a common understanding of the issues that exist. In most of the times we are confronted with colleagues that actually are fond of our ideas but of course, also bound to their teams and their own restrictions. What we learned so far is, to keep communicating and be positive. You need to understand your colleagues and to be honest. And of course, you need to be well prepared.
The Future
Our guidelines are supposed to be a living document. With each project and new interface, it will grow and things will need to be updated. But not only on our site, they also will affect other guidelines within the company (e.g. brand guidelines, digital channels etc.) and they already did. It’s very exciting to watch this project change through time and to see its impact.
We are receiving great feedback from users of the platform, colleagues and even people outside of the company. Placing ourselves publicly was a very intentional move. We felt the need to show the world that there is more to come from a brand that most people don’t know or even are biased about.
We hope to be able to share some of our upcoming work with you as well. So stay tuned! And of course, here’s the link to our Liquid Design System:
merck.design
We are Hiring!
Take a look at our current vacancies:
merck.design/career/
Thanks for reading our story! We’ll be continually posting new stories here that you hopefully find valuable for yourself. For more information about us, have a look at our Instagram, Dribbble or Behance accounts.
If you have questions or anything else you want to share with us, just send over an email.
