Just because something is easy-to-use and simple doesn’t mean it has to be boring. Users struggled to navigate a homepage that was just a wall of links, how can we make it easier for them to find what they need?
Tools Used: Figma, FigJam, Awesome Screenshot, Accessible Colors
Timeline: 5 Weeks
The Canadian Food Inspection Agency is responsible for food safety, which encompasses food inspection, business licensing, import and export regulations, public education on food safety, plant and animal health, pathogen research, and more.
Their official mandate: "The Canadian Food Inspection Agency is dedicated to safeguarding food, animals and plants, which enhances the health and well-being of Canada's people, environment and economy."
Our first step was analyzing the existing site's usability heuristics, for ease of navigation and finding needed information. Next we set a task, finding a list of most recent food recalls, and asked four people to complete this task on the mobile and desktop interfaces of the site.
1. There is a highly visible menu button in the upper right corner of the screen.
2. The search bar is also highly visible, it only returns results from the Canadian Food Inspection Agency site.
3. Content is organized into categories on the main page, however the headings aren't linked to an index of that content. It is also unclear what this heading means, there is a heading for "Latest News" further down the page.
1. Menu button opens when hovered, and triggers a drop-down menu for all of Canada.ca.
2. Pages in the menu are organized by category, rather than by government agency. It's unclear how the categories themselves are organized within the dropdown.
3. There is a list of most requested links within in each category.
The footer contains general links for all of Canada.ca, it can't be used to navigate the CFIA site specifically.
A lot of the feedback on the original website pertained to having difficulty finding specific pages. Government of Canada websites are intended to be repositories of information for people to use, so reorganizing the navigation system to make it more user-friendly should be the main focus of the redesign.
The original homepage had a section consisting of links to certain topics on the site. The short summary text gives more details to the user.
Users tended towards checking the navigation bar and footer first when looking for information, so because the header and footer were both for Canada.ca as a whole, users became frustrated that these links were hidden halfway down the page.
When navigating through these links, there was also a lot of overlap between the pages contained within each category, so there was a bottleneck created here as users couldn't decide which link was most relevant to their search. We decided to organize the information by user type rather than by multiple, overlapping topics.
There were fourteen topics before, and we reduced them to six based on the types of users needing to access information. The final categories decided on were: Imports and Exports, Plant and Animal Health, Administration (to be moved to the footer), Legislation, Business Information, and Consumer Education.
Next, we're going to apply our reorganization to a testable layout and get feedback on it. We will also develop a style guide to apply to the final layout.
We performed five user tests with this prototype of the homepage and menu. Here is a list of changes we made based on the feedback from these tests:
All Government of Canada websites must adhere to AA Accessibility standards, so we tested all of our font colours to ensure that they met the contrast threshold. We also wanted to use high-contrast accent colours to more easily differentiate interactions on the site. The graphic patterns chosen were clean and geometric to convey stability. The images chosen were overall cool-toned with a high depth-of-field in order to blend in with the site so they weren't "distracting" as mentioned in an earlier usability test of the original site.
After performing a round of mid-fidelity testing of both desktop and mobile prototypes with the style guide applied, we made several small layout refinements, finalized the design of our components and focused on creating interactions to guide the user on the site.
The navigation menu was the focal point of the redesign. Because the CFIA has a very large scope in the information it provides, we decided that it would be helpful to organize the menu by the type of visitor to the site to make the information easier to find. We also provided the option to put media in the drop-down menu, as the CFIA often runs information campaigns. When each item is hovered over, a brief description is shown, so the user knows if this is the page they need before clicking through.
On the original site, the features were buried at the bottom of the page. This confused users, as a "feature" item is usually important. The features also contained one of the items of interest for our users, which was food recalls. We moved the features up so they were right below the main menu, and made them easy to scroll through and select.
The footer contains a lot of information, and we wanted to make it clear to users what could be selected.
The mobile footer presented a special challenge. The menu and feature carousel were easy to make responsive, however the large footer was judged as "clunky" and "overwhelming" by our users, so we came up with a simple tab design to organize those links in a nested menu, similar to the nav menu.
