top of page
.png)
Canada Border Services Agency CBSA Redesign
Collaborators: UX/UI:Donovan Tapunha, UX/UI: Diego Stevens
Project Length: 3 Weeks
Year: 2020
Tools: Figma, Zoom, Google Workspace, Miro
Overview
What is Canada Border Services Agency
The Canada Border Services Agency (CBSA) facilitates the flow of legitimate travellers and trade. The agency also enforces more than 100 acts and regulations that keep our country and Canadians safe.
Problem
User were going on to the Canada Border Services Agency website and were feeling lost and confused with the layout of information.
Solution
In this project, we focused on providing users with a simple and easy way to browse for information they need by optimizing the:
​
-
hierarchy,
-
navigation
-
usability and
-
design + layout
Research
As a collective, my partner and I needed to learn what users were going to the site for and what they would be doing there through a heuristic evaluation, page annotation, and LATCH analysis of select pages of the site. From this data, we were able to then deem some essential tasks and use those to further elaborate on our research for this project.
Having our essential task in order, we came together to create the guide of how we were going to collect more qualitative information about our users. We conducted 5 guerrilla testing interviews in which we asked users to try to attempt the 5 essential tasks.
First Essential Task
Last Essential Task
From the results of the interview, we were able to synthesize the data, rank them on level of priority, and select the most important data points into our prioritization matrix to provide more prominent data to refer to while moving along the redesign process.
There was lots of positive and negative feedback. The main issues were the websites design, layout, and lack of universal search of the site.
Information Architecture
It was important to establish strong information architecture because it would heavily aid in users' navigation of the site. To accomplish this, I conducted 2 separate card sorting sessions each session with 3 participants.
I choose the open card method to allow them to have more flexibility for the user and for them to not feel boxed in by the primary pages on the website. I reviewed both groups' card sorting results and chose to iterate based on the second group's flow, it provided a cleaner flow.
UI Design
As I moved out of the research phase and into the UI design phase. I needed to get a base of images and styles to craft my style for the redesign. I chooses some images and inspiration that expressed government, strength, and modern.
.png)
.png)
I initially focused on the navigation of the site because the layout was a key feature discovered in the research. I completed the low fidelity desktop wireframe. Using the wireframe, I conducted my 5-second usability test with a total of 16 participants to gain insight on what users first impressions were so I could continue to iterate on the layout and website design. Subsequently, I crafted the low fidelity of my mobile counterpart of the site.
Afterward, with the wireframe testing completed, I moved on to creating the style guide for the site, expanding on the moodboard to provide a more in depth guide to how the site's style would be.
Through my personal iteration and review and mobile user testing, iterations were made to the style guide while creating the responsive high fidelity prototype of mobile and desktop wireframes and prototypes.
Style Guide
Initial Style Guide
Final Style Guide
.png)
Final Design
.png)
1. Homepage
2. Menu
_edited.jpg)
.png)
3. Homepage
With dropdown menu
4. Homepage
Categories Section
.png)
_edited.jpg)
5. Subcategory Page
Bring Goods Across The Border
.png)
.png)
Mobile Homepage
.png)
.png)
Mobile Menu
_edited.jpg)
Search Page
Conclusion & Takeaways
Overall, I have learned that the redesign process is as complex as the process of creating a new desktop and mobile website. It requires multiple rounds and forms of testing to get the right design. Each part of a website no matter how small has a lot of research and work gone into it. This has provided me with a higher respect for those that do this because it is a lot of tedious work to get the website looking just right.
Due to time constraints and class project scope, I was not able to complete all that I would want to so my next steps would be to:​
​
-
Make the subcategories cards clickable and all sections scrollable
-
To create the other subcategories pages on my homepage
-
Complete the search page for the desktop page
-
Conduct another round of high-fidelity testing once complete
bottom of page