How to merge brand values and Interaction Design.

or: Is there a Coca-Cola way to find something on a digital map?

Interaction Design (IxD) rules in styleguides

Have you ever seen IxD guidelines based on brand values written down in an online styleguide? I’ve been working in the digital design business for nearly 20 years and I have not seen it nor have colleagues that I asked. Well, I have seen IxD rules in styleguides, but they were always at risk of being outdated with the next major redesign and certainly were not based on any deeper understanding of the own brand.

Documenting how a brand communicates in terms of pure visual design aspects seems easy and people have learned to work with a clear set of rules in a styleguide over time. Just take Open Sans, colourcode your action items in #ff0000 and don’t forget the 8px rounded corners on any used image of two businessmen shaking hands in front of a modern glass building. There you have it: consistent brand experience guaranteed in your new interface. Check.

The Medium.com visual styleguide

Maybe it’s not so easy. Maybe even for pure visual design guides, it would be neat to get a bit more information on why certain colours are used for action-items or why and how Open Sans correlates to the brand. For a designer, it would be helpfull to understand the whole brand DNA. It escapes me why so few styleguides explain the “why” behind any given rule. This would surely help for future design decisions and, finally getting to the point, it would help designing interaction solutions that are in line with the desired brand experience.

If I had to guess why so few styleguides document IxD patterns, I would say that it is because IxD can’t be put in one size fits all rules, in contrast to colours and fonts, that can be handled more easily. It takes a more sophisticated approach to document how a brand experience shall be in the world of interactive flows.

Be aware of your brand before forging design rules

A clear requirement for being able to document brand values in your styleguide would be, that you have to be aware and in charge of your brand, or at least your desired brand experience. You have to know who and how you want to be, what you offer for whom and how you want to interact with the outside world. You need a clear agreement on vision, values and brand performance before you can really justify how you solve IxD problems in alignment to your brand values.

The same thing that is true for brands since decades now, is relevant for User Experience as well: The experience happens in the mind of people when interacting with touchpoints. Always. Full stop.

You can completely neglect that you even are a brand or create experiences at all, it will happen anyway. It is just a matter of taking care of it. Or taking the example of the classic iceberg analogy, there will be a lot going on under the surface, with or without you taking a look at it. It is tempting to focus on the visible stuff first, but be in charge of the whole thing! What do you want it to be? How can you create a usable system to streamline your communication and interaction activities? How can you measure what the actual experience is at your touchpoints?

I know, it’s a lot of work. But it’s worth it.

So, is there a Coca-Cola way to find a local store on a digital map?

In my opinion: NO. Because usability trumps brand experience on that level of granularity. There is certainly a nearly optimal way to find a store on a map for users in a specific context. Effectively, efficiently and with joy, but not with a taste of sweet soda in the user’s mouths. Would it help while interacting with map-scrolling/panning/zooming/clicking features when you add a level of “surprise“ if this is an essential part of your brand values? Unless you show me otherwise I will again say: NO. Just help them find the nearest store without bothering with anything else than what they have in mind in this situation. It is no wonder why so many sites rely on Google maps nowadays, not only is it a more feasible solution technically but Google maps simply set some standards in IxD, that people are used to by now.

Efficient storefinder on apple.com: First select a local store from a structured list, then optionally open a map when looking for detailed directions. Who said you need a map anyway?

Is branding irrelevant then? Absolutely not. The whole experience of the site and the flow of searching and finding a local store on a map is highly correlated to the experience of the underlying brand. But not necessarily on an atomar interface level. A positive correlation plays out on a higher and more abstract perspective like in distinct routes or flows.

