Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Design Personas: Injecting Personality Into Your Web Projects

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Let's take a look at the what, why and how of creating design personas; developing personalities for your projects. When used correctly, design personas can transform a good site into an incredible one, helping people remember it for all the right reasons.

One of the great questions of designing for the web — in fact designing in any medium — is defining the indefinable: what separates good design from great design? Although there's no silver bullet or magic formula, the answer lies not just in pixel perfection — it lies in a design that speaks to your audience in a way that they respond to. It guides them to make decisions in an easy, natural way, transcending usability and practicality and instead... delights.

Ready to learn more? Let's get started.


What is a Design Persona?

If you've never heard of design personas before, you may be forgiven for thinking that we're about to step into the murky and often misunderstood world of marketing, target demographics, conversion and user testing. While design personas can incorporate these things, in reality, they're far more practical, design focused and dare I say... fun.

In its simplest form, a design persona is a document created during the planning phase of a project which defines a clear identity and personality for the brand or project.

We'll take a look at some examples and the steps that you'll take to create a design persona a little later on in this tutorial, but for now, let's take a look at the components of a design persona that Aarron Walters lays out in his 2011 book, Designing For Emotion:

  • Overview: A few paragraphs that set the tone for the brand, service or project. The overview should encapsulate how you want your users to react to the website and what makes it stand out from the competition.
  • Personality Image: The personality image translates the identity of the project into a real, live person that embodies all of the things that the brand or product stands for. Pick a celebrity, sports star, fictional character or even an archetype and describe their personality traits, how they make others feel and why they represent the brand.
  • Brand Traits: Five to seven short statements that describe the brand that also set some limitations and traits that you want to avoid. For example, "Simple but not childish", "Authoritative yet not condescending".
  • Personality Map: Set the brand on a scale of friendliness and unfriendliness on the x-axis and the level of dominance or submissiveness on the y-axis.
  • Voice: If the website, product or brand could speak with its users, how would it sound? Would it have an uber-cool street cred or would it sound like your grandfather sitting in his favorite armchair telling a story from a bygone era? Address the vernacular, the tone and how the communication mode might change in different situations.
  • Copy Examples: Include some 'real world' examples of the site's copy in different situations. For example, how does the interface welcome a new user or one that's just signed in? What about an error message, or a call to action?
  • Visual Lexicon: A visual lexicon is a fancy way of saying what colors, typography, design patterns, layouts and so on will be used in the site. Design personas are a perfect partner for Style Tiles, an alternative to full design comps that we covered here recently on Webdesigntuts+.
  • Engagement Methods: In what ways will the interface and the brand overall engage and communicate with its users? How will it leverage social media, email marketing and real world interactions?

Why Bother?

On the face of it, developing a design persona seems like a lot of hard work. Surely it's better to just dive straight into wireframes and design mocks and figure out all of this 'personality' and 'emotion' stuff along the way?

Not so. In fact, there are a number of compelling benefits to developing a design persona in the initial stages of a new project. Let's look at a few of these, then look at some examples of some websites that do it properly (and some that weren't so successful).

1. Defining the Ideal Customer

It's impossible to design a site that everyone will respond positively to. Although it can set palms sweating and much gnashing of teeth in the marketing department to start talking about the exclusion of demographic targets, in reality it might be the best decision you could ever make.

The harsh truth is that if you build a website for everyone, it will appeal to no one. -Paul Boag

Let's take a look at an example of a design agency which has taken the target audience exclusion principle to heart.

FortySeven Media Work Hard To Exclude Certain Demographics

Displayed prominently on the front page of the FortySeven Media home page is a large hand drawn illustration explicitly stating that you shouldn't hire them for your next project. What on earth could make a design agency blatantly tell people not to hire them? The answer is found by clicking the "find out why" link (as if anyone could resist!)

Don

The copy on the following page clearly sets the stage that when you're dealing with FortySeven Media, you're dealing with a premium design agency. In short, they make it pretty clear that they don't make budget websites and only work with clients that know that good design doesn't come cheap.

This of course, will turn a lot of potential small clients away from the agency. After all, companies that can afford to spend the $10K (minimum) for a new website redevelopment don't exactly grow on trees. By setting a clear design persona, the FortySeven Media team have lasered in on their ideal client and have created a site that speaks uncompromisingly to them — and them alone.

If you have come looking for average, you're looking in the wrong place. We don't do average. And we aren't even sorry about it. -FortySeven Media

2. Separating Brands

In our next example, we're going to take a look at a brand and corporate strategist provider that does an excellent job of separating itself from its competition through the use of a strong design persona.

The world of corporate strategy is filled with conservative, staid designs, complex business jargon and marketing mumbo-jumbo.

