Campus Food Bank website Redesign
Role: UX/UI Designer
Duration: 8 weeks
Tool: Figma
Sectors: Non-profit, Health, Education
Introduction:
For this project, I was assigned to redesign the resources section of the Campus Food Bank website. The Campus Food Bank has long desired to redesign this section but lacked the time and people to do it, so I saw this as a perfect opportunity to apply my UX/UI knowledge.
What Exactly Is The Campus Food Bank?
The Campus Food Bank is an independent charity that supports University of Alberta members, advocating for and ensuring that everyone in the U of A community has access to food and food education.
The photo below is the original resource section from the Campus Food Bank website.
Problem Discovery
Numerous clients in the Campus Food Bank found that the current resource page cannot provide them with effective assistance.
Problem Statement
How might I enhance the intuitiveness and usability of the resources section?
Research & Explanation
What UX research methods will I use to find the solutions and why?
UX Research method 1: Usability test
To identify the pain points in the current resource section, I conducted a usability test with six participants. To start, I asked for their impressions of the website. Then, I had them complete four tasks to evaluate different aspects of the site. Throughout the process, I explored how their emotions changed and gathered their suggestions.
Task 1: Find information about best before vs. expiry.
Only 34% of participants completed this task, with the majority stating they did not know where to find this information. In fact, users need to click multiple times to find this.
Insights
Clarity drives engagement: Clearly explaining the purpose and destination of a link or button increases user engagement. Users are more likely to click when they understand where the link leads and what they can expect to find there.
Visual design matters: The appearance of a button as a recognizable element encourages interaction. A button that looks like a button stands out and invites users to click.
Task 2: Find transportation information.
On average, everyone completed the task in 48 seconds. However, the majority of users reported poor readability of the page and difficulty in finding relevant information.
Insights
Enhancing page readability: Improving the page's readability to make information easier to comprehend and navigate.
Clear categorization of resources: Categorizing resources will streamline access and usage, ensuring that users can efficiently locate and utilize relevant information.
Task 3: Find some information about hometown food.
On average, participants completed the task in 49 seconds. Interestingly, one participant took 123 seconds, as her attention was drawn to T&T, her favourite grocery store.
On average, participants completed the task in 49 seconds. Interestingly, one participant took 123 seconds, as her attention was drawn to T&T, her favourite grocery store.
This also validates Steve Krug's point in the book don't make me think: “We tend to focus on words and phrases that seem to match (a) the task at hand or (b) current or ongoing personal interests”.
Insight
User-centric design: Users will not navigate the website as the designer intended for they tend to be driven by the words match personal interests.
Task 4: Find the Edmonton Food Bank website.
Everyone completed the task, and the average time to complete the task was 22 seconds. Most of them mentioned the different colors and fonts of Edmonton Food Bank make them find it easily.
Insight
Enhancing text visibility: Utilize diverse colors and fonts to make significant parts stand out.
Here are the full results of the usability test
Summarizing Research/Takeaways
What problems did I find with the resources section on the current CFB website?
Poor Readability
Low Attractiveness
Complex retrieval
"I don't know where to start reading."
"There are lots of words, but I don't want to read it."
"There is no hierarchy."
"It's a bit of a mess. "
"Lots of text and links without any pictures"
"Lots of information, I read it and I forget it."
"I cannot find it if I do not read it carefully"
UX Research method 2: user journey map
To better understand users’ experience when they use the website, I created a user journey map.
UX Research method 3: Competitive Audit
For inspiration, I analyzed various food bank websites and found common elements: simple text, clear zoning, and appropriate images.
Problem/Opportunity Spaces
Problem space #1：Poor readability
Streamline content and establish a clear information hierarchy to enhance comprehension and prevent information overload.
Problem space #2：Low attractiveness
Incorporate relevant and appealing pictures to capture users' attention and revise for a more user-friendly layout.
Problem space #3：Complicated retrieval
Create clear indexes and provide concise link descriptions.
Before
Design Revisions
After: Resources page
Change the layout of the left and right columns, and separate cooking, shopping, and other resources.
Add more relevant images.
After: Shopping
Provide clear descriptions for each link.
Highlight important text in different colors.
Add an image as a preview of the link's content.
Other pages
Thank you :)
Wesource
An app for free and low-cost resources
Check other projects
Coach Potato
From couch to coach
Split Circle
Go-to app for effortlessly managing shared expenses