Chapter 1. Emotional Design – Designing for Emotion

Chapter 1. Emotional Design

Revolution: Something Lost and Something Found

Powered by a chain reaction of ideas and innovations, a revolution of industry swept the Western Hemisphere in the late eighteenth and nineteenth centuries. In a relatively short time, we discovered ways to transform mined materials into manufacturing devices, transportation systems, and agricultural tools that fueled the twentieth century’s explosive modernization. Inventions like the cotton gin, machine tools, the steam engine, the telegraph, and the telephone promised a future filled with technological innovation that produced significant industrial advantages.

Though the Industrial Revolution sprang from a utopian vision of innovation, millions were exploited or enslaved in the process. Industrialization put the machine of innovation first and human needs second.

As the machine found its place in our world, the human hand’s presence in the production of everyday objects slowly faded. Factories that could produce goods faster and at a lower cost replaced skilled craftspeople like blacksmiths, cobblers, tinsmiths, weavers, and many others.

But some challenged the myopic march toward industrialization. As mass production expanded in the mid-nineteenth century, artists, architects, and designers founded the Arts and Crafts movement to preserve the artisan’s role in domestic goods production, and with it the human touch. The founders of the Arts and Crafts movement revered the things they designed, built, and used every day. They recognized that an artisan leaves a bit of themselves in their work, a true gift that can be enjoyed for many years.

In the present day, we can see a few parallels. A quest for higher crop yields and lower production costs has transformed farms into headless corporations pitting profits against human welfare. But local farmers are finding new markets as consumers search for food produced by people for people. While big-box stores proliferate disposable mass-market goods, platforms like Etsy, Kickstarter, Shopify, and Squarespace are empowering artists, craftspeople, and DIY inventors who sell goods they’ve designed and created.

Enmeshed in the goods we buy from independent artisans is the human touch—a careful consideration of details that shape the user experience. It resonates palpably, offering evidence of the maker and connecting us on a human scale. There is great power here and a lesson for us as we design digital experiences.

There are plenty of opportunities to build fast and cheap with no reverence for craft or the relationship we have with our audience. Frameworks like Bootstrap make it easy to build from boilerplate but the results, like a mass-produced product, are indistinguishable from others (Fig 1.1). We could reduce our industry to a commodities race, like those who manufactured the Industrial Revolution. There is a market for that kind of work.

