By Fran Johnson
  1. Home
  2. Insights
  3. Article

How to design notifications?

We’ve all skim read web notifications, not entirely sure what we’ve just agreed to, or diligently re-read an error message for the third time to triple check the meaning.

Often, error messages and notifications don’t feel designed. They are an afterthought after the rest of the web copy has been decided and deliberated on. But it’s in those moments where a user encounters a notification that their customer service experience can be made or broken.

Brand-led notifications

Over the past number of years brand guidelines have become working documents rather than something that gets filed away immediately after a brand rollout. They help companies make decisions around visual communication that ensure everything their customer sees feels ‘on brand’. At a dozen eggs, we expect these documents will soon reference the verbal and written parts of the brand, helping designers, developers and sales teams to make decisions.

Though our voice doesn’t change much, our tone adapts to our users’ feelings.

A great example of this is Mailchimp – they have an entire site – – dedicated to training Mailchimp writers about their brand. The company is known for its humour, but they use this carefully.

Negative error messages from Mailchimp

Mailchimp don’t joke around with people who are frustrated – they get to the point straight away.

Positive error messages from Mailchimp

Keep it short and sweet

Coco Chanel famously said “Before you leave the house, look in the mirror and remove one accessory.” The ‘less is more’ philosophy can definitely be applied to notifications. A few days ago I was on the Waitrose website, and came across this:

Customer information error messages from Waitrose

Prioritise your message. The above example feels confusing – partly because Waitrose is trying to say too much; first thanking me for updating my details, second, checking if I need to update more! The call to action isn’t obvious – where am I meant to be going next?

Use design tools to create impact. The use of headings, lists, buttons and colour should ensure your error messages retain clarity. John Saito – a designer at dropbox – speaks of the important of de-emphasising the less important words, and creating a visual hierarchy.

How to design notifications, areas to consider.

With a little thought around how your users interact with your website, hopefully communication will remain clear and on brand!



Images from Channel pro network and John Saito

HTTPS – How secure is your browsing?

Adding HTTPS to a website ensures its secure. A requirement for eccomerce websites, and likely to be standard in years to come.

Dale Stillman - 12/07/2017
How to structure your web content

Who are your audience? Learning who you are talking to is crucial in getting web design right. It needs to be structured and understandable.

Fran Johnson - 05/08/2017
Building a responsive website: Our Process

The a dozen eggs process of building a responsive website.

Chris Pymm - 09/10/2014
Why do I need a Responsive Website?

Why do I need a responsive site? Google likes it! Think about the experience your customers are experiencing alongside the increase in conversion rates.

Chris Pymm - 20/08/2014