Emotional Design Examples: How to Enhance Your Product UI/UX Design

Think back to that one app that makes life better for you. What made it unique to you? Can you list the things you love about it? If you’ve ever had a fantastic product experience when using an app, you’ve seen emotional design examples in action.

At first glance, emotional design feels negligible.

Some SaaS founders would argue that functionality trumps all. But here’s a twist: emotional design makes the difference between failed and successful apps. For people to love your app, they must feel an emotional connection to it.

In this article, you’ll learn why emotional design is important, what it means, and how you can use emotional design to enhance your product UI/UX design.

Ready? Let’s get right into it.

TL;DR

• Emotional design focuses on generating user engagement through emotions. It is the process of designing products to evoke an emotional response such as joy or excitement from a user that drives them to take action.
• Emotional design creates positive emotions in users that drive product stickiness or a negative emotion making them leave the product churning.
• When users have a positive experience, they have a higher level of tolerance and will overlook minor bugs or defects in any product.
• For emotional design to enhance a product, it must be functional, usable and reliable.
• Emotional design can be categorized into three levels using Don Norman’s explanation: visceral, behavioral, and reflective.

How to apply emotion design:

• Cut back on waiting time within your app to reduce user frustration. For example, you can use colorful graphics and a short message on your loading page to enhance the users’ in-app experience.
• Use microvideos like video tutorials to onboard new users in your SaaS.
• Behavioral design gives you a deep understanding of the user’s behavior when interacting with a product. Carry out user testing to evaluate your product with real users.
• Personalize onboarding for each user segment to help them feel welcome.
• Use in-app guidance to show users around and guide them when they need help.
• Reflective design examines the emotional response of a user after using a product. It allows users have cognitive responses to products.
• Humanize your product with funny microcopy to prevent users from having negative emotions when using it.
• Prioritize usability as well as accessibility when designing to cater to all user segment.
• Keep users entertained with gamification elements that evoke positive emotions.

What is emotional design?

Emotional design is the process of designing products to evoke emotional responses such as delight or excitement from a user. This way, you create products people find valuable, usable, and desirable.

Emotional design focuses on creating an exceptional user experience. It is based on the idea that if users have a positive reaction to a product it leads to greater user loyalty, and ultimately increasing revenue.

How emotional design impacts the user experience and product adoption

Gone are the days when all you needed was a functional product. Today, emotional design impacts the user experience by enhancing user satisfaction, customer loyalty, and trust. It also helps people adopt a product faster.

Here are other ways emotional design can have an impact:

Creates a positive emotional reaction that drives product stickiness

When people love using a product, they become emotionally attached to it and keep using it. This is called product stickiness.

When a product sticks, it means the product is satisfying the user’s needs, and soon enough, they’ll spread the word about it.

Decreases the automated negative emotional response to bugs

When users have a positive experience, they have a higher level of tolerance and will overlook minor bugs or defects in any product.

This is because when we’re happy, our bodies are more relaxed and more positive. And we’re very forgiving too.

A good example is using colorful graphics and a good microcopy to distract users from a broken link.

Increases adoption due to positive experiences

As human beings, we buy using emotion first and then justify our actions with logical reasons. A well-designed product gives us every reason to buy it.

Combined with great functionality, this leads to an increase in product adoption.

Provides a competitive advantage to a SaaS company

Emotional design is the secret sauce to every successful SaaS company.

Companies like Slack have mastered this secret to creating products that users love and recommend. With it, they easily dominated the internal communication category, putting them above all their competition.

The prerequisites of emotional design

It all starts with a product that works. A good design might catch a user’s eye at first sight, but they’ll churn if it doesn’t live up to expectations.

It’s like using a beautiful website with a long loading time. How frustrating is that?

If design attracts the user, functionality keeps them interested. Both parts play an equal role, but if one is prioritized over the other, the product suffers.

Maslow’s hierarchy of needs explains this concept better and it can be applied directly to emotional design.

For a product to satisfy a user’s needs, it must answer three basic design questions: How useful is it? How innovative is it? Is the product easy to use and understand?

• Functionality: Build a product that’s easy to navigate, accessible, and user-friendly. When users derive value from a product, it’s easy to retain and convert them into paying customers.
• Usability: How easily can customers understand the product’s UI? Does it pay attention to details like helping them complete tasks faster?
• Reliability: Most people have a positive emotional response to products that are reliable. Do they constantly fear when using your product? Or are they certain they won’t be disappointed?

When a product meets all three criteria, then designers can move on to identify the emotions they want users to feel when using it.

How to evoke emotions using Dan Norman’s three levels of emotional design

In his book, Emotional Design: Why we love (or hate) everyday things, Don Norman breaks down the emotional connection into three stages—visceral, behavioral, and reflective. These stages are connected, i.e., they happen in sequential order.

1. Visceral: This is what happens the first time you see a product. Some call it a gut feeling. Others call it intuition. Whichever you choose to call it, visceral design informs how a user perceives a product.
2. Behavioral: How easily do users find your app? What features matter most to them? This is what behavioral design answers.
3. Reflective: This is when users make a conscious decision after using a product. Was it easy to use? Enjoyable? Or was it difficult for them to complete a task? This is where they decide to either stick around or bounce.

Visceral emotional design examples

Visceral emotions are feelings that are very deep and difficult to control. Just like love at first sight. Or when you have a gut feeling about something. That is what visceral design is all about.

In SaaS, this translates to the “AHA” moment or moments that you create for your users. It usually happens during the first-time user experience, right before a user creates an account or during the signup experience.

But if it doesn’t happen during these moments, it doesn’t mean it won’t happen later on. These first Aha moments are crucial as they will trigger an emotional response that influences how users feel about your product.

