best practice email design

As a personal project, I created a multi-page Email Best Practice document to share with colleagues, to share and teach practical best practice guidelines for both desktop and mobile.

Roles : Creative Director : UX and UI Designer : Art Director : Illustrator

logitech email templates

To streamline the creative process, email templates were implemented starting with wireframes. Based on key messaging and content needs, the desired template would be used to retain consistency with the newly rebranded look. Instructions clearly identified the do's and don'ts of each template.

Logitech Email Templates in use

Shown below are a variety of email communications using the new template structures.

p.f. chang's email templates

P.F. Chang's email system originally consisted of messages in jpg format. To achieve better responses and click-through rates, a modular template system was built for the client. By using a modular system, the client would be able to built up a library of content which they could easily pop in and out of the designated email, based on the specific messaging needs. A storytelling presentation clearly pointed out the new functionality and the benefit the new emails had over the original jpg emails.

Old vs. New
The original format being used was a jpg image, which is unclickable and creates a user experience dead end. The new email template has clickable navigation as well as cross-selling link opportunities. Social media links also provide further interactions through social channels. Best Practices being implemented within the new structure include; links to navigation, main CTA and secondary content drive email clients to engage, utilizes the top 250px, the most viewable area, and the balance of images with HTML text, helping avoid spam filters.

Lights Out
As the most compelling moment of the presentation, images were turned off on their email vs. the new template. It clearly shows that the main content remains viewable with images off, allowing the key messaging and content to still be readable. This results in much better click-through rates.

Note: Over 50% of email clients do not display images in initial view.

Promotional and Non-Promotional
As an example of how the modular templates would be designed, a promotional and non-promotional example was designed and presented. This also allowed to explain more talking points about the Best Practices used within the templates, for example, that the templates accommodate for responsive design, displaying a more user-friendly variation for mobile devices.

Note: 43%-plus of email is now opened on a mobile device.