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