Bobadilium is a company that takes a very different approach in defining its brand from its competition:

Bobadilium takes a very different approach to its competitors in its design and content

With an in-your-face grungy style and anarchistic tone of voice, Bobadilium is anything but run of the mill. With bold statements like "Choose a new business experience. Be Human" and "Beware: Disaster may be around the corner" (along with some pretty nifty jQuery powered scrolling effects), Bobadilium sets up a tone of urgency and talks directly to potential clients who understand the importance of being different.

Will this site appeal to every potential client? Almost certainly not. But what it does do very well is define Bobadilium as a clear alternative to their competitors.

This site may not appeal to everyone, but it clearly separates itself from the pack

3. Future Design and Content Decisions

Surely one of the most beloved brands on the Internet today is the popular email service, Mailchimp.

In fact, it's also held up as one of the best examples of sites that have been developed with a clear design persona — which is appropriate since Aarron Walters (the chief evangelist for the use of modern design personas) also heads up the Mailchimp design team.

Mailchimp is one of the beloved brands on the Internet today

While we could talk all day about Mailchimp and its use of its personality and emotional design to create surprise and delight in its loyal userbase, the clear design persona of the brand also helps establish a consistent framework for future design and content additions to the site.

With a large site like Mailchimp that is constantly adding new content and new products, the overall personality of the brand could easily be watered down over time. Where Mailchimp excels is its ability to keep every page of the site speaking to the user in a consistent tone of voice.

For example, their knowledge base and support section of the site avoids simple topic listings. In fact, it sets out each new section as an engaging book cover, looking more like Apple's iBooks iPhone app than a help center:

Mailchimp

The use of quirky images and engaging titles speaks directly to Mail Chimp's brand traits that include:

  • "Hip but not alienating",
  • "Informal, but not sloppy"
  • "Powerful but not complicated"

It's the ability to speak to these brand traits that aid in turning one of the most mundane parts of the site into one of the most exciting.

In fact, every page in Mail Chimp's interface has a consistent tone of voice, consistently surprising the user with jokes, quips and the personality that has made the brand famous.

How seriously do Mailchimp take the tone of voice of the site? Seriously enough to create a site dedicated solely to helping new content creation employees understand how to write content the Mailchimp way. You can see the site yourself at www.voiceandtone.com.

Voice and Tone is Mailchimp

4. Solving Tricky Problems

Sometimes the very nature of a project can pose some very tricky problems for designers and content strategists to overcome. A poignant example of this is slaveryfootprint.org, a site that tells people how much slave labor they indirectly use as a result of the products that they buy.

SlaveryFootprint.org faces a challenge in presenting emotionally charged content in a non-alienating way

It goes without saying that slavery is a charged topic and the site runs the inherent risk of alienating users, engendering feelings of guilt and generally instilling a very somber tone: something that a site that relies on social media to spread the message would want to avoid at all costs.

Instead, the site has a clearly defined design persona that frames a very serious message in an attractive and engaging wrapper without trivialising the issue — something that is very clearly demonstrated through both the public service message and the survey parts of the site.

The site presents its written content in small, bite sized nuggets of information that pique interest and keep serious content digestible

As the user scrolls down, brightly colored hands 'place' text on the page. Not only does this add visual interest, it also breaks down serious content into easily digestible nuggets of information.

Slavery Footprint chooses a non-literal route to illustrate the site using brightly colored cartoon-style illustrations.

Over in the survey section of the site, the cartoony, brightly colored images create instant engagement with the user and avoid creating negative emotion by taking a non-literal approach. In fact, there's not a single image — cartoon or otherwise — of a slave on the entire site.

4. Boosting the Bottom Line

When looking at the benefits of Design Personas and emotional design in general, it's not all about the less tangible concepts: there's some very real evidence to suggest that using design personas to develop a brand personality can increase the bottom line.

Take the example of PhotoJoJo, a popular photography related online store. After adding an item to their shopping carts, eagle-eyed visitors will notice a small gray lever with the words "Do Not Pull". If you are daring enough to indeed 'pull' the lever, a bright orange hand reaches down the screen and pulls the page up to the item description.

Do you dare pull the Photojojo lever?

While this may seem like more of a gimmick than a sales tool, the company noticed that visitors that pulled the lever had lower levels of cart abandonment, and conversion rates actually rose.

It should be duly noted, however, that this feature only works because it is consistent with the overall PhotoJoJo brand. As you browse the site, a small surprise, quirk or smile-inducing component waits for you on every page.


A Word Of Warning...

As I mentioned in the PhotoJoJo example above, Javascript magic, easter eggs and other unique features can quickly turn into cheap tricks if they are not used in line with a consistent design persona and brand personality.

Not to be a party pooper, but here's an example of a site that gets it wrong.

