Challenges & Solutions of an Email Template Redesign

Important Update to our Privacy Policy

Yes Lifecycle Marketing is committed to ensuring that your privacy is protected. On May 24, 2018 we updated our privacy policy to comply with the General Data Protection Regulation (GDPR).

Please review the updates to our Privacy Policy and contact us with any questions. Thank you!

View Privacy Page

X

As brands evolve, grow, merge, and undergo the many inevitable business transitions, their image must change to accommodate these evolutionary steps. Even the most iconic and recognizable brands (Coke, Apple, Shell, Windows–to name just a few) have re-invented their visual identities multiple times. So, when Marriott International updated the brand identity for its loyalty program, Marriott Rewards, we knew it was only a matter of time before a new email template design would be necessary. Our primary objectives for this project were twofold:

  • To effectively depict the updated brand positioning while complying with email best practices
  • To simplify the overall look & feel.

1. Identifying & Implementing Key Brand Components

When redesigning an email template for a brand refresh, it is critical to first determine what elements and characteristics make up the essence of the brand. In other words, if the logo is removed, what design elements (i.e.: color palette, fonts, photo & illustration style, visual composition, etc.) are indicative of a certain brand. In reviewing the style guide and meeting with the agency that created it, it was clear that the new fonts (Brown for headlines & Proxima Nova for body copy) and photo style were the pillars of the new brand. Particularly, the way in which the fonts and photos are used in tandem: headlines over large, experiential images – a look that is simple to execute in print and tricky to execute in email.

A. Custom Fonts

Before determining how to pull off the copy-over-image look, we first needed to make some decisions about the fonts we would use in our template update. Using Google Fonts in email is a safe and simple practice because they are already hosted and easy to embed by adding a snippet of code to the <head> of the HTML document. After combing through the Sans Serif font options on Google Fonts, we found a few that were close, but none that were close enough to the weight, shape, and overall character of Brown and Proxima Nova.

Because the fonts are such a key component of the brand, we came to the conclusion that using the exact typefaces was the only viable option. In order to do so, we needed to figure out how to host the fonts on our servers – a process that included ensuring we had the correct server settings, font files, and font licenses. As with any new feature in email, testing is a must, and we were thrilled to learn that load times for these custom hosted fonts did not differ significantly from those of other hosted fonts (such as Google Fonts). However, there is always a caveat in email – in the case of hosted fonts, they are not supported everywhere (particularly in Gmail & Outlook). Thus, it is important to assign “fallback” fonts for environments where hosted fonts are unsupported. Ideally, the fallback font is a system font, meaning that it is pre-installed on the majority of systems. Since Arial is a close visual match to our custom fonts and is installed on 99.8% of Windows and 98.7% of Mac computers, it was the logical choice.1

B. Background Images

Our next design & coding challenge was identifying a solution that would allow us to put copy in images while complying with email best practice and the Americans with Disability Act (ADA). Making the copy part of the image itself was not an option for a number of reasons. Not only does this option render the images-off view of the email essentially useless, but it would also be an ADA violation because screen readers cannot read copy in images. Additionally, Marriott Rewards emails are translated in multiple languages in order to speak to their global audience–a fact that would create a production nightmare when the copy is part of an image.

After consulting our web production team, we arrived at a solution which allows us to be both brand & ADA compliant; we chose to use background images with HTML copy overlays for feature modules. This treatment requires a number of design and coding considerations:

  1. Images for these modules must be carefully curated and / or edited to ensure that whatever appears behind the text does not compromise legibility.
  2. Ideally, the images chosen for these modules have an area of solid color behind the copy (i.e. the sky in the example below), but in situations where that is not the case, some careful Photoshop work is required to create a space for the type overlay.
  3. Because we approach email design with a “mobile first” mentality, the feature modules in this fully responsive template utilize mobile image swaps–meaning that the image that displays on mobile devices is an entirely different image than the one that renders in desktop environments. This allows us to alter the image for legibility in mobile the same way we do in desktop.

As I mentioned, custom fonts in emails prompt many quirks and caveats. One drawback of the background image solution is that background images are not clickable – a fact that would’ve been a deal breaker for Marriott Rewards because their carefully curated wanderlust-y images garner a lot of clicks. Thankfully, our web production team created a workaround: placing a clickable transparent PNG over the image portion of the module. 

2. Less is More

In addition to infusing the brand refresh into the template redesign, we took the project as an opportunity to modernize the design. A quick glance through your inbox will reveal an industry trend towards minimalism: less copy, larger images, more white space, and less content. We applied these principles throughout the template redesign, but it is most apparent in the new header and footer where a minimalistic “shell” allows the content to steal the show.

The original Marriott Rewards template opens with a header dedicated to dynamically populated member data. In the redesign, we moved all of these data points and the search bar into separate modules which can be included or excluded depending on the needs of an individual campaign. We also hid the pre-header text to create an ultra-clean header that consumes less real estate and ultimately gets recipients to the content faster. 

Marriott Rewards emails frequently feature promotions and offers that must contain disclaimer or legal copy. Typically, these are tacked onto the end of a section–not an ideal solution as this adds visual clutter to the layout and increases the length of the email. After discussing potential solutions with our web production team, we came to a solution called “progressive disclosure”–a click on “Terms & Conditions” reveals a drop-down which contains legalese and unsubscribe verbiage. As with the header, we wanted to significantly simplify in order to keep the recipient’s attention where we want it: on the central content of the email.

3. Conclusion

Whether the result of a brand update, or simply the need to refresh & improve, template redesigns are inevitable. Although email presents a unique set of technical challenges, with some design & coding creativity, it is certainly possible to design templates that are true to the brand, adhere to email best practices, and look great.

Author Bio

Afton McCann

Afton brings over 6 years of design experience helping major brands promote themselves in the digital world. At Yes Lifecycle Marketing, she leads the creative vision of the Marriott Rewards email program and is passionate about designs that drives results. An Iowa native and graduate of The School of the Art Institute of Chicago, Afton resides outside of Boulder, CO where she lives a very active life full of mountain exploration, sports, and drumming.