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.
THE SOLUTION:
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.
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.
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.
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.
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.
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.
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 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.
Results
Global Navigation
Canada.ca
My CFIA Login
Language
Search bar
Main Navigation
Consumer Advice
Business Guidance
About Us
News
Recalls (stand out in separate red colour?)
Footer Navigation
Social Media Icons
Mobile apps
Corporate information
Careers
Contact Us
Terms and Conditions
Privacy
Secondary Navigation
NEWS
CONSUMER ADVICE
Travelling with pets/food/plants
Personal Importing/Exporting
Food safety (for consumers)
BUSINESS GUIDANCE
Inspection and enforcement
Food safety (for industry)
Permits & Licences
Plant/Animal Health
Business Importing & Exporting
ABOUT US
Science Research
Who is CFIA?
Inspect & Protect
RECALLS
Food recalls
All recalls
Sign up for recall alerts
Site Map
From our card sorting results we built the new sitemap.
Moodboard
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.
Main Navigation
Using our sitemap and moodboard, we started redesigning the website with a focus on the desktop main navigation.
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.
Findings
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.
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
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.
Style Guide
From our user testing we finalized our style guide and applied it to our high-fidelity protoypes.
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.