Harnessing Emotional Design in Digital Products

Overview

This article focuses on people’s emotional reactions as they happen in the digital world, helping designers create better user experience and form long-lasting bonds with the audience.

If you think of yourself as a logical and rational being, you are only half right. This idea is confirmed by Peter, who purchased a piano just because it looks similar to the one his beloved grandpa had; and by Janisse, who bought a chocolate bar because of its eye-catching cover. Maybe you know some people who are, just like Peter and Jenisse, driven by emotions when making decisions? We bet you’re nodding your head now.

Humans are driven by emotions a lot, and only from time to time, they’re logical. In fact, according to Herbert Simon, American Nobel Laureate scientist, most people’s day-to-day decisions are not only influenced but entirely determined by emotions. Is it somehow bad? Not at all!

Despite the tremendous impact emotions have on our decision-making mechanism, there are still two kinds of things going on in the brain — cognitive and emotional. And the former is always alert, trying to understand the world and weighing all pros and cons.

But this article focuses on people’s emotional reactions as they happen in the digital world, helping designers create better user experience and form long-lasting bonds with the audience. From the material below, you’ll learn how to master designs that evoke emotions; how certain digital products make users feel; and how to use emotions to drive customers to action. So, buckle up, and let’s get going!

First things first: What is emotional design

Before going any deeper into this topic, let us explain what an emotional design is. Basically, it’s a concept of creating such a design that sparks emotions, either positive or negative. Sounds easy, right? So, we move on.

Positive emotions are best to build customer loyalty and drive clients to act. But never underrate negative emotions. They can be of help too. Just think of chilling thrills caused by horrors. They aren’t bad and useless, especially when it comes to driving curiosity or grabbing attention.

The rule of thumb is: people always think, perceive, and react. So, try to address cognitive responses when designing something. According to the researcher of an emotional design Don Norman, there are three of them:

Visceral. Love at first sight happens right here as it’s the most basic level of emotional response. If the user’s first encounter with the product is successful, visceral reactions create a positive context for the following interactions.
Behavioral. It’s about how we use something and whether we like it or not. In terms of design, the behavioral level is responsible for evaluating the product’s usability. How easy is it to find the required solution? Does the interface look cluttered or not? Positive behavioral reactions encourage trust and reliability.
Reflective. Here come the conscious reactions where users evaluate the meaning of the product. It’s the highest cognitive level, although emotions still influence it. The overall impression is formed at this stage.

Every cognitive level is of high importance. When the three of them are satisfied, a long-lasting emotional connection can be built between the audience and the product, whether it’s an app, a website, or anything in-between.

Emotions in digital product design: How to nail

In this section, we’re revealing the most popular ways of applying emotions in digital product design and addressing each cognitive level. Ready? Let’s cut to the chase!

A bit funny never killed nobody

Humor is the king when it comes to tickling users’ fancy and providing a pleasurable experience. Sure, you can’t use hilarious jokes and witty remarks in all design scenarios. But it’s all about smart application. Sometimes even serious websites need a bit of wittiness to maintain a perfect balance. When used right, humor can be the bait, evoking a sense of joy, making users perform the desired action, or simply prolonging the session duration.

Bad experience — not a verdict yet

Websites, just like people, can mess up, and that’s okay as long as designers are able to turn a lousy user experience into more tolerable. The most common example is the Google Chrome dinosaur game offered to users with poor web connection. What a cool way to spend time waiting for the internet to be up and running again, huh?

As a UX designer, you’d better consider some interactions on a 404 page. It always hurts to be rejected by the website when there is no such page, or the service isn’t functioning. Not to make a user even more depressed, turn your creativity to the fullest. That’s where you can apply humor without risking it being inappropriate.

Instead of tedious “ERROR”, offer users a small reward to reduce the degree of tension. It can be a short yet helpful guide or an e-book on a topic related to the website. The reward can also be a video or a voice message wishing a good day or a mascot looking confused but cute, elevating the negative experience. By the way, mascots are our next stop here.

Mascot: just add a bit of cuteness

Why do you need that design if there is no little kitten, hilarious monkey, or an awkward who-is-that-guy creature in it? Dunno. It’s a rhetorical question.

Okay, easy, not every digital product design needs a mascot. But it’s always good to consider having one to engage users and make their experience funnier and more personal. Mascots aim to build a stronger connection between a client and a product evoking sympathy for it. Think of M&Ds guys, Michelin Man, Mr. Clean by Procter & Gamble, Julio Pringles, or Geico Gecko. They aren’t just pretty but give their works a signature personality and elicit a positive user reaction.

Speaking of which, Lazarev.agency is no exception. We've got a pretty awesome mascot named Batumba who takes center stage on our About page. In fact, this dude even has his own Twitter account where he gives you a behind-the-scenes peek into agency life.

Although introducing a mascot might sound fun and safe, there is one tiny thing to keep in mind. Steer clear of any sorts of bias when creating a mascot, especially racial and gender stereotypes.

Micro-interactions to establish connections

When working on a digital product design, think of adding micro-interactions to delight the user, boost engagement and add a human touch to the whole experience.

Micro-interactions are events with one particular task found on the website or within an app. Like swipes that eliminate tapping and offer interactiveness, animated buttons, unusual tutorials, emojis, and sounds — everything that makes the user experience more personable and welcoming.

We can’t leave without attention the Apple’s screen that shakes once you enter an incorrect password. It mimics the human’s gesture to refuse something, building a strong connection with the user.

Designing for emotion: techniques explained on UkrainianPower case

We continue exploring emotions in digital product design, but in this section, we’re going to rely on the Lazarev.Agency real-life case. Welcome UkrainianPower, 8 times award-winning website that promotes partnership between Ukrainian creatives and global firms.

