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.
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:
- Instant notification emails: generated every time a person subscribes, for those keen users with less subscriber activity.
- 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.
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.
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.
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.
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.
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.
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.
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.
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.
Loving the new @CampaignMonitor subscriber notifications & subscribe button features. Subscribers become real people!
— Obvious Group (@obviousgroup) February 22, 2013
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.