Stanford Graduate School of Business:
​Executive Education

Responsive Email Template Design

Background

The Executive Education team at Stanford's Graduate School of Business was migrating email campaign platforms and needed to design new and mobile-responsive templates.

Goals

• Confirm to modern best practices with content and design 
• Leverage responsive open-source frameworks 
• Build two primary templates with modular sections for greater versatility

Original Emails

Initial Wireframes

I started by sketching various possibilities for a modular information architecture that could stretch and shrink for mobile, tablet, and desktop email clients.

Digital Wireframes

As I made progress with the email structure, I started exploring several of the modular patterns in HTML and CSS. My goal was to design fully responsive modules that could be easily swapped around based upon the goals of each email. At this stage, colors, fonts, and formatting had not been considered and were based upon default styles of the underlying open-source framework.

INITIAL EMAIL WIREFRAME

I then put together several of the modular email components with the existing content to test the responsive formatting and overall information architecture.  

Visual & Content Design

Now that I have the basic email framework established, I started to work in the actual visual guidelines for fonts, colors, logos, and images. I explored combinations of pale yellow, light blue, and bright green as the visual style is generally on the brighter side. But ultimately, I used a light grey and blue for legibility and contrast against the Cardinal red.

I also wanted to optimize these email templates according to current best practices for content hierarchy, calls to action, and responsive formatting. Here are the primary guidelines:

• Regarding email length, the general best practice is to keep the message as simple and short as possible, roughly 20 lines of text about 200 words. 
• It's also a best practice to keep a CTA as prominent as possible without interfering with or contradicting the main message of the email. In short, keep simplifying until you get to the core message and action. 

EMAIL 1

EMAIL 2

Final Execution