This project was completed as part of a redesign challenge for Canada Post’s Ship-in-a-click tool. The existing tool hasn’t been updated since the late 1990s and no longer demonstrates the convenience, reliability, and speed that Canada Post’s brand is all about. The redesigned tool shortens the amount of time required for users to complete the process, and is responsive for both desktop and mobile screens.

Software Used: Sketch, InVision

Hero ImageHero Image

I started the redesign process by going through the existing tool through the typical flow of a user for both desktop and mobile, while taking screenshots of every step of the process. I highlighted any usability issues or areas of improvements that I came across in order to make sure my design solution will address those areas.

Desktop Annotations:

Desktop Existing Screens AuditDesktop Existing Screens Audit

Mobile Annotations:

Mobile Existing Screens AuditMobile Existing Screens Audit

User Interviews/Testing:

Once I went though and annotated the existing product myself, I interviewed three people that agreed to be user tested to get a little background information on them and learn how much experience they have with filling out online shipping and payment information. After a brief Interview, I user tested them on the current Ship-in-a-click tool to check if other people are having the same problems, or and if there are any issues I might have missed. Through this exercise, I realized other people were experiencing the same problems I encountered with the current tool.

User Testing-InterviewsUser Testing-Interviews
User Testing-TasksV2User Testing-TasksV2

User Personas:

User Persona Aaron ReidUser Persona Aaron Reid
User Persona-Becca CrossUser Persona-Becca Cross


I drew out a User Task Flow for the service so I would know exactly which screens are required and which screens link together. The redesinged task flow is similar to the existing flow, with the exception of the Review Order step. Based on previous research, I decided it was important to let the users review and edit their order before submitting their payment.

New Task Flow V2New Task Flow V2



After all the research has been complete, I started sketching and creating low fidelity wireframes to test out various designs before moving on to high fidelity wireframes. I designed for mobile first as mobile has more restrictions regarding screen space and the lack of a hover state. Once the mobile designs were complete, I adapted those designs to the desktop size.

Mobile Low Fidelity Wireframes:

Mobile WireframesMobile Wireframes

Desktop Low Fidelity Wireframes:

Desktop WireframesDesktop Wireframes



The final step was to turn the low fidelity wireframes to high fidelity by incorporating Canada Post's visual identity (colours and font style).

Mobile High Fidelity Wireframes:

Mobile HIFIMobile HIFI

Desktop High Fidelity Wireframes:

Desktop HIFIDesktop HIFI