Intro to Email Design

As the end of week three approaches, the office has been abuzz with happy hours, Nationals games, and multiple projects at work. One topic I have been focusing on has been email design. For front-end designers, email design is typically received with groans and reluctance. There are two main challenges that cause this negative response:

  1. You have to throw out all conventional training in design and go back to using tables.
  2. You have to adapt your code to an endless number of email clients.

E-mail design isn’t as thoroughly researched as typical design standards so solutions are harder to find.  However, there are three main resources that have helped me along in this process. The first is Campaign Monitor. Their extensive blog covers a wide array of topics and suggests tips not only in design but also marketing. They also have a Guide to CSS which illustrates which elements each email client supports. Litmus is my second resource which also maintains a blog that discusses helpful tips and all things email. The last resource is Really Good Emails,a site that compiles a list of well-designed emails. Overall these resources have been enough to help me get through the initial design stage of email development.

Screen Shot 2016-06-15 at 4.50.48 PM
Screenshot from Really Good Emails

Challenge

My task following the introductory email design meeting was to take an already existing email design and re-imagine it. The email needed to be optimized because it is repeatedly used but the design does not significantly change between sends. This repetition results in a lower open rate and less active subscribers. The goal was to design an email template that can be easily adjusted by the sales team to look significantly different so as to appeal to the user every time.

Approach

The first step I took was to look at the current email template and evaluate what could easily be improved. I had a few specific critiques that I developed into questions to answer with the new design.

current-1b
Current Email Template
  1. The top header banner detailing was getting lost. How can I better include a header? One option might be to reduce the size and put a larger emphasis on content.
  2. The well-designed pdf that the email blasts are selling is not being incorporated in the design. What is a way to highlight the visually appealing product?
  3. There is no call-to-action at the top of the email and instead the user has to scroll to the bottom. Where can I position the call-to-action so that it immediately catches attention?

Results

Using my analysis of the current design, I produced three sketches. 

Concept #1

This concept enlarged and highlighted the iPad mockup displaying the product so it was at the front of the design. It also included full width color banners to allow for easy design changes for each send.

concept1-1b

Concept #2

The second concept included a second call-to-action button so there was one on both the top and bottom of the email. This concept was the most similar to the first design but it allowed for easier manipulation.

concept2-1

Concept #3

In this concept I modularized 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.

concept3-1

All three of these concepts can be modified by the sales employee by either changing the color in the sections or replacing the image. By leaving the entire color scheme variable for each send, the email will stand out more to the readers and not get lost or considered repeat content. The next step with this process will be to take one or two of the designs and mock them up in code.

Advertisements