Personality in Design
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.
Personality is the platform for emotion
Interface design lives in a broader category called Human-Computer Interaction, or HCI, sitting among computer science, behavioral science, and design. HCI specialists understand psychology, usability, interaction design, programming concepts, and basic visual design principles. Sound familiar? That’s an awful lot like 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, while at an event, or maybe a friend introduced you, and the ensuing conversation was engaging, interesting, and maybe even fun. What was it about that person that made your conversation so exhilarating? You probably had common interests that sparked discussion, but that wasn’t what made the encounter so memorable, was it? It was their personality that drew you to them, that guided the discussion and left you feeling excited. Your personalities intersected in shared jokes, tone of voice, and the cadence of the conversation. This dropped your guard and made you trust this new person. Personalities foster friendships and serve as the platform for emotional connections.
Hold on to that memory. Revisit it when you start a new design project. That feeling is what we’re trying to craft through emotional design. We’ll create that feeling of excitement and we’ll bond with our audience by designing a personality that our interface will embody.
Let’s think of our designs not as a facade for interaction, but as people with whom our audience can have an inspired conversation. Products are people, too.
Once again, history can inform our work today. It turns out that designers have been experimenting with personality to craft a more human experience for centuries.
A Brief History of Personality in Design
We have a history of injecting personality into the things we make, in a bid 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, the human hand inspired him. Before the printing press, scribes—usually monks—painstakingly penned each page of religious manuscripts by hand with quill and ink. Transcribing a bible was a sacred duty, as the scribe was thought to be channeling a divine message. For this reason, the hand’s presence in these manuscripts has 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).
Fig 3.1: Gutenberg’s movable type mimicked the calligraphic hand of a scribe in an attempt to make his mechanically produced bibles feel more human. (
source)
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 denote eyes while its scoop-shaped hood smiles at us, personifying the baby-face bias. Though originally designed for aerodynamics 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.
Fig 3.2: Personality is front and center in the Volkswagen Beetle’s design, which helped to make it a smashing success through generations. (
source)
That smile that greets its driver reflects emotion and establishes a specific kind of relationship. It’s hard not to return a smile even if it’s coming from an object. Around that simple interaction we’ve constructed an emotional persona for this car, leading to games (“Slug bug red!”) and the Beetle as 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.
Though the Gutenberg bibles and the Volkswagen Beetle are interesting examples, there is no more concrete an example of personality in design than Apple‘s “Get a Mac” ad campaign. In the ads, Justin Long portrays a young hipster Mac who effortlessly tackles complex problems while his foil—John Hodgman’s dweeby, uncool PC—bungles every task. These ads convey a personality experience and help consumers compare the differing relationships they could have with their computer. They don’t talk about specs and features, they show how you will feel if you buy a Mac.
With a sense of the history of personality in design, let’s return to the present, where you and I are working hard to understand our audience and doing our best to craft engaging web experiences.
Personas
In modern web 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 web design team remain aware of their target audience and stay focused on their needs.
The persona example shown in Fig 3.3, created by Todd Zaki Warfel, principal designer at
messagefirst, tells the story of Julia, a certain category of user. Through this document we learn about her demographics, 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. We get a glimpse of her personality, which helps us to understand her motivations and shapes the design decisions that follow.
Fig 3.3: Personas help guide the design process, keeping the focus on user needs.
Although Julia is not a real person, but an archetypal representative of a user group, she’s actually closely based on a person that the folks at messagefirst know. They create all of their personas this way, which is handy. When they encounter a tricky point in their design process where they’re unsure of which perceptions, values, and behaviors to expect of their audience in a specific interface, they can simply phone them and ask questions. Not only does this help them create better design solutions, it keeps them focused on real people who will use the things they make.
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 wersre building with our audience. We know who they are, but who are we? Earlier in the chapter I mentioned that products can be people too. Following that line of thinking, shouldn’t our design have a persona that serves as the foil for our user personas? Why, yes—yes it should.
Creating a Design Persona for Your Website
If your website were a person, who would it be? Is it serious, buttoned up, 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 to construct a unified and consistent result. The goal is to construct a personality portrait every bit as clear as those Justin Long and John Hodgman convey in the “Get a Mac” ads.
Before we take a look at a real design persona I created for MailChimp, let‘s examine the components of the document. Here’s what you‘ll include in your design persona:
Brand name: The name of your company or service.
Overview: A short overview of your brand‘s personality. What makes your brand personality unique?
Personality image: This is an actual image of a person that embodies the traits you wish to include in your brand. This makes the personality less abstract. Pick a famous person, or a person with whom your team is familiar. If your brand has a mascot or representative that already embodies the personality, use that instead. Describe the attributes of the mascot that communicate the brand’s personality.
Brand traits: List five to seven traits that best describe your brand along with a trait that you want to avoid. This helps those designing and writing for this design persona to create a consistent personality while avoiding the traits that would take your brand in the wrong direction.
Personality map: We can map personalities on an X / Y axis. The X axis represents the degree to which the personality is unfriendly or friendly; the Y axis shows the degree of submissiveness or dominance.
Voice: If your brand could talk, how would it speak? What would it say? Would it speak with a folksy vernacular or a refined, erudite clip? Describe the specific aspects of your brand’s voice and how it might change in various communication situations. People change their language and tone to fit the situation, and so should your brand’s voice.
Copy examples: Provide examples of copy that might be used in different situations in your interface. This helps writers understand how your design persona should communicate.
Visual lexicon: If you are a designer creating this document for yourself and/or a design team, you can create a visual lexicon in your design persona that includes an overview of the colors, typography, and visual style that conveys your brand‘s personality. You can be general about these concepts, or include a mood board.
Engagement methods: Describe the emotional engagement methods you might use in your interface to support the design persona and create a memorable experience. We‘ll learn more about these in the next chapter.
Now we‘ll take a look at a real-world example. As the user experience design lead at MailChimp, I created a design persona to guide the work we do. Following the same structure as we‘ve just seen, here’s a slightly abbreviated version of the document we use:
Brand name: MailChimp
Overview: Freddie Von Chimpenheimer IV is the face of MailChimp and the embodiment of the brand personality (Fig 3.4). Freddie’s stout frame communicates the power of the application, and his on-the-go posture lets people know this brand means business.
Freddie always has a kind smile that welcomes users and makes them feel at home. The cartoon style communicates that MailChimp offers a fun and informal experience. Yes, he’s a cartoon ape, but somehow Freddie can still be cool. He likes to crack witty jokes, but when the situation is serious, the funny business stops.
MailChimp often surprises users with a fun easter egg, or a link to a gut-busting YouTube video. Fun is around every corner, but never in the way of the workflow.
Fig 3.4: Freddie Von Chimpenheimer IV, Mailchimp’s mascot.
Personality image: Fig 3.4
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.
Personality map: Fig 3.5
Fig 3.5: MailChimp’s personality map.
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 easy-going, 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, and only to interject a bit of humor. Freddie never gives application feedback, stats, or helps with a task.
Engagement methods: Surprise and delight: Themed login screens commemorate holidays, cultural events, or a beloved individual. Easter eggs create unexpected moments of humor that may convey nostalgia or reference kitschy pop culture. Anticipation: Freddie’s random funny greetings at the top of each main page create anticipation for the next page to load. These greetings never provide information or feedback. They are a fun layer that never interferes with functionality or usability.
Download a design persona template and the MailChimp example at
http://aarronwalter.com/design-personas. Try it on your next project, or maybe even on a redesign.
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 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 on your website.
Many websites are already using personality to shape the user experience and power their commercial success. Though dissimilar in brand, business goals, and platform, Tapbots, Carbonmade, and Housing Works have discovered that personality is the key ingredient in the emotional connections they’re building with their audience and in their overwhelming success.
Tapbots: robot love
Tapbots, makers of handy little iPhone apps, have created a distinct personality in their interfaces, making otherwise nerdy tasks seem enjoyable (Fig 3.6).
Fig 3.6: The Tapbots apps feel like lovable little robots ready to do your number-crunching dirty work.
The Convertbot app, as its name foretells, simply converts between various units of measure. The Weightbot app helps users track fluctuations in body weight. Neither of these tasks is terribly enjoyable to perform, especially weight tracking, which can rattle your self-esteem. But the apps’ design has created a loyal following that’s made them a smashing success.
The apps seem to have faces through which all interaction takes place. The dark panels at the top resemble Kool Moe Dee-inspired sunglasses propped above a slight triangle nose and a broad mouth. If you must track your weight, a cyborg Kool Moe Dee is a good partner in crime.
Unlike other iPhone apps, the interfaces seem like little human robots. One robot in particular inspired Tapbots app designer Mark Jardine to design personality into the user interface:
The whole UI concept was really inspired by the movie, WALL•E. Our concept for the first two apps was to design them as if they were physical robots.
We want our apps to be used seriously, but also give the sense that they are more than just a piece of software. We want our users to have an emotional connection to our apps. Most people don’t have a love/joy for software like geeks do.
Users react with effusive emotion to these cartoony, yet seemingly tangible interfaces enhanced by robotic whirs, bleeps, and blips. You can certainly see the parallels with WALL•E, in physical and personality traits. Both are friendly, endearing, and reliable.
Technology blogger John Gruber sums up audience sentiment about Tapbots apps with
this simple review:
I adore the way their apps look and sound.
Ironically, Gruber doesn’t even mention the apps’ functionality, though his appreciation of it is implied. He uses the word “adore.” Gruber doesn’t just like these apps; he
loves them. These anthropomorphized interfaces give users the sense that they are interacting with another living being with a personality, making an emotional connection possible. Interfaces that can tap into emotion effectively not only create a broad fan base, they build an army of evangelists.
The brand personality train chugs on in the next example. Carbonmade manages to construct an effective brand personality that resonates with their audience while bathing in a sea of mustachioed wackiness.
Carbonmade: octopi, unicorns, and mustachios
Personality can forge relationships with an audience only to the extent that it’s unique and authentic. If it’s used as a gimmick, it can have the opposite effect. People will notice contrived, inauthentic personality in a design, which will send them packing and ensure that they’ll never trust your brand.
Carbonmade, a clever little web app that helps people design elegant portfolios, expresses their personality throughout their site, combining the earnestness of Jimmy Stewart with Eddie Izzard’s exploding, goofy charm. Octopi and unicorns frolic in their fantastical homepage landscape (Fig 3.7)—atypical for a conversion-focused site.
Fig 3.7: Carbonmade uses an over-the-top personality to woo new users to their service.
This quirky personality and tongue-in-cheek humor is conjured by their designer Dave Gorum, and as it turns out, it’s what encourages skeptical designers and artists to sign up. Gorum explains:
My rule was and is to add fun up to the point that it distracts from the message.
Keeping things informal and bonkers makes it all the easier to get folks to click that sign-up button. There’s a taper to the silliness though. We lay it on pretty thick in our marketing site, dial it back a bit in our admin tools, and remove it all together on the product. It’s like a giant, flashy, goofy piece of candy on the outside, with a Swiss-engineered, straight-laced nougaty center!
Carbonmade‘s humor and personality is like a reverse mullet: party up front, and business in the back. Dialing back the over-the-top personality in their application allows users to focus on workflow rather than getting lost in a sea of mustaches. The informal tone of the product site, however, creates a rapport that makes the audience feel comfortable with subscribing to the service, while misdirecting competitors who may believe that Carbonmade is all frivolity and no substance:
The informality makes it super easy to open a dialogue with our audience. We’re like their goofy friend who’s really easy to talk to and can make them a sweet portfolio.
If anything, the smirking goofiness lets our competitors feel comfortable about not taking us seriously. Which is juuuuust fine.
Carbonmade’s brand personality creates clear contrast for an audience that’s trying to compare them to the competition. That contrast is an essential part of the human decision making process.
While humor is in the wheelhouse of Carbonmade’s personality, it’s not always appropriate. It’s our desire to share a bit of our selves with others that shapes the personality in our designs, and helps us to connect with our audience. We’re all complex people with a broad range of emotions. When it comes to emotional design, we need to tailor the personality to the content and audience.
Few websites do this as well as Housing Works, which puts a human face on an important cause.
Housing Works: a name with a face
As is true in the real world, we can’t always punctuate site personalities with wit and humor. Certain situations call for a different tactic.
Housing Works is an inspiring non-profit dedicated to ending AIDS and homelessness. Housing Works changes lives every day. Their story is one of empathy, kindness, and hope for everyday people.
When
Happy Cog redesigned Housing Works’ website in 2008 (Fig 3.8), the personalities of the organization and the people it serves were the muses of their design process.
Fig 3.8: Housing Works builds an emotional bond with its audience by sharing the stories of the amazing people it serves.
Dan Mall, the Housing Works design lead, explains:
It was very clear that the heart of Housing Works is the people that serve and people that it serves. It was overwhelmingly about warmth and care. Under that direction, it was easy to design the site you see today.
Large photographs and quotes about how Housing Works
has changed a life figure prominently on the homepage, communicating the organization’s personality while inspiring their audience. Smiling faces and personal stories cycle softly, helping the site to achieve real human-to-human communication.
Photo cropping shapes the audience’s emotional perspective. The face-ism ratio design principle states that photographs cropped tight to the subject’s face encourage an emotional response from the viewer, while emphasizing the personality of the subject. Wider subject cropping emphasizes the physical appearance of the subject. Photos on the Housing Works homepage are cropped perfectly to help us see the beautiful personalities of the people depicted, making us sympathetic to their cause.
The Power of Personality
Just as our personalities shift with the context of communication in real life, they must shift in the projects we design. There’s no one-size-fits-all solution. If we stop thinking of the interfaces we design as dumb control panels, and think of them as the people our target audience wants to interact with, we can craft emotionally engaging experiences that make a lasting impression.
Keep in mind that when you emphasize personality in the user experience, some people won’t like it. That’s okay, though. Personalities clash, and in the case of businesses, it can actually be a good thing. If people don’t understand your personality, chances are they’re not the right customer for you, and you’re actually saving yourself future customer-relations problems. Personality is a risk, but there are many real-world examples that suggest the rewards are worth it.
View our recommended website
.png)
.jpg)
