The Nature Conservancy in California Responsive Email Template

TNC Email Template teaser image 3.jpg

The Challenge

Design a responsive email template for the Nature Conservancy in California’s new marketing campaign that corresponds with the look and feel of the new website and employs elements of the revised brand style guide.  

Context

I worked closely with the chapter’s creative director to design and create these new templates, as well as the marketing manager and developer.

 

Role/Services

Visual Design
Responsive Email Design
Wireframing
Photo Selection  
Mockups

Time Frame 

August–September, 2016


 
 

Consistent Branding

The email template incorporates many of the design elements of the chapter’s website (read about the website redesign), including colors, type treatment, and alignment, to provide a consistent look and feel for the marketing campaign as a whole. The website was designed with an atomic design system, so we translated the look of feel of each module to email within the parameters of the fluid-hybrid approach for responsive email.

 
 
 
 

The email banner was designed to resemble the hero images used on the website. I mocked up email banner options in Photoshop, selecting photos appropriate for potential email topics that would work with logo placement, and illustrating the different color themes of the revised brand style guide.

 
 
Color to Banner@3x.jpg
 
 

Fluid-Hybrid Email Approach

The email was designed within the parameters of the fluid-hybrid email approach for responsivity. I worked with the developer to design within the typography, spacing, and other design limitations. To conform to this approach, the footer design went through several iterations to achieve a clean design where the footer elements stacked neatly on both desktop and mobile. Another constraint was the requirement to use default system fonts; because we couldn’t use the website’s fonts, it was important to convey a coherent look and feel through a consistent treatment of all the other design elements (color, spacing, alignment).

 
 
wireframe for email production
 
 

Process

I collaborated with the creative director, marketing manager, and developer on this project. The email content strategy had not be defined, so the template had to be designed with the flexibility to accommodate a variety of subjects. To achieve this, we defined the core components to be short text paragraphs, images, and links, and we created two template layouts for single-story and multi-story emails. I created the first draft of these layouts, translating text, quote, and image modules from the website into similar modules for email, and worked with the creative director to define new treatments for inline and standalone links that would be consistent with the refreshed brand. I created the templates in Sketch, along with a specifications document for the developer. I used the templates to build mockups for email production once the campaign began and provided QA for design and functionality throughout the production process. 

 
 
Welcome Email FINAL.jpg
 
 

Outcomes

As a result, the look and feel of the email campaign, a critical component of the overall marketing campaign, had consistent and strong branding. The Sketch templates enabled a more efficient production process, providing clear design directions for all members of the production team.