Here are some examples:

Drive positive emotional experiences with the right copywriting

Waiting times are frustrating. Rather than having users wait, fill them with loading screens that help users understand what’s going on. For example, you can add short messages to confirm the app is loading.

Let’s take a look at how Userpilot does it.

On the loading page of the main app dashboard, we show the app functionality with small graphics, icons, and short messages, confirming that the app is loading. Combine this with in-app experiences like tooltips and modals to increase profits.

An alternative is to use tips or inspirational messages to make the wait more enjoyable. Again, let’s look at this example from Userpilot.

This inspirational message comes up while loading the Chrome extension builder, with which you can create in-app experience flows for users. See how the graphics and message tell a story? Use that.

Inspire positive associations with clever images and messages

Would you rather speak to a robot or a friend?

Tiny details like the tone of voice dictate how people respond to a product. A friendly microcopy humanizes the product and inspires action. A lack of it gives customers a reason to churn.

Use micro-videos to enhance the first-time user experience

Would you rather watch a video or read through a long text to learn about a new app? While text might help to an extent, video is more effective in onboarding new users.

It’s more visual, more actionable, and more personal.

Replace the blank empty state with tutorial videos. Just like Loom did with this screen. See how they took advantage of the empty state to display video tutorials to create a connection with the user.

Behavioral emotional design examples

Behavioral design is centered on the user’s behavior when interacting with a product. It focuses on the usability of an app, which includes elements like product effectiveness, efficiency, engagement, and ease of use.

Empathy is the provenance of behavioral emotional design.

It begins at the first stage of design thinking, where designers visit users in their natural environment and question their behavior. So, when designing products, it’s important to ask yourself how you can make your users’ experience as pleasant as possible.

Personalize the onboarding experience for each user

How do you feel when something is designed just for you? Special, right?

That’s the power of a personalized onboarding experience. Instead of taking every user through a generic user journey, add a personal touch.

A great example of this is expressed in this onboarding flow from Notion. Observe how their users are categorized into two segments. Everything from the image to the microcopy and even the CTA is customized for each user segment.

Use interactive videos to enhance the experience

Help users engage with your product’s features easily with step-by-step handholding.

Use small-driven actions (look like tooltips but are not) that guide users step by step, telling them what to do. Once an action is performed, the next clue is triggered.

The result: a positive experience even when engaging with more complex features. Take inspiration from how Kommunicate helps users set up their chatbot for the first time.

Focus on how the cursor interacts with the UI elements and makes it feel like someone is at the other end of the screen.

Focus on contextual in-app communication and guidance

The key here is being contextual.

Don’t clutter the UI, show help when the user needs it.

When users walk through your product, don’t leave them alone to figure it out on their own. Make in-app guidance part of the experience and blend it in across the journey.

This way, you can create a design that follows your brand and display the right message when users need it.

In-app guidance could be small hints like hotspots that drive the user’s eye to one UI element. Here’s an example of how you can set up a hotspot with Userpilot. Check out how this micro-video directs the user’s eyes to demonstrate how they can change the animation type in a simple step.

Likewise, use small tooltips that offer short information and help users discover the product’s main functionality. Combine with great microcopy to help the user understand the function of a feature in seconds to help them engage better with it.

You can also use a banner to keep users updated on the latest changes without disrupting their experience.

There’s nothing more frustrating than interrupting people to make a new feature announcement. Banners resolve this issue, here’s how you can build one with Userpilot.

Reflective emotions design examples

Reflective design examines the emotional response of a user after using a product. This is where you consciously evaluate a product. You might ask questions like:

• Did the product solve your problem?
• How did you feel?
• Would you use the product again?
• Or is it a no-no for you?

In the case of an online store, for example, this could mean how people feel after shopping for the first time. If the shopping experience was frictionless, they would share their experience and always come back.

Reflective design is impacted by the overall experience of engaging with your product or customer support/success teams.

You can impact and change the perception of negative experiences with good UI feedback that will leave a feel-good impression. With this, it’s easy to uncover unhappy paths and increase product stickiness.

Humanize your product with funny error messages

We all make errors… humans and products alike.

But a good error message humanizes your product and keeps users entertained when this happens. It replaces the initial feeling of irritation and transforms the user experience into a memorable one.

Like this funny error code that Asana generates when something goes wrong. When you need to pass this to the support team, telling them ”5 evil cobras jog sadly” kind of puts a smile on your face. Of course, the error might have a big impact on the user’s job so make sure to take support issues seriously.

Use color and contrast with accessibility and usability in mind

Color has been occasionally linked in psychology to dictating how we respond to situations. When combining colors and contrasts, prioritize usability as well as accessibility to cater to all user segments.

A great example of this is Asana. To help users with impaired vision, they toned down their color scheme to make their experience more comfortable for everyone.

Evoke positive emotions with gamification elements

Entertain users with gamification elements. There are lots of SaaS companies doing this, but nothing beats Asana’s little monsters, called celebration creatures.

Celebration creatures celebrate the successes of individuals and teams, for example, when you complete a task.

These little creatures add personality to the brand and make it memorable. Plus, they have all the great effects of gamification, which drives more engagement. We all tend to repeat actions that drive positive emotions and success.

Conclusion

At the end of the day, emotional design is all about designing for people. People care about how they feel when they’re using products, so you need to consider how your product makes users feel during their moment of interaction.

This plays a large role in a user’s willingness to use your product over other similar ones. It’s important to make sure that your product meets the user’s needs without alienating them with a bad overall experience.

Want to build product experiences code-free with Userpilot? Book a demo call with our team and get started!