Fusion Email Templates
Project Overview
Over the course of 1 month, I helped take 48 of the emails most commonly sent by our clients and standardized them into 5 modular templates. Today, they are being utilized by 320+ organizations across North America to convey important information to millions of recreation patrons.
My Role
As the Primary UI Developer on this project, I was responsible for strategizing our approach for the redesign, creating a scalable design system, and implementing the designs using HTML & CSS.
Getting Started
To understand the scope of the project, I first reviewed all the existing emails templates that our company had pre-built into the Fusion application. Visually, it was clear that they were in need of a refresh but as I went through the extensive list of emails, it also became clear that they were in need of a more consistent & efficient structure.
These emails were used by organizations who automatically send out a wide range of messages in accordance with various actions performed related to their facilities. In it's prior format, the end users were receiving emails like the one below, however there wasn't much visual or content consistency between each email. This is what my team and I aimed to fix in the redesign.
Sorting
Although each of the 48 emails were slightly different from each other, there were still some commonalities between all of them. Taking this into account, I categorized each email into one of five formats determined by their contents. This helped simplify the task, and created an underlying structure for all existing and future emails.
Design Choices
The following is a breakdown of the key design choices that we made, which were incorporated into the final email templates.
1. Modularity
To support easy mixing & matching, we used cards to contain each section of content. The use of cards also gave structure to emails that were content heavy.
2. Personalization
At the beginning of each template, we included tokens with the recipient's name & important account information. This helped personalize each message and also served as a point of reference for patrons when they needed to access their ID number.
3. Scan-ability
To help email recipients understand the contents more quickly, we utilized short headings at the beginning of each content card and replaced the old text-only hyperlinks with large CTA (Call to Action) buttons.
4. Familiarity
Throughout each template, we incorporated organization specific branding (logo & colours) so that recipients would be able to quickly identify the sender. This was also effective in proving that the contents of the email were legitimate.
Design Guidelines
To ensure visual consistency between all emails, I created a design guide for all templates. This was later used by the rest of the design team and developers to maintain uniformity for all emails created in the future.
Development
Once all of the designs had the go-ahead by our team of stakeholders, I coded the templates in html & css and handed them off to dev to finish implementation. Since then, these new email templates have been released to our 320+ organizations and are being used daily.
Credits
Of course, no project is successful without a team of talented collaborators, and I had the pleasure of working with some of the best!
Brandon Copeland
Manager, Senior UX Designer
MC Martinez
Product Owner
+ More