Email design is typically met with reluctant groans triggered by two main challenges. Designers have to throw out conventional web development training and also adapt their code to appease an endless number of email clients, including Gmail, Outlook and Yahoo. The list goes on.

Because the rules of email design change based on email clients, solutions aren’t as thoroughly documented as typical technical solutions. Despite this lack of documentation, I found four main resources to successfully design and troubleshoot my task.

  • Campaign Monitor’s blog covers a wide array of email topics and provides tips not only covering design but also marketing. The site was useful when I was introducing myself to email design. I also used their Guide to CSS to ensure my HTML elements would be compatible with the right email clients.
  • Litmus maintains not only a blog but also a weekly podcast. Their content was useful for solving intricate problems as they discuss the nitty gritty of email design.
  • Really Good Emails provides a current collection of well-designed emails and articles concerning trends and challenges. I used their resources for visual inspiration.
  • Email on Acid tests the emails you are building in different email clients. The site helps to ensure the email looks good in clients you might not have access to.

Challenge

My task was to redesign Industry Dive’s blast email template, the email used to alert readers of our downloadable content. The email is continually used but does not visually change between sends. The repeated reuse results in lower open rates and less active subscribers. The challenge was to increase reader interaction by implementing an email template that can be easily adjusted by the ad operations team and look significantly different each send.

original blast The original email blast design.

I focused my redesign on three different goals. First, to rework hierarchy of the email to focus on the content of the blast. Second, incorporate the branding of the products in the email blast design. Finally, increase conversion rates and provide clear call-to-actions.

Concept and Approach

Using my analysis of the current design, I produced three sketches, each with different approaches to solving my defined goals.

sketches The three concept sketches.

  • Sketch 1 enlarges and highlights the iPad mockup displaying the product so it is called out. It also includes a full-width color banner to allow for easy design changes for each send.
  • Sketch 2 includes a second call-to-action button at the top of the email, giving the reader multiple opportunities to download the product. This concept is similar to the first design but allows for easier manipulation.
  • Sketch 3 compartmentalizes the design through containers so that the email has easily defined sections. This concept can be dramatically changed as the entire background color for the whole email can be altered.

The ad ops team can modify all three of these designs by either changing the colors in the sections or replacing the image. By leaving the entire color scheme variable for each send, the email stands out to the readers and is less likely to be seen as repeat content. After mocking up the sketches, stakeholders chose sketch one to move forward, because it was eye catching and the easiest to alter.

The next step took the most time: perfecting the email UI. The email needed to highlight the paying sponsor without looking like an advertisement. It also needed to be easy to scan and encourage the user to click on the call-to-action buttons. After the design was fully coded, I tested it in Email on Acid. Not surprisingly, there were some inconsistencies across email clients that needed to be solved. Some of the issues included the typeface changing to Times New Roman, logos stacking vertically rather than laying horizontally and image warping in Outlook 7.

Final Design

After some small code adjustments, the email was ready to be passed on to the ad ops team. I ended up completing three different designs for the email blasts based on the original template: course lessons, survey and webinar.

final design Email designs for course lessons, surveys and webinars.

Each template design accomplishes the three predetermined goals. The minimized header and emphasized title produce an effective hierarchy. While the easy to customize top background color lends itself to the product design. Finally the emphasis on the call-to-action buttons increases conversion rates. All of these lend themselves to an easily customizable and attention grabbing design, while remaining unique in style. Together, the emails create a consistent message and allow for the ad ops team to effectively reach our clients.