How to Design Emotional Products

JTBD + Emotions-To-Be-Felt

The famous Jobs-To-Be-Done framework helps PMs and Designers figure out what functionality to design for a product, but not how to design the actual experience. For that, it helps to pair it with Emotions-To-Be-Felt.

When asked what emotions we want people to feel, most Designers and PMs will default to delight. We strive to delight the user for a good reason: bad experiences make life miserable. So when we create something new, it makes sense to aim for the opposite of misery. But not every moment should delight. Sometimes we want to experience other feelings: respect, privacy, security, gravity, poignancy, efficiency, veracity, and on…

Clippy’s smile, upbeat automated phone trees, and vibey on-brand chatbots can accidentally feel awful if they fail to adapt to the emotional state of the user. Jokey or goofy error pages have no place when it really matters (like taxes or medicine or lost data or failed purchases). In these situations, if you encounter a moment of snark or a goofy nonchalance, then the emotions triggered in the customer veer away from brand-love straight towards resentment & rage. The solution? Design it.

A framework: fill in the blanks with your own emotional designs

How to do it:

1. Draft your emotional Before/During/After for each moment. Challenge yourself to superforecast how you think people will feel at each moment. Design, adjust, re-adjust.
2. The most important moment is the first impression. Design your first impression moment to load instantly (under 0.5 seconds) and communicate a positive emotion — trust, fun, love, helpfulness, cool, support, empathy, understanding, community, unity, joy, security, abundance, opportunity, excitement, or hope. You want to signal the transformation instore for the customer if they use your product—how this product can help them take one step closer to becoming the person they want to be.
3. Your first impression moment should also have a near-instant load time inside the customer’s brain — no difficult double-negatives, no way-too-clever puns or “insiders-only” jokes that might be lost on a potential customer (who is by definition not yet on the inside). Skip anything you have to explain or think about more than once to understand. Deeper meaning comes later. Billboards are straightforward for a reason, you must be able to get it in under a second, driving at 70 mph, while changing lanes and taking a video-off zoom call. There can be deeper meaning… additional layers to your vibe onion… but the surface-level, first-glance, reading of the moment must instantly convey an emotional truth.
4. Test it out. Analyze the rhythm of the emotions you are generating. Watch the faces of real people as they use your product. Ask them what they expected to happen when they took an action. Ask them how they feel while trying to use your product.
5. Adjust each moment until it does the intended emotional work.
6. Redesign jokey or too-casual error and 404 pages. Don’t try to pretend everything is ok when something is actually broken. Be aware and respectful of people’s frustration. Even Twitter eventually retired the Failwhale (although it was charming and fit the moment and the vibe during the early years).
7. Pushing a button is a moment of high anxiety—did the button push? Did it work? Should I tap again? Give people instant, multiple sensory responses that a button was indeed activated: change the color, animate it, give it a haptic response, do something — anything—just don’t leave people in the nervous state of “did it click?” “should I click again?” These micro-moments of anxiety add up over time.
8. High-five your customer when they win. Offer a very brief animation or some sort of clear “it worked” message with a distinct visual change after a transaction or big action. Warning: do not show a celebration animation when something goes wrong. Do not make the customer wait while you load a funny error page animation. When something goes wrong, instantly load something helpful or apologetic or considerate. When something goes right, keep the high-five short… no one wants to be exhausted by delight.
9. Pay special attention to the tone during moments when a person has tried to do something multiple times and failed. Mess this moment up and you’ll lose this person forever. Don’t let an offensive error message increase your churn.
10. Change the default button text away from “Submit” to something less overbearing and domineering. Whenever I see “Submit” on a button, I think of that scene in Superman II —where the bad guy shouts Kneel before Zod. Instead, pick a more appropriate vibe for your button.