Canadian Food Inspection Agency
The CFIA has non-existent main page navigation that makes it harder for users to understand where to go on the website to get the information they need.
Adding navigation to all levels of the hierarchy to allow users to find what they are looking for in a quick and easy manner.
MY ROLE: UI designer
TEAM: Julie Dinwoodie, Stefani Adams, Monique Mendoza, Olena Voroniuk
TOOLS: Figma, QuickTime, Photoshop
The Canada Food Inspection Agency allows consumers and business to find information on recalls, importing & exporting food, plants or animals and food safety. In our assessment of the website, users found it confusing to find the information they were looking for and they got frustrated easily and sometimes gave up entirely. With no visible navigation and links scattered around the page with no sense of direction we decided to create a more easy-to-navigate homepage and extend the new design to mobile.
Meredith and her husband recently went away on vacation to the Caribbean. While there, they fell in love with a stray dog that hung around their vacation rental. Rather than leave it behind, they desperately are looking into what is required to bring her home with them and give her a better life.
To apply and bring home a dog from a foreign country into Canada through the CFIA website.
What if any pain points or roadblocks, did you find when trying to complete your task? Please elaborate.
What does the user like about the website?
Is there anything in the process that you didn’t understand?
Is there anything that you would change to make your task simpler?
Comment on the look and feel of the website.
Gathering the data we recorded over 5 user tests, we created our affinity map by sorting all the pertinent items into 4 categories.
Feature Prioritization Map
Selecting the most important elements from each category, we sorted those into a feature prioritization map to narrow down our focus for the project.
We conducted red-lining and annotation on the current homepage to understand the current usability issues and the UI patterns currently in place.
Since the CFIA website has no specific navigation of its own, with only a misleading dropdown with links taking users to other parts of the Canada.ca website, there was nothing to evaluate. However, we came up with some navigation options for the redesign and used card sorting to design the new navigation – global, main, secondary, and footer.
My CFIA Login
Recalls (stand out in separate red colour?)
Social Media Icons
Terms and Conditions
Travelling with pets/food/plants
Food safety (for consumers)
Inspection and enforcement
Food safety (for industry)
Permits & Licences
Business Importing & Exporting
Who is CFIA?
Inspect & Protect
Sign up for recall alerts
From our card sorting results we built the new sitemap.
We used inspiring images to create a new colour theme that compliments an agricultural website. We tested our colours to ensure that they meet WCAG 2.1 standards and were colour blind safe.
Using our sitemap and moodboard, we started redesigning the website with a focus on the desktop main navigation.
Using the newly designed pages, we asked users to complete the same task to see if they could use the new navigation easily.
User was able to find exactly what he was looking for right away.
Much easier to navigate than previous site.
User found the navigation to be clear and was able easily find the page and complete the task.
Very pleasing to the eyes that is simplified with less words, appropriate colours and spacings.
The cards are a nice touch with important subjects (ie. Covid-19, recalls and about CFIA)
Love the simple design
Easy to use
Doesn’t require too much thinking to find information
In comparison to the previous CFIA website, this time users did not have to read through every link to find the information they needed New website is more user friendly, yet still stays professional and informative.
Mission statement more prominent
More colour balance – add more colour to the top of the page to balance the footer.
Iterations from Testing
From our user tests we set to work on making some of the suggested changes to the website.
After iterating we extended our design to the other pages inside the Consumer Advice dropdown before moving to create a mobile version of the webpages.
Taking our mid-fidelity prototype, we conducted A/B testing on specific elements in our design to see which users preferred.
From our user testing we finalized our style guide and applied it to our high-fidelity protoypes.
The redesign the CFIA website was a project that allowed us to explore the exciting possibilities that a UX/UI designer would experience. Throughout this process, we learned our first valuable lesson: Keep It Simple!
The original site was missing key elements, like main navigation, that was essential for users. We broke down the links on the main page to use for card sorting and were able to develop a navigation bar to help those visiting the site find the key categories that they would need within the CFIA site.
We made each page consistent with a scrolling New & Updates section as well as Features cards for the most requested links for that section of the site, providing more information on the cards for the user.
Through our iterations we found that by not adding too many graphic elements to an already busy site kept to our original goal of keeping it simple.