Fig 1.1: As Sarah Parmenter pointed out in her An Event Apart talk “Practical Branding,” many websites use boilerplate elements, trading creativity for convenience. The result is that so many websites look the same (http://bkaprt.com/dfe2/01-01/).

Or we could follow a different path, one paved by the artists, designers, and architects of the Arts and Crafts movement, who believed that preserving the human touch and showing ourselves in our work help to form an emotional connection with people that is powerful, unique, humane, and essential.

While the human touch doesn’t exist physically in digital design, the ethos of it does. Designing for emotion—creating things that transcend function to engage us on an emotional level—is attainable in all mediums whether physical or virtual.

The dawn of the Industrial Age began with optimism for a modern world but gave way to sober recognition that what we’d created had come at a price. I hear the echoes of our past as we navigate new challenges on the web we’re building today. What we’ve built is equally as revolutionary, but the impact is coming into focus.

The Way We Were

Like many designers, I had an optimistic view of the web back in 2011 when the first edition of this book was published. Modern mobile devices, faster wireless connections, the rise of new social platforms, and a pervasive entrepreneurial spirit fueled my optimism. It felt like a golden age when design and the web could transform lives for the better.

I thought social platforms would give voice to the marginalized, evolving digital products would empower our creativity, and unfettered access to information would lead to a more democratic and equitable world.

Some of that came true, but like our industrialist ancestors, I was naive to the worst-case scenarios that could arise, and I wasn’t alone.

Today, I’m a little more cynical. Grim news of how the web is used nefariously for political or financial gain seems unending (http://bkaprt.com/dfe2/01-02/). Social platforms are, in my judgment, doing almost as much harm as good, and so many of the digital products we use are not inclusive because there’s still little diversity in the groups designing and building them (http://bkaprt.com/dfe2/01-03/).

It’s time to point ourselves in the right direction. Though our intentions for our work may be good, we need to be aware that the outcomes they shape don’t always match our vision. We need to evolve our approach.

In this second edition, we’ll build upon the key emotional design principles that guided us back in 2011 and introduce new ones that will help you meet the challenges of today.

We’ll get a fresh perspective on designing human experiences filled with emotions—good, bad, and all that’s between. If in its optimism, the first edition of this book over-indexed on designing delightful experiences, this edition corrects the balance by looking at more complicated emotions we bring to our work.

We’ll also look at how design can be used to create belonging. When we prioritize diversity and inclusion, we reach more people and build lasting relationships with our audience.

Finally, I want you to take away more than just updated principles, but also conversation starters about the business value of emotional design so you can speak with engineers, product managers, executives, and other stakeholders convincingly.

So, where do we start? Well, like any good user experience designer, we begin by understanding the needs of the people we’re designing for.

Hello, Maslow

In the 1950s and ’60s, the American psychologist Abraham Maslow discovered something that we all knew but had yet to put into words: No matter our age, gender, race, or station in life, we all have basic needs that must be met. Maslow illustrated his ideas in a pyramid he called the Hierarchy of Needs (Fig 1.2).

Fig 1.2: Maslow’s Hierarchy of Needs.

Maslow stressed that the physiological needs at the base of this hierarchy must be met first. The need to breathe, eat, sleep, and answer the call of nature trump all other needs in our life. From there, we need a sense of safety. We can’t be happy if we fear bodily harm, loss of family, property, or a job. Next, we need a sense of belonging. We need to feel loved and intimately connected to other humans. This helps us get to the next level: a sense of self, respect for others, and the confidence we need to excel in life. At the top of Maslow’s pyramid is a broad, but important category—self-actualization. Once all other needs are met, we can fulfill our need to be creative, to solve problems, and to follow a moral code that serves others.

Maslow’s approach to identifying human needs can help us understand our goals when designing interfaces. We could be content with only meeting the bottom three strata of the needs pyramid—physiological comfort, safety, and belonging. But it’s in that top layer that we can live a truly fulfilled life.

Interface design is design for humans. What if we translated Maslow’s model of human needs into the needs of our users? It might look something like this (Fig 1.3).

Fig 1.3: We can remap Maslow’s Hierarchy of Needs to the needs of our users.

Getting the Basics Right

Here’s how we might remap Maslow’s Hierarchy of Needs to the needs of our users:

  • An interface must be functional. If the user can’t complete a task, they certainly won’t spend much time with an application. Apple Mail was once the center of my universe, but poor search quality made it impossible to be productive. After years of mastering quick keys, I abandoned it for a mail client that satisfied my basic needs.
  • The interface must be reliable. Google Hangouts has been eclipsed by competitors because it’s just not reliable. Calls drop, image quality is poor; after a couple of bad experiences, it can no longer be trusted for important conversations.
  • An interface must be usable. It should be relatively easy to learn to perform basic tasks quickly, without a lot of relearning. Ever tried to use Salesforce to perform a basic task? If you have, I’d bet a five-spot that expletives tripped across your tongue a time or two. You’re not alone. Though the design team has made significant strides in improving the product, it’s hard to make something as complex as Salesforce usable by mere mortals.

Historically, usability has been the zenith of interface design. Isn’t that a bit depressing? If you can make a usable interface, you’re doing well in our industry. Imagine if we used that yardstick to measure success in the auto industry. By that standard, we’d be swooning over the 1978 AMC Pacer. In response, many websites and applications are redrawing the hierarchy of needs to include a new top tier filled with delight, trust, empathy, and vulnerability. This brings me to the final guideline.

  • An interface must be pleasurable. Whether it’s an offbeat moment that puts a smile on your face or a thoughtful opt-in dialog that inspires your trust, an interface that connects on an emotional level while helping you complete a critical task is powerful. That would be an experience you’d recommend to a friend; that would be an idea worth spreading.

We need a new stick to measure the success of our designs. We can transcend usability to create truly extraordinary experiences.

Surpassing Expectations

Designers creating interfaces that are just usable is like a chef creating food that’s just edible. Think back to the best meal you’ve ever had. Not a good meal, I mean a mind-blowing, palate-challenging, fall-in-love-with-food-again, great meal. What made it so memorable? Was it the taste and texture of the food? Was it the unexpected pairing of flavors? Was it the artful presentation, attentive wait staff, or ambiance? Chances are, many of these factors worked in concert to elicit an intense emotional response.

Now think about this. Did you once think about the meal’s nutritional value? I doubt it. Though the meal met your body’s needs, the immense pleasure of the experience formed the memory in your brain, one which you will carry for a long time.

Why don’t we aim for a similar target in design? Certainly we want to eat edible foods with nutritional value, but we also crave flavor. And perhaps even ambiance! Why do we settle for usable when we can make interfaces both usable and pleasurable?

Headspace: More than usable

Headspace (headspace.com), a popular app that helps people build mindfulness by developing a regular meditation habit, has emotional design baked into the interface (Fig 1.4). Though the benefits of meditation are well documented, for many of us, it’s a challenging thing to do. Headspace makes the abstract concepts of mindfulness accessible through simple animated videos that use metaphors and endearing characters to take the edge off of an activity that can feel daunting.

Fig 1.4: Headspace makes mindfulness accessible with animated videos featuring endearing characters who take the edge off of an activity that can feel daunting.


Press “play” to begin meditation and the circle containing the play button begins to undulate, moving like the mind in unpredictable directions, impossible to control. It’s reassuring, as if it’s acknowledging that our imperfections are welcome here.

For me, meditation once felt like stepping into a void, but Headspace is full of subtle cues that make the experience feel as if there’s a friendly guide pointing the way. The app is functional, reliable, and usable—and so much more. It puts forth a clear personality that, like a gracious host, makes their users feel comfortable and welcomed.

That persona isn’t a thin veneer added at the end of a development cycle. The team that makes the app manifests it through the app copy, the instructions delivered by the warm voice of founder Andy Puddicombe, the colorful, imperfect shapes, and simple animations. That reassuring personality is clearly baked into every aspect of the product, exuding a human quality we can see and feel.

As we’ll see in Chapter 4, Headspace uses emotional engagement to create lasting impressions with their customers. There’s actually some science behind what they’re doing, too. As it turns out, emotion and memory are closely linked.

Emotion and Memory

Emotional experiences make a profound imprint on our long-term memory. We generate emotion and record memories in the limbic system, a collection of glands and structures under the brain’s foldy gray matter. In his book Brain Rules, molecular biologist John Medina shares the science behind the relationship between emotion and memory:

Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories.
How does this work in our brains? It involves the prefrontal cortex, the uniquely human part of the brain that governs “executive functions” such as problem-solving, maintaining attention, and inhibiting emotional impulses. If the prefrontal cortex is the board chairman, the cingulate gyrus is its personal assistant. The assistant provides the chairman with certain filtering functions and assists in teleconferencing with other parts of the brain—especially the amygdala, which helps create and maintain emotions. The amygdala is chock-full of the neurotransmitter dopamine, and it uses dopamine the way an office assistant uses Post-It notes. When the brain detects an emotionally charged event, the amygdala releases dopamine into the system. Because dopamine greatly aids memory and information processing, you could say the Post-It note reads “Remember this!” Getting the brain to put a chemical Post-It note on a given piece of information means that information is going to be more robustly processed. It is what every teacher, parent, and ad executive wants.

Add us designers to that list too, Dr. Medina!

There’s a very practical reason that emotion and memory are so closely coupled—it keeps us alive. We would be doomed to repeat negative experiences and wouldn’t be able to consciously repeat positive experiences if we had no memory of them. Imagine eating a delicious pile of tacos and not having the sense to eat more the following day. That’s a life not worth living, my friend.

A similar feedback loop happens in interface design. Positive emotional stimuli can provide a dopamine hit that encourages repeat engagement with your users. Although the affable design and animation in Headspace’s interface may seem like window dressing, it’s actually a clever brain hack that builds a positive memory, increasing the chance that Headspace users will learn the concepts it’s teaching and make a habit of using the application to meditate.

This is a power that we can use for good or ill; we’ve become all too familiar with apps that encourage compulsive check-ins and gamify use. It’s the flip side of the same principle at work. Headspace has identified where user and business needs intersect and serves both with emotional design. Get to know your customers and what they really need; these insights can help us design profound experiences and create space for emotional design to have the greatest effect.

Intuit: Owning a moment

In 1983, the year Scott Cook founded Intuit, he started a research initiative called Follow Me Home. He dispatched employees to shopping centers and strip malls all over America, where they approached people purchasing one of their personal-finance products and asked if they could follow them home to watch them install the software. Yeah, it sounds a tad creepy—but equipped with proper identification and a good attitude, Intuit employees managed to find their way into their customers’ homes and developed a deep understanding of their needs through direct observation of their pain points.

Cook believed the empathy resulting from this practice would be the foundation upon which they could innovate, and although Intuit employees no longer stake out malls to follow people home, they do continue to spend time with customers and have adapted a design ethos that Intuit’s former CEO Brad Smith summed up as “Design for Delight” (http://bkaprt.com/dfe2/01-04/).

Delight is a rather myopic way of looking at emotional design, as it’s not always the best card to play (something we’ll explore more with customer journey mapping in chapter 5). Personal finance is filled with points where a well-intentioned moment of delight would be most unwelcome. Garron Engstrom, formerly a designer on TurboTax, takes a more nuanced perspective:

Emotional design is not just about delight and positive emotion. In reality, emotional design is about all emotion—good, and especially bad. If the user is feeling uncertain or fearful, don’t shy away from that or sweep it under the rug—instead lean into that emotion. Let the user know you understand where they are emotionally and offer a way to put them at ease. (http://bkaprt.com/dfe2/01-05/)

The design team working on TurboTax translated the ethos of this principle into something they could apply to a broader range of problems. They use the term “ownable moments” to refer to points in the user experience where they can identify a change or escalation in emotion, either good or bad.

One such moment happens in the TurboTax filing process when users are asked about life changes that might influence the filing, including the loss of a loved one (Fig 1.5).

Fig 1.5: TurboTax designers recognized an “ownable moment” in the filing process when users are asked if a loved one has passed. The response is humane and appropriately recognizes the emotional state of the user.


This ownable moment takes deep insight to recognize, but requires minimal effort to write the humane, well-placed piece of copy that profoundly affects customers. Here’s how one customer responded:

I finally got around to doing taxes yesterday. After our information was transferred from last year’s return, it asked if either of us had passed away. I entered the information that [husband] died on June 15, and a screen came up that said, ‘we’re sorry for your loss.’ I sat there and stared at it, crying, for a few minutes. It was so cathartic! Please pass on to the team how much that one little sentence meant to me. Whoever thought that up must be a very caring person. (http://bkaprt.com/dfe2/01-05/)

This is but one example of Intuit’s “ownable moment” philosophy in action. It remains a core tenant of their culture today.

We’ll explore methods for mapping customer emotions in Chapter 4, and how to design your own ownable moments in Chapter 5. But first, let’s look at the underlying design principle behind Intuit’s design philosophies.

The Emotional Design Principle

People will forgive shortcomings, follow your lead, and sing your praises if you recognize and respond to their emotional state. This is what I call the emotional design principle, and it can be applied in any business.

To engage your audience emotionally, you must let your brand’s personality show. When you share your brand’s personality, you create opportunities for your audience to relate to the humans who bring it to life. Humans want to connect with real people. We forget that businesses are just collections of people—so why not let that shine through?

Emotional design turns casual users into believers ready to share their experiences. It also offers a safety net that encourages your audience to stay when things go awry. Emotional design isn’t just about copy, animations, or design style: it’s a different way to think about how you communicate with your users.

Certainly, emotional design has risks. If emotional engagement compromises the functionality, reliability, or usability of an interface, the positive experience you wanted will mutate into a rant-inducing disaster for your users.

We’ll touch on the proper use of emotional design. But before we do, let’s get comfortable with the firmware that powers the human perspective, as it forms the framework for the strategies you’ll craft in your work.