Daskeyboard (pictured below) is a seller of premium keyboards, and has, as I'm sure that you'll agree, a fairly standard products page:

Daskeyboards has a generic design with a very different feature in the top right corner

If you go to the site and click the link in the very top right corner "Kick A@%", something very out of the ordinary happens. Hop over to the site and try it now.

While this is pretty cool, and may be worth writing a tweet (like I did), the effect is unfortunately relegated to a gimmick since it is no way consistent with the overall design persona of the site.

Will this little feature bring traffic to the site? Almost certainly yes -- it has all the components of a good viral campaign -- but whether it will lead to actual conversions, only time will tell (my money would be on "not").


Creating a Design Persona

Now that we've taken a look at some of the key benefits of design personas and reviewed some inspiring examples of design personas done right, let's jump into an example of creating a Design Persona for a fictional client.

The Design Persona itself is a simple document, which you can easily create yourself in your word processor of choice. Alternatively, you can download a template at Aarron Walter's site here

Our client today is Forty Love Strings, a manufacturer and retailer of competition grade tennis racquet strings. Coming to us for a complete website and brand overhaul, the following design persona was created based on discussions with the company:

Brand Personality Overview

Rafael Nadal embodies everything that Forty Love Strings stands for as a brand. He is aggressive and uncompromising on the court, yet warm, approachable and a true sportsman after the after the match.

Rafael carries himself with confidence but not arrogance and when he's playing, is focused on one thing and one thing only: winning that point.

Rafael is also a fashion icon and is always pushing the envelope in terms of his own personal style - both on the court and off.

Forty Love Strings shares Nadal's characteristics and speaks to its users authoritatively, sharing with them the passion for the sport that they love. We inspire our customers to push themselves to the limits of the potential.

We sell our products to people who want to win.

Brand Traits

Forty Love Strings is:

  • Dominant but not bullying
  • Confident but not arrogant
  • Goal focused yet flexible to individual needs
  • Fashionable but not avant-garde
  • Aggressive but is also sportsman-like

Personality Map

The Forty Love Strings Personality Matrix is Dominant 80% and Unfriendly 20%

Voice

Forty Love String's voice is confident, assertive and doesn't mince words. The voice of Forty Love Strings speaks with authority but never bullies, argues or condescends. Instead, we inspire our visitors to push themselves to new levels of competitive achievement.

Forty Love Strings gets straight to the point. We never user contractions and always say what we want to say in the fewest possible words without diluting the message.

Forty Love Strings asks rhetorical questions of our users to engage and inspire them. We challenge our users by sometimes asking the tough questions in order for them to push themselves even further.

Copy Examples

  • "When you are two sets down, what do you do next?"
  • "Only the best for only the best"
  • "Your serve is not the only thing that defines you as a player"
The Forty Love Strings uses dark, broody, tennis related imagery heavily

Visual Lexicon

Color Palette: The site heavily features dark, broody black and white tennis related images. Contrast is added by the use of the bold, fluro-inspired greens, yellows, and blues of the Grand Slam circuit. When in doubt, use dark textures, subtle charcoal gradients and small amounts of bold white to create impact and contrast.

Typography: Forty Love Strings is bold and authoritative, and the choice of typography reflects this. Headings are in strong sans-serif display fonts, and the body content is simple and unadorned.

Engagement Methods

Forty Love Strings uses Twitter to inspire and motivate its followers with short messages of encouragement. We also demonstrate our passion for the game by keeping our followers updated with key news from the world of tennis (without editorializing).

We follow our clients back and offer personalised messages of support and encouragement when we learn that they are about to compete, etc.


And that is all of the detail that you'll need for a basic design persona. Obviously, you could take this much further and include a complimentary mood board or Style Tile, but this simple document clearly outlines the direction of the site, not only in terms of design, but also for written content.


Conclusion

If you are looking to develop a website for your next client that stands out from an ocean of similarity and mediocrity, then developing a design persona is an essential first step for your new project.

Not only do design personas help create a unique personality for the brand, they are also an invaluable tool for pinpointing your ideal target customer, directing future design and content decisions and can make sites more effective (and perhaps even more profitable) by creating genuine relationships with the visitors to the site.

As a final word of advice, don't make the mistake of investing in the development of a design persona only for it to gather dust in the bottom of a drawer. For design personas to be effective, every design and content decision needs to be made with reference with the brand traits, personality and tone of voice that you've established in conjunction with your client.

Above all, consistency in the application of your design persona in every element of the project is key!

What are your thoughts on design personas? Will you develop one for your next project? What are your favorite examples of sites that have effectively used emotional design and design personas in their execution? We'd love to hear your thoughts!


Additional Resources

Advertisement