Canada Border Services
The Problem Statement
The Canada Border Service website is overloaded with information with no smooth navigation. There are links in links, one page leads to several pages. User is lost and can not reach to the specific information they are looking for. Users can easily get frustrated and leave the site.
Solution
The site needs to be re-designed. With the latest UI design, proper navigation and re-organized information will enhance the usability while maintaining the current information requirement of their website.
Current Website
The Canada Border Service website is overloaded with information with no smooth navigation. There are links in links, one page leads to several pages. User is lost and can not reach to the specific information they are looking for. Users can easily get frustrated and leave the site.
Canadian Border Services NEXUS Page
This is how the current Nexus Page looks like. Users have had difficulty reach the Nexus
User Testing
Different testing methods were used to get to the root cause of the problem. Severals were conducts and collected important feedback directly from users.
Proto-Persona
For this project, I developed a personas of William, showing the goals and pain points. William is 36 years old male, a frequent traveller and an IT Consultant. The main issue he is facing is that to apply for the Nexus card through the website he had to go through several menus and pages. He found it too confusing and time consuming.
Affinity Map
An affinity map is created from the findings during the usability testing. The map helps sort, prioritize, and rank user feedback. From those results we are able to see patterns and from those we are able to come up with refinements to implement in the design
Web Analysis
5 User Interviews, 2 were over face to face and 3 over the phone. Some of the common issues they reported were:
Fonts were too small
Too much information
Repetition of information
Links leads to more links
Can not find Apply Now link on Nexus Page
Step to apply are not organized properly
For payment website is transferred to US Site
Have to pay in US Dollars
Contact us information not easily accessible
User Testing Results
Priority Revisions
From the affinity map exercise we determine which revisions we want to make to the prototype. We begin by prioritizing which ones have the lowest amount of effort but the highest rate of return. The changes in this case were relatively minor and so nearly all of the changes that users suggested were implemented.
Redline Annotation
Document handed off to developers to ensure that designs are made according to specifications. “Redline” refers to the literal guides, which are often red lines, within a document that communicate exact spacing, margin, etc
Heuristic Evaluation
Heuristic evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. It reveals insights that can help design teams enhance product usability from early in development
Card Sorting
For this project, I developed a personas of William, showing the goals and pain points. William is 36 years old male, a frequent traveller and an IT Consultant. The main issue he is facing is that to apply for the Nexus card through the website he had to go through several menus and pages. He found it too confusing and time consuming.
Sitemap
Next, I create a sitemap based on the results of our card sorting activity. Using categories that came out of the card sorting data, a sitemap shows the relationship between content on the site, starting with the homepage at the top, and then branching out into subsequent pages from there.
UI Style Guide
Defining all the basic elements in advance helped to design fast and consistent throughout the project. Style changes later on were easy to orchestrate
After reviewing the sketches with the client and a couple of iterations, it’s time to start refining in the form of a low fidelity wireframe.ged down in minute details.
Website Wireframes
Here, I further identified the layout of the interface. Utilizing wireframes in the beginning phases of design, is an efficient way to communicate placement of elements without getting too bogged down in minute details. A huge benefit and timesaver is that the layout can easily be changed.
Tablet Wireframe
A huge benefit and timesaver is that the layout can easily be changed.
Mobile Wireframe
Wireframes
High Fidelity Prototype
The high fidelity prototype is created in preparation for usability testing. In this step, we define what we want to test and why. In this case, it will be our main task flow of booking a service using the online booking feature. We develop a test plan and develop the flow inside of our prototype using a tool called Figma.
Priority Revisions
From the affinity map exercise we determine which revisions we want to make to the prototype. We begin by prioritizing which ones have the lowest amount of effort but the highest rate of return. The changes in this case were relatively minor and so nearly all of the changes that users suggested were implemented.
Next Steps
All of the necessary pages will be mocked-up and subsequently implemented before the end of 2021. We will come up with some KPIs so that we can monitor site usage during the year and see if whether or not we were successful in our endeavour to make this into a viable marketing tool.