Design to Delight

by Tom Kenny (@tkenny)

What do people want from web designers? Generally, help to sell more of their product or service through a website. Good business owners know they need to create meaningful relationships with their customers and to help do this for them, we have to assist in delivering value to their customers, build trust and create an emotional connection. One of the most effective ways of achieving this is designing to delight.

Delight creates an emotional connection between the business and their customers. Those who have an emotional connection will tell other people about their experience. Simply put, designing to delight promotes word of mouth and word of mouth is one of the most effective types of promotion. Here’s why:

  1. You know you’re helping people: If they’re sharing a product or service you’ve helped design, it’s because it has helped them or they’ve had a great experience. Why else would they share it?
  2. Others trust them more: Trust is built in other people as a result of this sharing. If you know someone or trust them and they share something with you, you’re more likely to trust what they like and use.
  3. It doesn’t cost you anything: Well, the work you put into designing to delight might cost you something but the marketing push from your own customers doesn’t.

Adding Character to a Service to Delight

While my wife and I are travelling the world, we need a way of allowing us to pretend we’re still in the UK, so we can watch TV anywhere in the world. We’re UK citizens and we still pay for things like Netflix, so why shouldn’t we be allowed to watch it in New Zealand, Japan or anywhere else while we’re travelling?

We tried a few options. The first was a boring free Chrome extension that worked well for a while but became more unreliable over time until it completely stopped working. Then we tried Hotspot Shield which works fine but displays ads while you’re browsing, unless you pay but it looks and feels too corporate. Basically a bit dull. This led me on another search where I stumbled across an app called TunnelBear.

Already the name is intriguing and it turns out it has more character than of all similar apps combined! A bear pops its head out of a pipe, which looks similar to the ones found in Mario.

TunnelBear’s homepage

TunnelBear’s homepage

TunnelBear is also much easier to use than the others. The ultimate compliment is how much my wife loves it and she isn’t the type to install new software on her computer, and if you believe one of the reviews for the iPhone version, even pensioners can use it without any help.

They have a generous free plan but once my wife decided she liked them, she handed over her money immediately for the full service. They won because they delighted her. I’m also sharing our experience here with thousands of people because they designed to delight.

Oh and yes, they still use a skeuomorphic visual design. Remember that?! I think it looks great.

Even the pricing page is delightful

Even the pricing page is delightful

Maslow’s Hierarchy of Web Design

You’re probably familiar with Maslow’s Hierarchy of Need so it was interesting to come across a modified version in Aaron Walter’s book, Designing for Emotion:

Aaron Walter adapts Maslow’s Hierarchy of Needs to web design

Aaron Walter adapts Maslow’s Hierarchy of Needs to web design

It brilliantly illustrates a layer of design that is often neglected. As you can see, it’s labelled it as “missing” and generally that is true. Rightly so, we’re focused on functional, reliable and usable design but the pleasurable side isn’t something that gets as much attention. I would argue though you could probably split that into two, visual design and delight. We definitely focus on visual design, as we should, but delight is the often missed part.

That isn’t to say you should take the graphic literally. Visual design and delight aren’t something you layer on top, they’re key components of the design as a whole.

TunnelBear designed to delight, making all the difference

TunnelBear designed to delight, making all the difference

The pleasurable part (including visual design and delight) was missing in the apps in the example above, until we came across TunnelBear.


MailChimp sent me a free t-shirt just for being a customer. I can’t even remember why they gave it to me. They sent it just before I went away for a year so I haven’t even seen it yet but just the fact they were willing to do so made me a happier customer. Very few companies give away things like that for free, so when they do, it definitely stands out. I didn’t even think twice about sharing it with my followers.

MailChimp sent me a free t-shirt!

MailChimp sent me a free t-shirt!

The t-shirt confirmation email I received included the above delightful animation. Even the text included in the email is delightful:

Your t-shirt has been lovingly packed and is on its way to you. Wear it like a hug from us to you.

Learn from the Best

In the monthly series here on Inspect Element called Learn from Great Design, I study the best and show you the best ways you can use design on the web. All the websites I’ve studied so far are set up to delight their customers; one important aspect of why they are the best.

Avis Car Hire delight their customers with a better experience than their competitors, who are mostly still stuck in the past in comparison. Some of their competitors look like their stuck in 1996 but Avis are ahead of even their most modern rivals.

Orangina delight their visitors with simple but fun interactions that match with the brand values of the company itself. You won’t find many better examples of web design delighting visitors through the brand itself.

An alternative way of thinking about how to design to delight is to find out where people have anxiety and try to help them, basically solve peoples’ problems.

Harry’s discovered men were not exactly happy with the prices the big razor companies were charging and decided to do something about it. I’ve long been cursing the price of razors and I bet many men (and probably women too) have been doing so for years too.

The Delight of Customisation

Another way to delight people is to help them customise an app or service to make it feel more personal. Take the Barclays mobile app for example.

Customising the Barclays mobile app

Customising the Barclays mobile app

As you can see you can add your own photo in the header of the app. Pulling down to reload your accounts revealing the full image is a nice detail. The interesting clouds I captured over Lake Taupo in New Zealand can now be seen in my app. By the way, I instinctively wrote “my app” (without editing) because that’s almost what it has become.

Remarkably, Barclays also offer a way of customising your bank card with a photo of your own choosing too. We have a strong emotional relationship with our money, making banking one of the most personal services we use but it’s rare to see a bank actually make it feel personal.

You Have the Right to Delight

If there’s one thing you should add to your next project, it’s design to delight.

Improve Your Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.