Skip to content Skip to navigation

Site Retired

As of May, 2022, this website is no longer updated and has been replaced with a static copy.

Designing With Emotion and Personality in Mind

In this post, I'll share one of my take-aways from reading A Book Apart's Designing for Emotion, highlighting how infusing personality into the things we create can help produce emotionally engaging experiences that make long-lasting impressions on our audience.

Constant inspiration

One of the coolest things about being a member of the Stanford Web Services team is experiencing the inspiration that erupts with every project (and often, with every discussion). We’re always rethinking processes and studying patterns to find new, more awesome ways of doing things.

Many of our exciting ideas are sparked by something we happened across in our lives that we want to share and further explore. Sometimes inspiration is produced from a blog post, a talk, a short video, a quote, or a book.

Recently, our amazingly rad Web Designer, Megan, recommended (and let me borrow) a fantastic short book loaded with inspiration, Designing for Emotionby Aarron Walter. Designing for Emotionemphasizes the impact we have when we reevaluate what it means to create content, design interfaces, and build websites in the context of emotion.

Websites, with personalities

In many circumstances, experience designers research and interview their audience as part of the design process so that they can create a profile of a standard user who embodies a larger group. This is called a persona. Personas aid web teams in staying focused on user needs and help with understanding who the target audience is. But what about understanding who the website is?

One of the concepts that I found really exciting, and that I’d like to share, is creating a design persona for your website much like you would for a user. In a way, giving personality to your website. Personality can manifest itself through site architecture, content construction, page layout, and design. Creating a persona for your site helps define the best ways to channel personality in each of those areas.

Personality is also a big part of your brand, and the personality (of a person or a thing) exhibited deeply sways your audience's decision-making process. In higher education, brand plays an important role in defining the character of an institution or school, and highlights the unique characteristics of the departments and offices within the overarching institutional brand. Therefore, establishing personality can be a powerful tool in building websites, establishing your brand, and connecting with your audience – is the site trustworthy? Likeable? Easy to get along with? Does it serve its purpose? Do the benefits of forming a lasting relationship with it outweigh the costs?

Ask yourself: if your website was a person, who would it be?

All of this sounds cool, right? But where do you start? Below is a framework of what to include when creating a design persona for your website as outlined in Designing for Emotion.

What to include in your website persona

Brand Name: The name of your site, service, or company.

Overview: A short overview of the personality of your service. What makes your service or brand personality different?

Personality Image: An image of a person that embodies many of the traits you wish to include in your service or brand. This will help make 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.

Brand Traits: List five to seven traits that best describe your service along with a trait that you want to avoid. This will help those who are designing and writing for this design persona to create a consistent personality while avoiding the traits that would take your service or brand in the wrong direction.

Personality Map: Personalities can be mapped on an X and Y-axis. The X-axis indicates the degree to which the personality is unfriendly or friendly. The Y-axis shows the degree of submissiveness or dominance.

Voice: If your service or brand could talk, how would they speak? What sorts of things would they say? Would they speak with a folksy vernacular or a refined, erudite clip? Describe the specific aspects of your brands voice, and how it might change in various communication situations. People change their language and tone to fit the situation, and so should the voice of your service or brand.

Copy Examples: Provide examples of the type of copy that might be used in different situations in your interface. This will help writers quickly get a sense for how your design persona should communicate.

Visual Lexicon (optional): If you are a designer creating this document for yourself and/or a design team, you can include in your design persona a visual lexicon providing an overview of the colors, typography, and visual style that will best convey the personality of your service or brand visually.

Engagement Methods: Describe the types of emotional engagement methods you might use in your interface to support the design persona, and create a memorable experience.

You can check out and download Aarron Walter's design persona template (with an example) at http://aarronwalter.com/design-personas.

Words to guide us

Here’s one of my favorite related excerpts from the book:

We’re not just designing pages. We’re designing human experiences. Like the visionaries of the Arts and Crafts movement, we know that preserving the human touch and showing ourselves in our work isn’t optional: it’s essential.

So, what about you? What have you been inspired by lately? Did you stumble upon an inspirational quote? Happen across a motivating article? Read an exciting book? Share with us in the comments.

Categories: