Designing effective notification emails

Early last year we released a highly requested new feature, subscriber notification emails, so customers could receive a summary of the new people who had recently joined their email subscriber lists. We faced quite a few interesting challenges during the design of this feature and also received some great feedback, so I thought I’d give you a behind the scenes look at the design process and share some of our learnings.

Subscriber Notification Emails

What was our goal?

The goal of our subscriber notifications was to keep customers up to date with their new subscriber activity and ideally, help measure the growth of their lists. But while statistics are always great, we also saw an opportunity to give users a way to get to know the people subscribing to their lists. Who were they? Where were they from? This would be much more useful than a list of faceless email addresses. Since not everyone would be interested in receiving notification emails, we had to make sure that it was easy for users to choose how frequently they wanted to receive notifications, if at all.

What kind of notifications should we send?

As subscriber activity can vary greatly amongst customers, we needed to ensure that our solution catered to both high and low amounts of activity. Also, some people would be very interested in keeping up to date with their subscribers, while others might want to be updated less frequently. As a result, we decided to provide two emails that users could opt in to receive:

  1. Instant notification emails: generated every time a person subscribes, for those keen users with less subscriber activity.
  2. Summary notification emails: sent daily, weekly or monthly depending on the user's preferences. For those interested in a higher level breakdown of their subscriber activity.

Designing multiple emails in one

When a person subscribes to an email subscriber list, it's possible to pull additional public data, including things like their location and sometimes even a Gravatar image. The challenge is in presenting this data in a way that's both useful and interesting.

As this data isn't always available for every person who signs up to a list, we took a modular approach. Our email design would basically need to dynamically transform according to the data available, while looking great and making sense in all cases.

As a result, we designed an email layout that featured blocks that basically stacked on top of one another. Each block was designed so that it could be slotted into place if there was data for it. If a particular block didn’t have data, it was simply left out.

The summary notification email

We can see the modularized summary email in action below. The "Meet some of your new subscribers" section only displays if we have avatar image data available for any of the previous month’s subscribers.

Summary email with all data available

A monthly summary email with all data available

Summary email with no avatar image data available

A monthly summary email with no avatar image data available

We also developed a content hierarchy, with the most important content sections being at the top of the email. Now it was simply a case of designing each section so it displayed the right information, while also being able to slot into the email at any spot.

Turning an email address into a person

We decided to start the email with some statistics to give users a quick idea of how many new subscribers they'd had over the given time period. Numbers for average and highest subscriber count were also included as a way of comparing and gauging progress over time.

Statistics section design

Pictures speak a thousand words, so we tried to incorporate visuals instead of numbers and tables where appropriate. The map section plots the people that subscribed during the given time period on a Google map. I like it as it gives users a quick visual of where their subscribers are from. There's also a table showing the number of subscribers per country for the more statistically-inclined. From a visual design perspective, the map also acts as a feature image for the email giving it the visual weight it needs at the top of the email.

Location section design

How do you turn an email address into a person? Give it a name and a face - and that's exactly what we did in the "Meet your subscribers" section. We displayed a list of Gravatars in this section to personalize things a bit and help users get to know their subscribers better. Circular avatars might not be the most practical design elements, but they look great and match the aesthetic we were after. We also limited the size of this list to ensure it wouldn’t be overwhelming and cleverly included a link to view additional subscribers at the end.

Avatar section design

At the bottom of the email, there is also a clear call to action in the form of a big green button, to drive users back to the application to delve further into their subscriber data.

Call to action section design

The instant notification email

Similarly, we decided that the email we sent immediately after a new signup would have a dynamically-changing design, depending on the data collected for a subscriber. We wanted this email to give users a snapshot of who the subscriber is and where they're from. The subscribers name acts as a header next to a large avatar image to personalize the email, while the location map is split into two to show the location from different zoom levels and add visual interest.

Instant email with all data available

An instant email with all data available including a few custom fields

Instant email with no location data available

An instant email with no location data available and no custom fields

What about mobile devices?

The standard width of an email is 600px, which looks fine on most desktop email clients. On smaller mobile screens however, it's generally scaled to fit, making any text very difficult to read. Around 43% of us check our emails on our mobile rather than a desktop, so it’s definitely worth making your email design responsive.

Be generous with fonts on mobiles, not going any smaller than 14px in sizeI redesigned the email to fit nicely onto smaller mobile screens. Typography becomes increasingly important for readability on smaller screens, so great care was taken setting font sizes, weights and padding. I like to be generous with font sizes on mobiles, not going any smaller than 14px in size. I also center aligned the text to balance out the design.

I generally try not to remove information when designing for a smaller screen, but decided to remove one of the maps in this case for simplicity. A single map still showed the subscribers location effectively so we weren’t actually losing any information.

Design optimized for mobile

It can get a bit tricky to actually code up a responsive email but hopefully our Responsive Email Design Guide will help. For this email I decided to set a breakpoint at 600px width, as this is the point at which the desktop email gets squashed. The email width becomes flexible below this point rather than simply jumping to a fixed 320px width. A flexible or fluid email design is a sure way of ensuring that your email will fill the screen nicely on any sized mobile device, which is becoming increasingly important with the array of new mobile devices coming out on the market.

Mission accomplished

It’s been nearly a year since we launched this feature in February 2013 and we’ve received lots of great feedback from some very happy customers.

With over 1.3 million notification emails sent for around 84 million new subscribers, I’m glad we took the time to sweat the details of the design. As we all know, no feature is ever complete. There’s always room to tweak, hone and optimize, and we’ll continue to do so for this feature and others in the future. I’d love to hear your thoughts on the design along with any similar design challenges you’ve had.

Posted by Adham Dannaway

6 Comments

  • Todd
    15th January

    (+1) Great to see how you’re working out ways to connect more personally with the audience. Well done.

  • Rosie
    22nd January

    Thanks for sharing your experience and process. Really interesting.

  • Ben
    22nd January

    It’s great… but not localized (translated) in other languages. So, as others features, I can’t use it.

  • Vicky
    22nd January

    Is there a Whoovian in the midst who decided to sneak in an Easter Egg with ‘Sally Sparrow’?

  • Salina
    16th February

    It’s so interesting how email marketing, Email subscribtion and all email stuffs still works like a charm in 2014. Keep us updated.

  • Anne
    7th March

    This is a really great way to connect with your audience on a more personal level! I also like the way you have laid out the entire process here, it has made it easier for someone like me to see your motivation and how you came to a solution. Very good idea!

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account