On the other hand there still is a connection from brand to IxD on an atomic level, but unfortunately not in a positive way. If you violate usability principles in details of your interface, it might harm the overall branding experience. And more so, if these violations are connected to essential brand values the damage can increase tremendously. Back to our map example, if “reliable” is an essential brand value of yours, your system shouldn’t crash while the user is performing critical tasks. Actually, systems shouldn’t crash at all, but if your brand is strongly built on this value, the damage can be much more devastating. A banking systems crash is more critical than the outage of the online order system of your local pizza store. Both crushes suck in many ways, but your local pizza guys brand may not be built on reliability and the real life damage is of course much smaller. The pizza might still taste good, next time you’ll just use the phone to order it.

To say it positively: With good usability you create good experiences and if you map your essential brand values to proven usability principles like the ones from the ISO Norm 9241–110, you can learn in which areas you should invest maybe a little bit more to get the highest alignment between branding and UX. Don’t overdo it or get too literal, like spicing up button tooltips with motivational text quotes because your brand personality is a “motivator”. Usability still trumps brand values and still nobody likes to read a lot in digital systems, especially if the text is highly out of context and use. But when dealing e.g. with a multi-page registration form, you could take extra care of the user’s accompaniment in this process when having the personality of a “motivator”. Think of showing transparently where the user is located in the progress and find ways to motivate him to click further, like with progress bars, promising rewards or motivational forms of wordings. It can be small stuff, but it can be perceived on a bigger scale. Best would be the user feels at home and safe with his brand, because this interaction flow played out the way he is used to feel about the brand on other levels.

In this context, I stumbled upon an interesting article of the Nielsen Norman Group referring to a study from 2016 of UX consultant Peter Tolstrup Aagesen and interaction design researcher Clint Heyer, that try to map certain interaction attributes like inconsistency to emotional attributes like anger or surprise. I like the approach of diving deep into the question whether there is a quantifiable relationship between IxD and brand perception but the results didn’t help me with answering further questions about how to apply it in real life projects. It is a good contribution to the discussion of whether branding plays a role in IxD or not, but as stated before, in my opinion, the study was too focussed to be applicable to bring something new to the next client meeting. This is why I wanted to work out a gameplan on how to connect branding and IxD in your next styleguide project.

The IxD into Styleguides gameplan

Step1: Understanding users and context
Still, the most important thing to start with in any IxD project is to know your users and the given context of the interaction you are looking at. The results of your research activities about who it is, that performs the action, what the goals of these actions are and what the physical, psychological, spatial, temporal (…+many more) conditions are under which these actions are performed, are the main basis to rely your IxD decisions on. In my opinion, this is the most underestimated but also most powerful part of UX-Design. At first do it right on that level, you will already have achieved much if you get your research and the resulting user requirements straight. The rest will follow.

For your styleguide: Don’t put every little user requirement in there of course. But display the main results, that you worked out on basis of your research, like most certainly personas, important scenarios or usecases. If users perform their tasks mostly in a darkened room (e.g. in a medical context) it surely should be shown somewhere in the styleguide. If users are likely to use a website on their mobile devices (e.g. while being at a festival), put it in the styleguide. These informations have a massive impact on how designers can shape the product around real users needs and goals.

Step2: Understand your own brand
As stated before, if you are not in charge of your brand you can not base any IxD decisions on that lack of clarity. If you have never worked out a detailed brand documentation though, it will help to find an agreement on the most important elements to get a common understanding on what these brand values are. Go answer yourself the following questions, if possible.

Motives and emotions of your personas
Which emotions and motives resonate most strongly with your user/customer persona(s), when coming in touch with your brand?

An interesting psychological approach in this context is that of German neuroscientist Dr. Georg Häusel: The limbic map. It may help you identify the user’s most important motives and already may give you clues about the areas in which your design efforts should be most attentive.

Example: If you are running an online banking system, your clients will most likely resonate with values from the discipline/control area of the limbic map, like safety, security, order, duty or functionality. There will be single aspects of other areas like trust, easiness or autonomy but when it comes to real cash it is hard to imagine that dreaming, rebellion or fun are vital factors.

Brand vision
What is the overall vision of your brand, your company or your product?
How are you changing the world?
What is the underlying DNA of all your activities?
What is the long-term alignment of all your efforts?

