Stanford Graduate School of Business:
BackgroundThe 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
|
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:
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.