By Frances Collins
  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.


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.

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

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:

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.

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?
Security – the big difference between HTTP and HTTPS Regular HTTP connections are fundamentally insecure. Any data sent back and forth between your browser and a web server is vulnerable…
Dale Stillman - 12/07/2017
How to structure your web content
At Stanford University in 1990 a psychology graduate Elizabeth Newton studied a simple game. She assigned people two roles, that of a ‘tapper’ and a ‘listener’. The tappers were asked…
Frances Collins - 05/08/2017
Building a responsive website: Our Process
There are a huge amount of variables involved in building a responsive website, and there is no ‘standard’ template – each and every project will be different because each website…
Chris Pymm - 09/10/2014
Why do I need a Responsive Website?
In our previous article What is responsive website? we concluded that a responsive website was about ensuring that no matter how a user accesses your website they are presented with…
Chris Pymm - 20/08/2014