This article is part of a series based on a talk I gave at Adobe Max and WebVisions last year. To read the other articles in the series, check out Bringing the Humanity Back to Digital.
In my last article in this series, “Everything Has a Personality,” I discussed how visual design elements can go a long way towards giving your company a friendly personality. Here I’ll explore how you can take it even further and put an actual face on your website.
The business benefits of using faces in web design are well discussed and documented; multiple studies and A/B tests have found that online services convert better when they include imagery of faces. Aaron Walter explains why in his book, Designing for Emotion:
“As we gaze at the world, we discover ourselves looking back… This instinct is guided by our primordial desire for emotional connection with others. We are hardwired to seek emotion in human faces.”
We look for connection everywhere we go; we seek other human faces in our world because it’s inherent to our nature to want to feel belonging and community.
Nothing better demonstrates how we are hardwired to see emotion in faces than the twitter account @facespics, which features inanimate objects appearing to experience strong emotional reactions.
The instant recognition of a smile creates a subconscious feeling that we are safe and welcome. This is why restaurants, hotels, and retail shops encourage employees to greet guests with a genuine smile and a warm hello.
Digital Businesses and Mascots
This little creature embodies the fun, jet-setting, laid-back happiness Hipmunk wants to create for their users. He adds little moments of quirky cheer to the site, from his illustrations on the marketing site to his animated dancing in loading screens. They’ve even taken him offline and had him high-fiving people at industry events.
One of the most well known faces of an online service is Freddie Von Chimpenheimer IV, the face of MailChimp. Not only does Freddie appear throughout the product and marketing, but he’s become so beloved that people have put Freddie hats on their cats, and there’s even an animated web comic about him. I also loved seeing his cheeky, winking face on billboards all around New York City a few years back.
Another site that’s done a fantastic job creating a mascot for their company is Duolingo, a free app that wants to help everyone learn a new language. This one is my favorite example (mostly because I love owls, and the face of their company is a lovable green owl named Duo).
Duo is designed to represent friendliness, wisdom, celebration, encouragement, and multiculturalism. He always is ready to cheer you on, and he’s used in the app as a way to incentivize and reward progress — you can unlock different outfits for him as you progress in your learning. His look is meant to be versatile and belonging to everyone, which is representative of the spirit the product was built on.
But a cute mascot isn’t right for my business!
Maybe right now you’re thinking “okay, I really don’t have the time or resources to do a rebrand” or “having a mascot makes no sense for my product.” That’s totally fair, I hear you on that. In some cases, such as when the subject matter is more serious, a cheerful little animal is not appropriate. However, there are still plenty of other ways to take advantage of the trust a friendly face can inspire in an interface.
Dropbox, for example, took a simple approach to reminding users of the humans behind the product. Their goal was to create a feeling of connection in the platform, so they elevated the user avatar to be an important element in their app.
“We want people to think of Dropbox as a place to collaborate, and a big part of that is elevating the people you connect with. One way we’re doing that is thinking about places we can surface user’s faces on the web.”
For people who don’t have avatars, they created this little character called the Faceholder. Rather than using a generic grayed out silhouette of a human, they’ve designed this simple, smiling face that adds a hint of cheer throughout the experience.
FullStory is an app that records videos of every interaction users have with your site, so you can see how people are using your product in real-time. I love what they’ve done to help people remember that each video represents a real person — they’ve created a unique smiling, colorful avatar for each session, so even though we can’t see what they look like, they feel like individuals with emotions.
And lastly, Airbnb lightens moments of tension by including an adorable animated human on their 404 page. It shows a girl dropping her ice cream cone — certainly a pain we can all relate to — and makes us smile even when we might otherwise be frustrated.
You can start small and keep it simple
For the last 6 years I’ve worked primarily with small startups where every designer wears a ton of hats. In this environment, where each designer is responsible for a lot, it’s not always easy to take the time to illustrate a face or think of some friendly way to create a character to represent your brand, especially if you’re like me and don’t do much illustration. However there’s small steps you can take to gradually find ways to incorporate a friendly face into your product.
One startup I worked with was SproutVideo, who provides video hosting for businesses. As part of their email redesign project, I created this little character called Sprout, an emotional little video that shows up in email messages, alerts, and confirmation messages. He gives the product a bit of humanity here and there, and I added new versions of Sprout whenever I got the chance.
At Hometeam, another startup I worked with, the company was very different; they dealt with complicated issues like family relationships, aging loved ones, and often life or death decisions. In that case, I brought humanity into the work by depicting actual older adults and families, as it’s important that Hometeam’s customers, caregivers, and families be at the center of everything they do.
As you can see, including faces in your next project can be as pronounced or subtle as you’d like; it could be the focal point of your entire brand via a mascot, or as simple as a smiling avatar or humorous error message. In either case, including faces is a powerful way to bring the humanity back to our digital businesses and help customers feel connection, welcoming, and trust.
This is the third in a series of articles based on a talk I gave last year. Check out the first article in the series, “What working in the service industry taught me about design,” and the second, “Everything Has a Personality.” You can also follow me on Twitter or Facebook to find out when new articles are published.
PS. I’m currently accepting new freelance projects, so drop me a line if you’re looking for help with web or product design, or front-end development.