top of page

Food Banks Canada Website Redesign
Redesigning the information architecture of Food Banks Canada's website.

Project Context
“Canada Food Banks” is a charitable organization in Canada with the goal of ending food insecurity for Canadians and others living in Canada.
In this project, we aim to help "Food Banks Canada," a charitable organization in Canada, revamp its website's information architecture to enhance its usability, introduce fresh ideas that focus on eradicating food insecurity among Canadians, connecting them with local food banks, providing direct support to these food banks, and raising awareness about their vital mission.
*This project was completed as part of the Information Architecture course (INF2170) at the University of Toronto.
My Contributions
Compile project context
Facilitate card-sorting sessions
Draft IA diagram & interface sketches
Team Members
Annie Chen
Ashfaaq Mohammed
Nadia Smith
Timeline
September - November 2023
Problem
Having had some feedback from users that they find it somewhat difficult to navigate and find information. In addition, some new ideas and a new focus are considered to incorporate into the website.


Current Website Design
Stakeholders & Needs
Canada Food Banks:
The organization seeks to provide quick and efficient guidance for individuals to donate or volunteer while also reducing stigma by educating website visitors about the role of food banks.
Local Food Banks:
With the website's assistance, they wish to access more information and opportunities to receive funding and promotional support.
Corporate and Individual Donors:
Both corporate and individual donors are looking for donation and volunteer information and opportunities. They also seek information on the most needed donation items and locations.
Community Members:
Local community members are primarily interested in learning about target recipients and contributions made by food banks in Canada. They are also keen on understanding grassroots initiatives addressing food insecurity in Canada and exploring volunteering opportunities and ways they can contribute.
Grassroots Organizations:
Grassroots groups are eager to receive support from Canada Food Banks and their donors in the form of promotion and funding. They also need a channel to understand how the organization can support their initiatives, develop toolkits, and showcase successful projects.
Context Inventory
After finalizing the stakeholders and their needs, we initially identified 274 pages. Our team collaborated together to refine the content by removing clearly outdated or pages resulted in an error message, duplicate pages, stacks, and irrelevant content. This process helped us focus on 50 essential pages.

Raw Data Inventory

Cleaned Data
Card-sorting Methodology
Format: Virtually over Zoom with shared screen
Participant: 8 non-User Experience Design students
Duration: Approximately 30 minutes per session
Platform: Optimal Workshop, which provided the necessary tools for conducting the card-sorting exercise.
During the execution, facilitators ensured an open sort, allowing participants to categorize the 50 cards provided(see below) at the first level based on their own comprehension of the content. They were encouraged to articulate their thought processes, explain the rationale behind their groupings, and offer any questions or feedback they had during the session.
Facilitators took comprehensive notes, recording how the participants categorized the cards, any challenges they encountered, and any comments they provided. Data, including the session notes, were compiled and posted onto a FigJam board for subsequent analysis.

Card-sorting Analysis
Based on the card-sorting sessions‘ results and the insights provided by the participants, several key observations were made:
Categorization Logic:
A participant noted the excessive amount of blog-like content, suggesting a split of the “Blog/Information” category due to its breadth. The importance of distinguishing between user groups—businesses and individuals—was emphasized for better navigation.
Category Naming:
Participants liked using question-based labels such as “Why get involved?” alongside common labels like “Blogs” or “About.” They also favored labels following the who, what, when, where, why, and how format.
Clarity of Content:
The lack of context in some content made categorization difficult. Unclear distinctions between individual and organizational involvement caused confusion in creating and grouping categories. Participants found it challenging to differentiate between similar labels.
Clarification of Mission and Vision:
The need for clear definitions of the organization's mission and vision was highlighted, suggesting these should be prominent and distinct in the “About Us” section to clarify Food Banks Canada's purpose.
Importance of Educational Content:
The value of accessible educational content was noted, with some categorizing such content under labels like "Why Get Involved?" or "Why it Matters?" to stress the importance of user engagement and contribution.
Integration of Donor and Volunteer Information:
The integration of donor and volunteer information was seen as vital for a seamless experience for those looking to support the mission. Some participants combined content relevant to both groups, noting their shared interests and goals.
Consideration for Program-Specific Information:
Content related to specific programs was placed under a dedicated “Programs” or “Our Programs” section to showcase the organization’s initiatives in tackling food insecurity in various communities.
Information Architecture Diagram
The Information Architecture (IA) diagram presented here outlines the comprehensive structural framework designed for the Food Banks Canada website, aiming to facilitate intuitive navigation and provide easy access to essential resources.

Feature List
The following feature list highlights key functionalities aimed at enhancing user engagement and accessibility on the Food Banks Canada website.

Ideation Sketches
After establishing the information architecture diagram, we started ideation sketches of what the website could look like when translated digitally. We made multiple versions, shown below are the chosen sketches of both desktop and mobile versions of the website.
Compared to the current version of Food Banks Canada, we focused more on enhancing the usability of the navigation as requested by users. This includes a mega menu under the main categories, a prominent feature button for user interaction, and a minimalist interface design that makes browsing and reading process much easier.
Desktop Design



Mobile Design
Digital Wireframe
We then translated the chosen sketch into a set of mid-fidelity digital wireframes.

1
2
3

4

5

6
7
Desktop Design
Annotations for Desktop Prototype
-
Primary menu.
-
Primary CTAs - “Donate now” and “Contact us”.
-
Floater button that allows users to find/locate a food bank in Canada.
-
Search bar allows users to search globally and users can update language to English/French.
-
Breadcrumb links allow for user to navigate back to previous pages, and for visibility into how deep into navigation they are.
-
Mega menu allows illustrations and images to allow users to easily grasp navigation here.
-
Footer shows various links, logo, and social media.

1
1
1
1
4
2
2
3
4
5
6
Mobile Design
Annotations for Mobile Prototype
-
Hamburger icon opens up a side menu to show primary, secondary, and tertiary navigation.
-
Primary CTA buttons for Donate Now and Find a Food Bank.
-
English/French language setting switcher allows user to switch website view to French, or back to English.
-
Search bar allows for user to search globally, with auto-fill and suggested categories.
-
Breadcrumb links allow for user to navigate back to previous pages, and for visibility into how deep into navigation they are.
-
Footer shows various links, logo, and social media.
bottom of page