After a full-scale russian invasion of Ukraine, creatives lost many of their local clients as businesses started shutting down and cutting costs. Ukrainian agencies had no other choice but to enter the global market, looking for new customers and sources of livelihood.

To encourage international companies to partner with Ukrainians, Lazarev.agency built the experience by combining emotional storytelling and rational understanding. Wanna know how exactly we reached the outstanding performance results by evoking the right emotions? Then keep on reading. In the upcoming sections, we’ll dive deeper into the emotional design strategies by analyzing the UkrainianPower case.

Storytelling: how to tell a memorable story

Once upon a time, one nasty terroristic country named russia invaded the small but truly brave Ukraine. Russia planned to occupy Ukraine in three days, but it didn’t happen as expected. Ukrainian people were ready to defend their land and started fighting, some — on the battlefield, others — in the rear supporting the army, refugees, and the country’s economy.

Creatives were one of those ready to do whatever it takes to help Ukraine, donate and move the victory day closer. But the russian invasion made it difficult to benefit financially from the local market. The UkrainianPower website was created with one clear goal — to help the Ukrainian creative agencies reach out to new markets and showcase their expertise.

As you can see, the whole idea of this website is driven by a terrible yet very motivating story about brave people who aren’t giving up but fighting. The storytelling line moves users throughout the whole website, guiding them down from war anxiety to business stableness. The narrative connects with the international community on an emotional level and shapes their minds on partnership.

To create a memorable story for the brand, stick to a few simple rules:

Introduce the conflict. If your story has none, you’re probably not telling a story. There is no need to be overdramatic. Just think of the problems the target audience has and provide a solution.
Structure your story. To accomplish that, let your narrative answer three questions: What? And then what? So what’s the point? The first part should introduce the problem, while the last one brings results and conclusions into a game.
Trigger the right emotional motivations. The most powerful are: a desire to succeed; feel secure; be confident about the future; freely choose the way to live; avoid stress and health problems.

Storytelling is an effective instrument, and our case proves that. Being launched at the end of June 2022, UkrainianPower gained much publicity all over the world, shaking Cannes and being written about in 10+ Ukrainian and international media, including Adweek. Statistics say that the website was visited over 10 thousand times over one month. It was nominated for the most prestigious awards like FWA, Awwwards, and RedDot.

Colors and emotions: how they relate

When used correctly, colors can make people feel happy or sad, anxious or relaxed. Those reactions are culturally imprinted and rooted in psychological effects.

In the UkrainianPower design, we added red accents in text blocks to deliver the emotional drivers behind the Ukrainians' desire to fight for work and survive. The green palette at the end of the page relieves the emotional pressure and highlights partnership benefits between Ukrainian and international agencies.

Use the color palette wisely when delivering messages and driving users to take action. For instance, leverage the power of pastel colors like lilac, mint, or baby blue to calm and relax users. Or go for muted and cool colors to express sadness and grief.

Impress users with details

As Leonardo Da Vinci once said, “Details make perfection, and perfection is not a detail”. Who are we to argue with Leo?

As mentioned before, such small things as swipes or animated buttons can make a difference to your design and evoke emotions.

Returning to the UkrainianPower case, it’s all about details making a user experience more personal and interactive. For example, we added the hover effects on awards blocks to add playful vibes. Such a website’s interactiveness engages people and extends web sessions.

There are also animated circles with 3D elements. They make people stop and choose whether they want to see Ukrainian agencies as their competitors or equal partners. We added a blur hover effect to tell that the pursuit of partnership is the main purpose of this site.

Another thing that highlights the emotional stress caused by war is font. It’s rather sharp and straight. Besides, its density in the layout is quite high, which demonstrates the tension of the situation. The right accents are made by using a large font size and stretching it to the entire site. That looks pretty much like a scream eager to emphasize the incredibly unfair situation with the war.

The Lazarev.Agency designers also decided to attract users’ attention to the problem by using an irregular structural layout. It looks new and unusual, arousing interest and highlighting the issue described on the website.

Speaking of details, we can’t overlook the website’s background, which isn’t pure white but contains noise. The grainy veil in the background impacts the user’s mood focusing on the chaos and devastation caused by the war.

Motion for emotion

It’s said that “A picture is worth a thousand words”, and we have no intention of arguing with that. However, we’d like to add a small yet important remark. The effect of a picture can be doubled by making it movable. In simple words, motion in design is a handy instrument to engage users and deliver messages more efficiently.

In the UkrainianPower case, we needed an instant attention-grabber capable of informing users about the situation in Ukraine. We understood that things such as coming to another country, killing civilians, and destroying cities with missiles are difficult to comprehend for civilized people living in a time when everything is resolved in a diplomatic way. That’s why we added a powerful video. Instead of telling how horrible the war is and how much grief it brings to peoples’ lives, we showed it.

We also used videos to introduce each of the agencies presented on the website. Instead of telling how cool they are, we showed it allowing the creative teams to tell their stories in a more dynamic and engaging way.

Don’t underestimate the power of motion in your design. It’s best to tell stories, describe complex concepts and instantly convey the brand’s message.

As a wrap-up

Phew! What a long yet informative journey in the world of emotional design. Now let’s summarize. You can address three levels with an emotional design: visceral, behavioral, and reflective. When putting a premium on each of them, you can add value to the product and create a truly delightful user experience the customers will love.

And remember that emotions certainly matter, but the product’s functionality is important too. So, before considering the design’s pleasurability, make sure it solves the users’ pain points and passes the usability test.

And before you close this tab and walk away, add our website to Your Favorites for more digital product design tips and inspiration. Hit us up if you're looking to inject some serious emotional design into your project! See you next blog post 😉

Oleksandr Koshytskyi

Design Lead

September 14, 2022