Creative Critique: Tips for Tweaking the Email Template

LivingSocial is one of the many social sites I subscribe to for great deals on local dining, entertainment, services and shopping. Below is an email I received that got me thinking about small design changes that could have a big impact. Let's take a look at a recent email.

 

While I love the deals they offer me and think highly of their creative, I have four minor recommendations for their email template:

1. Check Rendering in as Many Places as Possible: While the addition of the 4/25 aerial background shot is a fun idea, it actually breaks the email when viewed on a wider monitor, as you can see in the screenshot below.

1. 
   
2. 
   
   
3. 
   

This is a tricky one! To avoid this, a much wider image could be used and/or the left and right sides of the image could be blended to a solid blue color (in this case). The background would also need to be changed from black to blue in the HTML, which would create a seamless viewing experience for users on wider monitors.

1. 
   

2. Make it Easy to Read : “YOUR DAILY DEAL”  at the top is difficult to read on the blue background. White would make it more legible on blue, and would still render it clearly if images were disabled and the user was viewing the email on a solid black background.

1. 
   

3. Maximize Your Real Estate: The two column layout utilized here doesn’t take full advantage of valuable real estate as you can see below.

1. 
   
2.  
3. 
   

It would be economical to integrate the offer image in a more horizontal way (or make it shorter) so that the deal description can wrap under it. Additionally, the “1 Deal Location” copy is surrounded by unutilized white space.

1. 
   

In this quick revised mockup below, you can see that the deal location is pulled up next to the price (now you can quickly glance at the exact town of the deal before you even decide if you want to view it!) and the copy is extended 100% across the email. This is a more compact arrangement and makes for a shorter email.

1. 
   
2. 
3. 
   

The same principles can be applied to the “Find Out More” offers below the hero section. This will make the email shorter and will raise more content above the fold, while allowing for less scrolling.

4. Social Sharing: LivingSocial currently has two friend referral programs in place. If you buy a deal, you can then share a unique user link on your social network. If three friends buy from that link, you get the deal you just purchased for free. Additionally, if you invite a friend to sign up for LivingSocial and they purchase something, both you and your friend get $5 in deal bucks deposited into your account. Both of these programs are important incentives for the cost-conscious shopper (LivingSocial’s target audience) and should arguably be advertised in LivingSocial’s emails. At the very least, regular Facebook, Twitter, and Forward to a Friend functionality can be added at the top to simply share the deals. On that note, I am interested to see which daily deals website integrates the new Facebook Send button first!

LivingSocial offers a great service, has a beautiful website, and is well-branded. In my opinion, these few relatively minor enhancements to their emails would be easy to implement and would prove worthwhile. What do you think? 

 

Anna Boyadjieva, creative specialist, e-Dialog

 

 

 

 

Pushing the Envelope in E-mail Design

 

I  was recently invited to be part of e-Dialog’s workshop at the 2010 New England Direct Marketing Association (NEDMA) Conference. As part of the overall workshop on creating relevant e-mail marketing campaigns, I shared a presentation on Interactivity, which is one of the main factors of relevance. The session attendees were very interested in this topic, so I wanted to share some techniques and useful tips from the presentation that will help your campaigns be more interactive. Enjoy!

 

 

 

Polls
Relevant e-mail marketing is based on data. But look beyond opens, clicks and preference centers. Polls can be a great way to learn about your customers, and most people really like taking them. You can see some examples of interesting ways to incorporate polls in this E-mail Precisely post from March. One drawback to polls is that they don’t work in Outlook 07 and Hotmail. To solve that, just add a link prompting users to click through to a landing page if they are having rendering issues.

  

Animations
Animations are a great way to draw the user’s attention and to put a lot of information in a small space by scrolling content in and out. In the Bed Bath & Beyond “steaming cup of coffee” example below, the animation is subtle and adds a touch of whimsy to the e-mail. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You can also see an example of an animated GIF in the Pottery Barn e-mail below. Instead of showcasing a number of smaller images that might compete with each other, Pottery Barn chose to include an animated GIF that cycles through several different products - giving each one a few seconds of inbox glory.

 

 

 

A drawback to animated GIFs is that Outlook 2007 can’t run them and will only display the first frame of the animation -  so be sure to place important content like your offer in the first image.  However, be careful not to overdo the animations in your e-mail and make it too busy.

 

GIFeo
A GIFeo is an animated GIF that is converted from a video (GIF + VIDEO = GIFeo). Frame for frame, it’s pretty much the same live action feel, just without sound. It adds a visually exciting component to your messages since it’s uncommon to see movement in an e-mail.  Although there is no sound, it is enough to grab the user’s attention and get them to click through to your site for the entire viewing experience. In the Cost Plus World Market example below, the GIFeo gives a brief idea of the travel video and prompts the user to click through to the landing page and watch the full video (sound and all).

 

 

On a different, yet related note, you can also use people’s learned web browsing patterns to your advantage. We’ve seen some recent creative that displays as if it were a video module on a website. We call this the “Click Trick”, since your natural instinct is to click and play the video. In the KRAFT FOODS example below, you can see that the hero image mimics a video player, which looks like it has been paused, which makes one want to click to watch the rest of the video. But as we all know, you can’t have video in e-mail, so once you click, you are taken to a landing page. Whether this “video player” is a static image or a GIFeo with a play button at the end (like we saw in the Cost Plus example above), the effect is the same: the user’s now on your site and hopefully viewing your video.

 

 

Dynamic Imagery
Take personalization one step further with dynamic imagery. In general, dynamic data gets published into system text, but it is possible to add personalized copy into your e-mail’s graphics and have it render in any font you want. For example, NFL Shop’s recent birthday trigger was revamped to pull in personalized jersey images from the website. The user’s last name is printed on the back of the jersey, which is included in the e-mail graphic.

 

 

Social Media
Many e-mails are now not only prompting users to “Become their Facebook Fan” or “Follow them on Twitter”, but to share the content of the e-mail on popular social sharing sites with the click of a button. As you can see in the Penguin example below, they have a section to stay connected, and a section to share the e-mail’s content with friends.  All of this is a great way to have other people do some marketing for you. Budget Rent A Car recently tested a “TWEET THIS OFFER” button in one of their e-mails and saw an incremental revenue increase - not to mention the exposure from users sharing this deal on Twitter.

 

 

Mobile
While mobile e-mail remains a very new medium, clients are making strides towards making their e-mails more mobile-relevant. In the example below you can see the e-mail Avis recently sent out only to iPhone users. This e-mail, which was 450 pixels wide, advertised their new iPhone app, and was designed at the modified width to allow for better viewing on an iPhone. Its unusual size made it more conducive to the iPhone screen while also allowing it to be readable on a desktop. It contains large call-to-actions, graphics, navigation, and copy which are easier to see on a small screen. This campaign was a great success with much higher click and open rates.

 

 

Super Subject Lines
The Super Subject Line (SSL) is an addendum to the subject line, and is displayed where most white-listings currently live: at the very top of an e-mail. It displays when images are off, and includes a call-to-action. The SSL is meant to enhance the subject line and add an additional level of scannability. It also pops up on your Outlook Desktop Alert and certain web mail previews. It is the first thing that users on old mobile phones that can’t render HTML will see (instead of gibberish HTML code). The idea is to get the user to want to read your message, so crafting the content of the SSL and testing it is of the utmost importance.

 

 

I hope these examples have given you some ideas to try out in your e-mail campaigns. Please let me know which technique worked best for your audience!

  

Anna Boyadjieva, web designer II, e-Dialog