Fusion logo

Simplifying Emails

My Role
UX Designer
Timeline
~1 Month
Team
Myself, Product Owner, Developer, UX Manager, UX Designer, Multiple Stakeholders

Overview

I helped take 48 of the emails most commonly sent by university recreation departments and standardized them into 5 modular templates. Today, they are being utilized by 320+ organizations to convey important information to millions of students across North America.

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 revamp.

Old email templates in the Fusion application.

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.

A spreadsheet of email template content.

Design Choices

The following is a breakdown of the key design choices that we made, which were incorporated into the final email templates.

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.

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.

Scannability
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.

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.

Style guide for email templates.

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.

Before and after of a court reservation email template.

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!

Manager, Senior UX Designer
UX Designer
Product Owner
+ more

Read Next

Reimagining Support >>

Want to chat design, music, or about this crazy cool world we get to live on?
Send me a message at tameikame@gmail.com
© Tameika Elliott 2022
Made while listening to lots of music ♥