EMOTIONAL DESIGN
Designing for emotional highs & lows
Celebrate with users, stand by them if they are in trouble
Design for the whole spectrum of emotions
In his original model, Aarron Walter’s pyramid looked like this: functional → reliable → usable → delight. In 2020, he published his redesigned model, and changed delight to “all emotions”, since the whole emotional context matters, it shapes the experience users have when they interact with your product or service.
Key moments
You should identify key moments in the user journey, and then specifically design for these moments. The moments of truths are the interactions with the highest impact, optimize these first. The key moments:
- can make or break the experience
- influence users’ impression of the brand / product
- are opportunities to make users’ experience better.
High points
In case of peak moments, you can amplify the positive emotions, for instance, celebrate milestones, task completion or other good events with users.
A closely related cognitive bias is the peak-end rule: people tend to evaluate an experience based on these moments: the peak and the end.
Your opportunity is that you can turn neutral or boring moments to peaks.
Low points
Design for low points to make them less painful. In case of a challenging emotional context, users might feel e.g. fear, stress, anxiety, mistrust. The question is: how might we support users in these situations? Discover these points or moments as a result of your research activities, and ask “what can go wrong” during the actual design phase to better prepare for these.
Empathize with your users
Users should feel that you understand what they are going through. So conduct research, and then synthesize your findings (using methods like empathy mapping, user journey mapping, user story mapping, scenarios and personas). Emotions are part of the users’ context, part of the human experience.
Examples
Designing for high points
Celebration creatures inside Asana — an example
You get a celebration creature (e.g. a unicorn) for marking a task complete (not always, but sometimes — so it is also a variable reward).
- it acknowledges users’ success
- it is an optional setting (since it might annoy some users)
- it helps Asana build a loyal customer base
Designing for low points
Turbotax form by Intuit (I heard about this example from Aarron Walter)
Users really appreciated this sentence: “We are sorry to hear about your loss. You can count on us to help you get Jack’s tax return done right.” It shows that:
- You care
- Your brand has a “human side”
- You understand the emotional context
One good sentence can make a huge difference.
Surprise
You can use the element of surprise (a surprise is an unexpected thing or event). It might result in a positive experience, it grabs the users’ attention, and it might make a moment more special and memorable.
Find a good balance: don’t overuse it, and keep in mind that it is not for every context.
Some examples for using surprise:
- hidden messages (e.g. fun copy)
- entertainment (it might lower the perceived waiting time), e.g the T-Rex game
- easter eggs
- microinteractions, animations
An easter egg inside Google.com: search for “the answer to life the universe and everything” — the answer is 42 (it is a reference to The Hitchhiker’s Guide to the Galaxy by Douglas Adams)
More real life examples
Celebrating the high points: some more examples
The confetti UI design pattern has been really popular, here are some screenshots:
Becoming a backer on Kickstarter — that is a moment to celebrate!
Upgrading to a paid plan in Typefully:
Revealing a gift inside Design.gifts (an advent calendar designed by Fons Mans):
Success moments inside Wise:
The awesome wise.design documentation explains how they use Wise Sans:
“Use Wise Sans for key success and selling moments to add that extra bounce to our brand. It’s designed to be short, sharp and stand out. […]
Key moments include:
- success screens — wham, bam, thank you ma’am
- success progress screens — let users know what’s cooking
- feature intro screens — all caps for all aboard”
Standing by the users, helping them out: some more examples
Typing passwords might be a frustrating experience, Slack knows that, and offers a solution:
One more example from Wise — this time it is designed for reassuring users during a valley moment, an emotional low point: “Sorry for the wait — we need a bit more time to process your transfer. We’ll keep you posted.”
Do you have more great examples? Please share them in the comments!
Do you like my sketches? Support my work!
If you like my sketches, you can buy me a coffee to support my work! Thanks, I really appreciate your encouragement! 🙏
If you like my sketches, check out my Sketching for UX Designers course on Udemy, use the coupon code SKETCHFORUX202401 to get 81% off! Click here to apply the code.
You can subscribe to my Sketching for UX newsletter to get my newest UX Knowledge Piece Sketch directly to your inbox each month. I also share my favorite design and visual thinking links.
Get my Sketching for UX Designers Workbook here for free (and you can choose to support me by paying a couple of dollars, I really appreciate your support!)
You can also grab a copy of my 100-day Long UX Visual Library Building Challenge book (also on a pay-what-you-want basis).
💬Please let me know what you think, I always appreciate you feedback!