Brand positioning
What are your unique selling points and what sets you apart from competitors?

Brand performance
What are the strengths and competencies of your brand?
How do you verify each of these strengths? (Find real life proofs, why you are so good at what you do.)
Which term best describes the sum of all these strengths?

Brand personality
Would your brand be a real person, which adjectives would best describe it?
In one word, what would that person be then? Is there an archetype for this? (like e.g. adventurer, pathfinder, seductress, mother …)

Brand experience
If one of your users/clients would have to describe the experience that you would like him to have, what would that be in one sentence?

For your styleguide: I would put the summary (1 page) of these brand essentials into an IxD styleguide, if you think you have worked them out carefully. Again, it really helps designers to empathize with the target audience and to gain a deep understanding of the own product and organisation. It is a solid foundation for developing design solutions and it helps to get everybody on the same page regarding the introspection of the own brand.

Step3: Identify connections between brand values and your interface
Now here comes the synthesis of both worlds. If you are aware of your brand essentials you should now have a better feeling for the parts of your interface that need special treatment. Which usability principles e.g. of the ISO 9241 correlate most strongly with your brand? In which context do these principles come to play?

  • suitability for the task
  • suitability for learning
  • suitability for individualisation
  • conformity with user expectations
  • self descriptiveness
  • controllability
  • error tolerance

Let’s go back to the example of an online banking platform for this. You found out that the emotions and motives of your users are centered around safety, security, reliability, functionality, trust and easiness. Your brand is performing very well in the areas of service, quality, security and innovation, in summary, you would say that you provide state of the art online banking. Your personality is the trustworthy wise, because you are ambitious, innovative, helpful, smart and, well, trustworthy. A real partner when it comes to financial issues.

What do these brand values tell you about IxD in areas of your interface like creating an account, logging in, making a transfer, downloading tax documents, getting in contact or understanding net worth over time?

It could very well mean that you should take special care of self descriptiveness and controllability so that the user always ends up with the intended results. If your system is e.g. built to block users out after 3 failed login attempts, let him know that clearly when he is heading towards this situation and give him the necessary controls to correct his error without lowering the level of security that is needed in this context. What should the experience be like if you are the trustworthy wise? Well, maybe you are initiating a dialogue right from the moment the login fail happened, offering a quick workaround to assure that he/she can enter again as quick and easy as possible. How can you even prevent this from happening at all?

For your styleguide: When documenting all these insights in a styleguide, it is important to catch the essence of it all rather than going into too much detail. The essence would be the interpretation of brand characteristics into IxD language. It could be something like: Since our brand personality is the “caring mother” we want our experience to be consistent, helpfull, understandable and always approachable. This correlates strongly with suitability for learning, conformity with user expectations, self-descriptiveness and error tolerance. Labels or headlines shall always be clear and unambiguous and in case of a doubt there is always help around the corner. It is important that no critical mistakes can be made and false actions can always be undone. (… and so on).

Again, it could get atomic on a level like saying that every icon should get an alt-text when hovering over it, but I wouldn’t get too specific because you risk having to throw away the whole guide after the next bigger redesign project. Which are the rules that will stand the test of time? These would be interesting to put in a styleguide.

A few last words

This approach may be best suitable for larger projects with clients for whom branding is an essential part of business, but I think also smaller companies could benefit from these ideas. And it will take time, money and commitment of various parties to broaden the perspective on styleguides in this way, but again, I think it’s worth it, because, if you get to align your brand values and your interfaces, the overall experience will highly benefit.

I hope I could contribute to the discussion, please let me know if you agree or disagree on that matter, but please don’t hate. If you really liked this article show some love by pressing the green heart below.

I’m writing other stuff on Medium.
I’m on Twitter
I’m on Linkedin 
I have a website

Show your support

Clapping shows how much you appreciated Christian Ringleb’s story.