Canada Post Intro.png

Canada Post Redesign

Timeline

Role

May - June 2022 (5 weeks)

Student group project for 2U UX design bootcamp.

Tools

Figma, Trello, InVision

Process Overview

 01 

Research

  • Backstory

  • The Problem

  • The Solution

  • Research

 02 

Ideate

  • Sketches

  • Design Exploration

 03 

Design

  • Hi-fi Prototype

  • iOS Mockups

  • Style Guide

 

Backstory

There is an inherent need for UX/UI protocols for government websites for individuals with particular needs. The need for these websites to be efficient, well-designed, and functional is imperative. Our focus is on Canada Post and redesigning this website for individuals within Canada who own small-to-large businesses as shipping needs are getting higher and higher across the globe due to the rising popularity of online shoppers.

The Problem

Our aim was to redesign the Canada Post website with business individuals in mind and make the website interface as efficient as possible for these busy entrepreneurs. After conducting a heuristics analysis, we focused on the delivery tracking and shipping rates sections of the Canada Post website.

Problem Quote Canada Post.png

The Solution

A simplified information architecture

To avoid extreme page depth, we decided to consolidate all the information into a single form that users complete based on their needs. From there, the form will generate a personalized delivery submission for users to benefit.

Canada Post Mock 1.png

Research

User Testing

In order for us to begin our redesign, we had to figure out our starting point to know which direction to go. We started by conducting user tests on the website to uncover the current pain points. Our results showed that most people got stuck after navigating 4 pages deep and the main path to sending deliveries is not intuitive. (If you did not have previous experience navigating the website.)

Canada Post Research.png

Heuristic Analysis

To further analyze the Canada Post website, we conducted a heuristic analysis to test the current usability of the user interface. Using Nielsen and Molich’s 10 User Interface Design Heuristic rules, we found that it passed certain criteria, but failed others.

Site Map

Another way we analyzed the current website was to conduct a site map of how the information was currently laid out. We found that the user path from the homepage to delivery was way too long. From online research, a website should avoid extreme page depth because it risks confusing its audience. Canada Post’s delivery process takes its user 9 clicks from the homepage to reach the personal delivery page. That’s way too many!

Canada Post Sitemap.png

Persona

To help us further visualize the pain point of our users, we used the data gathered from our user tests to put together a persona. Humanizing these issues makes it easier for us to come up with ideas.

Persona Canada Post.png
 

Ideations

Canada Post Wireframes_edited.jpg

Sketches

The first step in ideation was to sketch out our ideas on paper, helping us visualize our form on mobile and desktop.

Design Exploration

Reducing the extreme page depth

  • To reduce the number of pages (Canada Post homepage ➡️ Snap Ship), we decided to implement a Quick Tools function to get the desired results fast. 
     

  • Users will check off the criteria that they meet, and as a result, a personal delivery application will be generated for them to use. 
     

  • This will avoid the many layers of pagination, making the developer’s and the user’s life much easier. 

 

Hi-fi Prototype

We built our high-fidelity prototype using Figma. We choose to stick with the same UI style guide as the original Canada Post website because it gives a sense of familiarity to its users. As for fonts, we stuck with Roboto & Montserrat.

We decided to focus mainly on the user flow for this project because, from our user interviews, navigation was the biggest issue. (It would have been impossible to redesign the whole Canada Post website within the span of 5 weeks!)

Final Designs

iOS Mockups

Canada Post Mockups.png

Link to slide deck

Style Guide

Canada Post Style Guide.png

Reflection

Accessibility above all

We should focus on accessibility, rather than making a website “look” pretty. There’s no point in making a pretty website if nobody knows how to use it.

Keep it simple

The simplest designs have the most impact. 

Lots of user tests!

A designer’s opinion doesn’t matter as much as what the results from user testing dictates. Sometimes, we have to put our opinions aside and go with what the data tells us.