Canada Post email notifications redesign

Checking_Email_mobile.jpg

Overview

In 2017, Canada Post sent email through four different email notification engines. The plan for 2018 was to transfer all emails to a new, single, platform, which presented an opportunity to examine and redesign the email experience for our users.

Canada Post has three different categories of email:

  1. Email notifications triggered by events in the journey of a parcel from a sender to a receiver

  2. Transactional email related to account, online tools and apps

  3. Email notifications related to consumer products, marketing campaigns and events

The team

Although this wasn’t an Agile project, we conducted ourselves in a similarly democratic manner. Two of our team members were in Ottawa, and we held regular check-ins with phone/video conferencing. We each had very different roles for the project, and we had to communicate and share information often to achieve our overall goals as a team. 

David - Technical product manager
Blair - Technical product manager
Rob - Project manager
Emily (me) - UX lead, UI designer/creative director
Laurie - Content writer
Filipe - Front end developer

The design challenge

Re-shape the email landscape for Canada Post. 

My goal was to design a template system that would support the communication needs of ALL of Canada Post’s email, consistent with the expression of the new brand.

Transactional emails were my primary focus, but I also had to know that the system and structure would satisfy the communication needs of the marketing emails in the future. 

The process

Phase 1 

  • Design audit

  • Research

  • Design exploration and concept development for all three categories of email

  • Stakeholder review

Phase 2

  • Design 18 email templates for shipping event notifications

  • Workshop with Parcels stakeholders

  • Iterate content and design

  • Review with Parcel stakeholders

  • Work with front end developer to build two different email templates in HTML, transfer them into the new vendor’s email engine, test to make sure they function correctly as designed.

  • Iterate the code, QA to fix bugs and develop the entire group of shipping event emails

Phase 1

The first task I undertook was to do an audit of all the emails I could track down, and note observations about content and visual design.

 
 

Observations

There was a lack of consistency between the different email categories with respect to the templates and expression of the brand. 

Even within the same categories, there was inconsistency with respect to information hierarchy and layout. There were different headers, logo sizes, random button colours and sizes, non-mobile friendly layouts and inconsistent typographic scale. The audit also revealed that image styles for marketing emails were very inconsistent: photography and illustration had diverged off brand. 

Some templates (for example the shipping emails) hadn’t been touched for over ten years and were visually outdated, while the tone of the content was robotic and heavy on “systems and operations” language and terms.

Research

The next step was to research best practices for email from a UX perspective (which is different from a marketing perspective).

Topics I studied

  • Key principles/trends

  • Understanding quirks of different email clients

  • Designing responsive/mobile friendly email

  • Creating effective hierarchy for content and visual design

  • Header/footer design

  • Optimizing the inbox view

  • Anti-spam tactics

  • Specifics about designing transactional email

  • Email that delights and inspires users in simple ways

I put my audit and my research findings into a case study that would later support the design rationale when it was time to get feedback from different stakeholders. 

Forming a design approach

At the time, I was also working on re-designing the UX/UI design system for Canada Post following Brad Frost’s Atomic Design methodology. Similar to apps and websites, email can be broken down into atoms and molecules.

Excerpt from email case study

Now that I had this structure, I was ready to begin designing concepts for the different kinds of templates using the same components.

Header

Another big project at Canada Post over 2017 was the website redesign. I took cues from the navigation header on the new website and used similar visual styling for the email header: white background, red line at the top, and the same proportion for the logo.

Header image

For transactional emails related to digital tools, products and apps, the header images would match their respective product pages on the website for continuity and recognition.

I explored stock imagery for the headers for the shipping events, but it was not up to par with the quality of the brand photography, so ultimately, I decided to use the clean and modern Canada Post brand chevron pattern. 

For marketing emails, header images would relate to specific campaigns or events discussed in the emails.

Typography

I had designed the new typographic scale for the design system, which I carried over to use to support the content hierarchy in email. Similar to the website, I recommended embedding our digital brand font (Roboto) into the emails, and after some inquiry with the email platform support people and running some tests with the developer, we found a way to make that possible.

Buttons and links

I used the same button and link styles from the design system.

Footer

I matched the footer styling to the website for all templates, although the legal content for the footers changes between the different categories.

Content

The most important principle for transactional email content is to set up an effective hierarchy of information, communicate clearly and let users know what action they should take if needed. Canada Post speaks directly to the user with a warm conversational tone for instruction. The typographic system ensures that content is easy to scan.

Excerpt from email case study

Excerpt from email case study

Excerpt from email case study

Excerpt from email case study

 

Phase 1 feedback

Once I had designed several concept templates for each email category, it was time to check in with the different stakeholder groups to ensure that the design system met their needs.

I circulated the email audit and case study with the designs to the stakeholders so that they would understand the foundation and rationale for the designs. Then, I ran four separate review sessions with the Marketing, Parcels, Product and FlexDelivery stakeholder groups to get their feedback.

While there were several questions and a few requests for minor adjustments, the review process went positively. Providing the audit and the case study with the outline of the design process helped to set expectations and support the designs.

Parcel delivery notification - desktop view

 

Parcel delivery notification - mobile view

 

Welcome email for FlexDelivery service

 

Product email for Snap Ship inviting small business customers to use the tool

 

Transactional email - SnapShip order receipt

 

Marketing newsletter

 

Phase 2
Content design/development of parcel shipping emails 

Once I had confirmation from stakeholders that the design approach worked for the entire range of emails, I moved on to focus on producing the group of transactional emails that notify the shipper and the receiver of various events in the journey of a parcel. 

Scope and goals

There are 18 different templates in this group. Each template has variable information triggered by different scan codes connected to “events” (operational stages) for parcels in the shipping process. The goal was to re-design and re-write the content for each template, to match current digital design and content standards. 

What we did

My writer Laurie and I reviewed a massive operational document with tables of technical code data, and pulled out the information that goes into each of the 18 templates. Laurie rewrote the content to sync with the language used by the content team: simple, clear, friendly, active. I designed the email layouts, trying to arrive at the optimal visual hierarchy that connected the needs of users receiving information, with the details of the shipping operation process.

Because of the complexity of parcel operations and their need to be precise with the content, I facilitated a one day workshop session with the Parcels team to go through the first draft of the the designs to make sure it met their communication needs. 

Themes and challenges

  • Canada Post’s parcel operations has a MILLION details, many of which are very relevant to the operations team, but not important to the everyday user

  • These emails have two user groups: the people receiving them are both the shipper and the receiver — so the content had to make sense for both groups at once, which for some of the templates presented a tricky language design problem.

  • We had to work hard to strike a balance between being precise and general while avoiding operations language that doesn’t make sense for regular humans. The result was that the content evolved to be stylistically quite minimalist.

Outcome

If you have a Canada Post account, sign up for marketing emails or receive parcels through the mail, you’ll see that the rollout has occurred: you’ll receive modern, mobile responsive emails, consistent with the new Canada Post digital design system, with easy to scan information and a clear course of action.

FlexDelivery ready for pickup notification