CFIA iPhone mockups

Canadian Food Inspection Agency

Case Study

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.

CFIA current homepage

Proto Persona

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.

proto persona image

User Flow

Main Task

To apply and bring home a dog from a foreign country into Canada through the CFIA website.

Research Questions

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.

user flow diagram

Affinity Map

Gathering the data we recorded over 5 user tests, we created our affinity map by sorting all the pertinent items into 4 categories.

Affinity diagram

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.

Feature prioritization map

Heuristic Evaluation

We conducted red-lining and annotation on the current homepage to understand the current usability issues and the UI patterns currently in place.

Heuristic Evaluations

Card Sorting

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 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.


Global Navigation
My CFIA Login
Search bar

Main Navigation
Consumer Advice
Business Guidance
About Us
Recalls (stand out in separate red colour?)

Footer Navigation
Social Media Icons
Mobile apps
Corporate information
Contact Us
Terms and Conditions

Secondary Navigation


Travelling with pets/food/plants
Personal Importing/Exporting
Food safety (for consumers)

Inspection and enforcement
Food safety (for industry)
Permits & Licences
Plant/Animal Health
Business Importing & Exporting

Science Research
Who is CFIA?
Inspect & Protect

Food recalls
All recalls
Sign up for recall alerts

Site Map

From our card sorting results we built the new sitemap.

sitemap diagram


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.

moodboard image

Main Navigation

Using our sitemap and moodboard, we started redesigning the website with a focus on the desktop main navigation.

CFIA Home Page image

User Testing

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.

Suggested Improvements

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. 

Home Page Iterations

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.


Desktop Pages

Desktop pages

Mobile Pages

Mobile Pages

A/B Testing

Taking our mid-fidelity prototype, we conducted A/B testing on specific elements in our design to see which users preferred.

A-B Testing results

Style Guide

From our user testing we finalized our style guide and applied it to our high-fidelity protoypes.

Style Guide

Final Thoughts

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.