Email Redesign in Action: How to Improve Your Email Design, Before and After

Email design is never complete. It is an ever evolving, tweaking and pixel-pushing medium.  We are always working towards creating a better design for our subscribers, never content with what we sent previously.   What you see in your inbox is simply a final version of how that email looks at that moment.  That's why testing the design is extremely important.  Does the button color matter? The position of the button? Is it an image, or not?

The following is a review of a triggered esurance email upon requesting a quote from their website. Note: Off Madison Ave does not work with esurance, nor do we have any previous knowledge of their marketing strategy and previous testing results.  This is simply to show the email redesign process in action.  With that out of the way, let's begin!

Initial Email Design Review

Email Positives:

1. Branding is consistent with the site, and matches my expectations.
2. Very simple - only the information necessary is present. They aren't trying to sell me their other forms of insurance right away (homeowners, renters, etc.).
3. I can clearly see I have two options of paying - monthly or all at once.
4. The green texts catches my eye. I see I'm receiving some discounts on this quote, although the discount is somewhat confusing. What's fast 5?

Areas for Email Improvement:

1. Two calls to action - both options are button oriented and one doesn't take precedence over the other. 
2. No reference to what I was quoted. Was this for my car or home?
3. Automatic opt-in to their other email programs without my knowledge. There was no explicit opt-in at the time this quote was generated.
4. Email lives beyond the time it's sent. Is this quote still as good as when received? Maybe I got a quote before I left town, and am now coming back two weeks later.
5. Is ordering online safe and secure?
6. Pre-header text was only about unsubscribing. When did I subscribe? I thought I told the site to email me this quote - not subscribe to additional emails.

Email Wireframe

Our initial review pointed out some positives of the current design as well as areas that could improve.  Our next step is to take this information and draw out our potential new design. Using a wireframe allows us to show placement of the content we want to include in the email.  This wireframe isn't used as a design, but rather a content framework to guide the design process.  As you can see we have added some additional content as well as adjusted priority to one of the two call to action options.

Redesigned Email

1. We used the pre-header to remind customers where they received this quote.
2. We added a date to the quote to provide reference of when it was generated. 
   
3. We made the quote price much larger for quick and easy identification.
4. We added an expiration time to the quote in order to provide a sense of urgency and inform the customer that this quote will expire.
5. We included a large "Next Steps" heading to direct the customer in their order, if they choose.
6. We added "or" between the two options to better distinguish seperate options.
7. We added in details of the quote for reference in case additional quotes are later generated.
   
8. We included the ability to change the details where information may have been entered incorrectly, or additional information added.
9. We removed the "phone" call-to-action from the top, and made the focus on ordering online.  This not only stays in the average vertical and horizontal preview panes but limits the confusion of two buttons. These customers are most likely web savvy and will want to follow through online. (They did get the quote online after all!)
10. In the case that the customer would like to call, we simply moved the "call" call-to-action to the bottom of the email and added a phone icon as an additional visual identifier.
11. We added security information from the site to ensure the customer knows completing the purchase online is safe and secure.
12. Last, we added the ability to opt-in to additional emails from esurance with a short benefits statement.

As you can see, once we were ready to design, we moved the quote details to the opposite side to ensure anyone viewing the email in a vertical preview pane would be able to see all of the next steps. We were also able to save some space, making the email shorter and allowing more information to fit within the preview pane. This limits the subscribers need to scroll.

It's extremely important to test your email design in all email clients (Outlook, Gmail, Yahoo, etc.) because you don't know what client potential customers are using.  Current stats show Outlook has approximately 33% market share. Yahoo and Hotmail place with less than half of Outlook's market share (stats may vary per customers base).  Plus, email clients are always changing with the popularity of the iPhone. More and more people are viewing email on mobile devices. How does your design look on the small screen?

One a side note: Thanks to the heavily publicized fixoutlook.org, more people are learning how difficult email design can be when email clients don't use standard HTML markup.  Your email may look good in Gmail but be a complete mess in Outlook. Your customers shouldn't suffer because their email client "breaks" your design. Test your design, then test again.

Side-by-side Email Comparison

At this point, we're at the stage in the design process to go ahead and implement the changes while keeping a close eye on the email's statistics and how it effects customers interacting with the website.  Are customers responding to the "expiring" message positively?  Maybe we need to give them more time? What about the button - do results improve when the button is text versus an image?  Design is an ever evolving process, especially when it comes to email marketing.

About the Author: David Hibbs

David is the pied piper of customers, drawing them into your brand through a series of well-timed, well-crafted emails and other online touch mechanisms. He knows what your customers want, where their eyes go on an email and how to get them to take the actions you desire in the online realm of lifecycle marketing.

As the Customer Lifecycle Manager, David oversees online communication strategies including email marketing, text messaging, voicemail, direct mail, and retargeted banner advertising. He specializes in developing strategies to improve conversion rates, and building a one-to-one relationship with customers in order to reach the right customer, at the right time, with the right message.

View more blog posts from David Hibbs >

Contact David

<< back to blog