Our lasting relationships center around the unique qualities and perspectives we all possess. We call it personality. Through our personalities, we express the entire gamut of human emotion. Personality is the mysterious force that attracts us to certain people and repels us from others. Because personality greatly influences our decision-making process, it can be a powerful tool in design.
Interface design lives within a broader category called Human-Computer Interaction, or HCI, sitting among the disciplines of computer science, behavioral science, and design. HCI specialists understand psychology, usability, interaction design, programming concepts, and basic visual design principles. Sound familiar? That’s awful similar to what user experience designers wrangle every day.
I’ll let you in on a secret. I’m not a fan of the name “Human-Computer Interaction.” When I design, I work very hard to make the interface experience feel like there’s a human on the other end, not a computer. It might sound like I’m splitting hairs, but names are important. Names shape our perceptions and cue us into the ideas that fit within a category.
Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface. To achieve this goal, we must consider how we interact with one another in real life.
I’d like you to pause for a moment and recall a person with whom you recently made a real connection. Maybe you met them while taking a walk or at an event, or maybe a friend introduced you, and the ensuing conversation was engaging, interesting, and fun. It was their personality that drew you to them, that guided the discussion and left you feeling excited. You bonded thanks to shared jokes, tone of voice, and the cadence of the conversation, dropping defenses and encouraging trust. Personalities foster friendships and serve as the platform for emotional connections.
Hold on to that memory and revisit it when you start a new design project. That feeling is what we’re trying to convey through emotional design.
Let’s think of our designs, not as a facade for interaction, but as people with whom our audience can have an inspired conversation. We’ll create that feeling of excitement and bond with our audience by designing a personality that our interface will embody.
Once again, history can inform our work today. It turns out that designers have been experimenting with personality to craft a more relatable experience for centuries.
We have a history of injecting personality into the things we make to make mechanical things more human. When Johannes Gutenberg—goldsmith and father of the printing press—experimented with movable type in the mid-fifteenth century, he was inspired by the human hand. Before the printing press, scribes—usually monks—painstakingly penned each page of religious manuscripts by hand with quill and ink. Transcribing a bible was seen as a sacred duty, as the scribe was thought to be channeling a divine message. For this reason, the hand’s presence in these manuscripts had great spiritual importance.
So when Gutenberg designed and cast the original typefaces he used to print hundreds of bibles, the letterforms mimicked the calligraphic style of scribes. Though he created machines to deliver the divine message, he worked hard to make the presentation human (Fig 3.1).
We can see the trend of distinctly human design in the twentieth century, when mass production permeated nearly every industry.
The Volkswagen Beetle, released in 1938 and produced until 2003, is the best-selling design in automotive history. Its distinctly human design contributed to its success (Fig 3.2). Conceived as the “People’s Car,” the anthropomorphized design makes it more than a car for the people: It’s a car that is a person. The round headlights resemble eyes above a scoop-shaped hood smiling at us, exemplifying the baby-face bias. Though originally designed for aerodynamics and not personality, the Beetle’s “face” conveys a perpetually hopeful and fun attitude that made it easy for generations to connect with, despite dramatic cultural changes over seven decades.
It’s hard not to return a smile even if it’s coming from an object. That simple design detail constructed an emotional persona for this car, leading to games (“Slug bug red!”) and transforming the Beetle into movie hero (Herbie in The Love Bug). We’ve created memories around these experiences, and they remind us of the positive emotions the Beetle inspires.
There is no more concrete an example of personality in design than Apple’s “Get a Mac” ad campaign (http://bkaprt.com/dfe2/03-03/, video). Remember that? In the ads, Justin Long portrayed a young hipster Mac who effortlessly tackles complex problems while his rival—John Hodgman’s dweeby, uncool PC—bungles every task. These ads conveyed a personality experience and helped consumers compare the differing relationships they could have with their computer. They didn’t talk about specs and features; they showed how you would feel if you bought a Mac.
Of course, Apple’s design history is filled with examples that illustrate the power of personality. The company anthropomorphized the first Macintosh by using the disk drive to form a charming half-smile (Fig 3.3), which helped make computer newbies feel at ease.
The early Macintosh competitors were technical and intimidating. When powering up a PC, users were greeted by an inscrutable blinking DOS prompt. By contrast, I’ll never forget the excitement and joy I felt the first time I turned on a Macintosh and was greeted by the now-famous smiling Mac icon. It felt like a real living thing, and I knew then that I’d never go back to a PC. Decades later, I’m writing this book on my Mac. No other brand has captured my loyalty for so long.
Apple, one of the most valuable companies in the world, has shown us time and again that personality can be used as a competitive advantage. It can make products more desirable, memorable, and distinguishable from competitors.
Now that we understand the history of personality in design, let’s break these ideas down further to identify how it can create tangible business benefits.
Volkswagen and Apple’s thoughtful brand work in those early days is still paying dividends today and has turned their products into cultural icons.
I’ve identified four business benefits of establishing strong brand personality:
Powerful stuff. So how do you create a personality for a product or brand? Let’s take a look at the tools that will get you there.
In modern design, we research, plan, and create with our audience’s attitudes and motivations in mind. User experience designers interview their audience, then create personas—a dossier on an archetypal user who represents a larger group. Think of personas as the artifacts of user research. They help a design team remain aware of their target audience and focused on their needs.
The persona example shown in Fig 3.4, created by designer Todd Zaki Warfel, tells the story of Julia, a user who wants to visit New York and study at NYU. Through this document, we learn about her demographic details, her interests, her expertise in various subjects, and what influences her decisions on subjects germane to the project; we start to understand who Julia is. This glimpse of her personality helps us understand her motivations and shapes the design decisions that follow.
If you’re new to creating personas, the Nielsen Norman Group has a fantastic guide that will help you get started (http://bkaprt.com/dfe2/03-04/), and if you’ve struggled to build personas effectively, their video “Why personas fail” (http://bkaprt.com/dfe2/03-05/)will get you back on track.
As we saw in the hierarchy of needs in Chapter 1, we know all users need our designs to be functional, reliable, and usable. By understanding our audience, we can better address their needs. This information also helps us address the top layer in that hierarchy—pleasure—by clueing us in to the design personality most likely to create an emotional connection.
Personas are a standard tool in the design process, but they only provide a partial picture of the relationship we’re building with our audience. We know who they are, but who are we? Shouldn’t our design have a persona that serves as the counterpart for our user personas to interact with? Why, yes—yes it should.
If your website were a person, who would it be? Is it serious, all business, yet trustworthy and capable? Is it a wise-cracking buddy that makes even mundane tasks fun?
Following a structure similar to a user persona, you can flesh out your design’s personality by creating a design persona. Personality can manifest itself in an interface through visual design, copy, and interactions. A design persona describes how to channel personality in each of these areas and helps the web team construct a unified and consistent result. The goal is to craft a personality portrait every bit as clear as the ones Justin Long and John Hodgman embodied in the “Get a Mac” ads.
Before we take a look at a real design persona I created for Mailchimp when I led the design team there, let’s examine the components of the document. Here’s what you’ll include in your design persona:
Just as user experience designers post personas in a place where the design, development, and content strategy teams will see them throughout the project, your design persona should be visible and accessible to remind the team of the type of relationship you want to build with your audience. The design persona should guide anyone that crafts a pixel, a paragraph, or a process for your website or product.
Now we’ll take a look at some real-world examples. Back when I led the design team at Mailchimp, we created a design persona to guide our work. It proved helpful as our team expanded to include more designers, writers, and developers and kept us all creating a consistent experience together.
Following the same structure as we’ve just seen, here’s a slightly abbreviated version of the design persona we used.
Brand name: Mailchimp
Overview: Freddie Von Chimpenheimer IV is the face of Mailchimp and the embodiment of the brand personality (Fig 3.5).
Freddie’s playful spirit is visible in his kind smile and wink that welcomes users and makes them feel at home. The cartoon style communicates that Mailchimp offers an informal experience that’s accessible to all regardless of their skill level. Yes, he’s a cartoon ape, but Freddie can still be cool. He’s ready with a high five to celebrate your accomplishments at just the right time, and he never gets in the way of your work.
Freddie is casual and creative, inspiring Mailchimp customers to stay true to themselves and do things their own way.
Brand traits: Fun, but not childish. Funny, but not goofy. Powerful, but not complicated. Hip, but not alienating. Easy, but not simplistic. Trustworthy, but not stodgy. Informal, but not sloppy.
Voice: Mailchimp’s voice is familiar, friendly, and—above all—human. The personalities of the people behind the brand shine through honestly. The voice of Mailchimp cracks jokes (ones you can share with your mama), tells stories, and communicates with the folksy tone that you might use with an old friend.
Mailchimp uses contractions like “don’t” instead of “do not” because that’s how real humans speak to one another. Mailchimp uses sound effects like, “hmmmmm…” to make it sound like you’re thinking hard, or “Blech, that’s awful!” to communicate empathy. Lowercase form and button text reinforce the brand’s informality.
Copy examples: Success message: “High fives! Your list has been imported.” Error message: “Oops, looks like you forgot to enter an email address.” Critical failure: “One of our servers is temporarily down. Our engineers are already on the case and will have it back online shortly. Thanks for your patience.”
Visual lexicon: Color: Mailchimp’s bright yet slightly desaturated color palette conveys a sense of fun and humor. The colors feel refined—not romper room-y. Mailchimp is fun, but it’s also powerful. Typography: Mailchimp is easygoing, efficient, and easy to use, and its typography reflects it. Simple, sans-serif headings and body copy vary appropriately in scale, weight, and color to communicate information hierarchy, making Mailchimp feel like a familiar, comfortable cardigan that is both functional and beloved. General style notes: Interface elements are flat and simple, keeping things easy to understand and unintimidating. Soft, subtle textures may appear in places to warm up the space and make it feel human. Freddie should be used sparingly. He never gives application feedback, stats, or helps with a task.
Engagement methods: Surprise and delight: In peak moments in the user experience, like after sending an email campaign, Mailchimp creates a sense of delight with an animated Freddie high five. Easter eggs create unexpected moments of humor that may convey nostalgia through an 8bit video game or reference kitschy pop culture.
The Mailchimp brand continues to evolve along with the product. The Mailchimp team has taken the original design persona much further by creating a public page describing how the personality manifests in every aspect of the brand’s design (Fig 3.6).
While we were developing that original design persona, Kate Kiefer Lee and team developed Mailchimp’s voice and tone guide (http://bkaprt.com/dfe2/03-06) that greatly expanded our understanding of how the brand personality should come through in our writing. Not only did that voice and tone guide help our entire company deliver a consistent brand personality, it also inspired countless teams around the world to build similar guides.
Now that you’re familiar with the core elements of a design persona and you’ve seen how it can expand into more detailed guides, I encourage you to consider how you can take it further. A design persona combined with a design system and a voice and tone guide would create an amazing reference point for any team and make onboarding new designers more efficient.
If you want to try this out for yourself, I’ve shared a design persona template online (http://bkaprt.com/dfe2/03-07) that you can use in your next project.
Many websites are already using personality to shape the user experience and power their commercial success. Though they address different markets and have different business goals, goodr and Headspace have each discovered that personality is the key ingredient in the emotional connections they’re building with their audience and in their overwhelming success.
Goodr sells inexpensive sunglasses. Then again, so do most drug stores. But goodr does it, ahem, goodr.
Their products have names like “Whiskey Shots With Satan” and “Jorts for Your Face,” each with a gonzo origin story and product descriptions that entertain as much as they inform (Fig 3.7).
Sunglasses are the product, but what they’re selling is an experience—the experience of laughing as you click “add to cart.” The experience of sharing a smile with your spouse as you read the brilliant writing in the packaging of your new sunglasses. The experience of having a friend compliment you on your shades at the pool and replying, “these things are called ‘jorts for your face.’” Ridiculous, right?
Maybe not.
Writers Joshua Glenn and Rob Walker had a hypothesis that stories are a powerful driver of emotional value that—in theory—should be able to be measured objectively. To test their hypothesis they created the Significant Objects Project (http://bkaprt.com/dfe2/03-08/). They bought $128.74 of what they called “thrift-store junk,” wrote compelling stories for each object, then listed them on eBay and sold them for $3,612.51, all of which was donated to charity. They created a 28x return on their investment through storytelling that brought each object to life and created emotional value people were willing to pay for. People buy things because of how they make them feel, as much as, sometimes even more than, because of what they do.
Goodr is doing something very similar: making a pedestrian object more valuable by building a story around it. And those stories are all shaped by strong brand personality.
Back in Chapter 1, we got a glimpse of how Headspace uses emotional design to help people understand meditation. If we look closer, we see that personality is doing most of the heavy lifting. By studying their audience, the Headspace team realized that misperceptions about mindfulness were some of the biggest barriers to getting people to adopt a meditation practice.
For many, meditation conjures serene images of a monk on a mountaintop sitting still as a result of mastering their body and mind. But in reality, meditation is not about perfection. It helps us observe our noisy mind so we are more equipped to deal with life’s problems.
Anna Charity, Headspace’s former head of design, helps us crack open the personality of the product to see some of the elements behind it and how they’re used to teach people about meditation.
The mind is a complex place, and it isn’t always an easy place to inhabit (which is why meditation is so valuable). We knew we had to develop a style that translated these ideas in an approachable and relatable way. Animation and illustration became integral to the brand. By using characters and storytelling, we could break down the barriers of a tough subject matter and present it in a light-hearted but sensitive way. Characters are a great vehicle to represent the weirdness inside your head; it feels playful and memorable as result. (http://bkaprt.com/dfe2/03-09)
Characters and animation convey so much personality. Like our minds, these characters are weird. They’re floppy and have goofy expressions and entertaining hairdos—not exactly monkish. Their shapes are curvy and soft, making them almost cozy. The vibrant color palette uses plenty of primary and secondary colors. It could come off as juvenile, but the Headspace design team desaturated the colors to make them feel a little wizened, like a well-loved toy that’s seen too much sun time.
Strangely, these characters still feel sophisticated enough to help us meditate on the heavy issues in our life without making them feel silly, carefully walking the line between disarming our inner skeptic with cartoons while retaining a sophistication that keeps trust intact.
There’s a lot going on here. Color, shape, animation, illustration: it all works together to build a personality that makes this company relatable, inviting, and unique.
Like a pinch of salt, personality enhances the flavor of a user experience. But use too much and your audience will find it overpowering. Finding the right balance is important.
When we strip the user experience down to the bare essentials, like copy alone, we can see clearly when personality enhances or hinders. Slack provides a helpful reference.
Slack’s API lets developers build chatbots, programs that users can interact with through text alone. Recognizing that personality is an important part of the Slack brand and chatbot design in general, Slack created a guide to help developers use it without going overboard (http://bkaprt.com/dfe2/03-10).
A bot with personality can bring warmth to an otherwise cold interaction with a computer program, but personality shouldn’t get in the way of helping the user complete tasks. As Slack points out in their guide, if your bot’s persona is causing you to sacrifice clarity for cleverness, you’re laying it on too thick.
Don’t construct a personality that means you have to add sentence upon sentence in order to get to a joke ‘in keeping’ with your bot’s sense of humor. No one cares. Get to the point. (http://bkaprt.com/dfe2/03-10)
When personality gets in the way of functionality, we’re doing it wrong (Fig 3.9). As we learned in Chapter 1, our users need functional, reliable, and usable experiences. The pleasure that a persona brings to the user experience should never compromise those foundational ideas.
Personality is a big part of what makes Slack feel fun and relatable. As their developer guide illustrates, a little goes a long way.
Personality is a uniquely powerful design tool that can make brands memorable and the experience with their products exceptional. A design persona will help you define the personality traits of your brand or product and will serve as a reminder of when those traits go too far. As Slack’s API guide showed us, it’s important to know where the edges are.
Just as our personalities shift with the context of communication in real life, they should shift in the projects we design. There’s no one-size-fits-all solution. If we stop thinking of the interfaces we design as mere control panels and think of them more as people our target audience wants to interact with, we can craft emotionally engaging experiences that make a lasting impression.
Like personality, empathy and inclusion help us build connections with the people our work serves, but on a level deeper than we’ve yet seen. In the next chapter we’ll see how designing inclusively is essential to the practice of emotional design.
18.117.81.240