THE UI DESIGN PROCESS
ORIGINAL WEBSITE OF NORTH YORK HARVEST FOOD BANK
The original website of North York Harvest Food Bank looks a bit off with odd colour and icon choices. One cannot make out if it is a food bank website because of the overall look of it.
Having said that, any food bank has the responsibility of feeding the needy and hungry and they often do not have enough money and resources to spend on something like a website or mobile app. Thus, this website was chosen to redesign and help them improve the outlook of their website.
Food Bank Statistics in Canada
Before starting the research on food banks, there was a need to understand the consumers and the general donation scenario in Canada. Upon reading some latest reports, it came to light that pandemic has increased the visits to the food bank and has lowered the amount of donations. Given the current food inflation scenario, this is a cause of concern for all food banks.
PROBLEM STATEMENT
North York Harvest Food bank was founded with the mission to feed the needy and hungry by partnering with few organizations and monetary donations from the public. We have observed that our NGO isn't receiving as much donations and supplies as we had expected, due to suspicion, doubt and lack of information.
This gap in the rising demand and low supply of food and other necessary items is causing people to drift away from us, both in terms of giving donations and receiving help.
How might we improve our website to include information that attracts more donors so that our customers' needs are met and they are able to turn to us in times of crisis and need.
PROTO PERSONA
Our Proto Persona, Marco Hopkins, loves giving back to the community he grew up in. But, at the same time he is unsure of where his donation money is spent or how well it is utilized. He expects more information and transparency which is missing, thus affecting his motivation to donate.
USER INTERVIEWS
During the interviews, we learned that many people donate to just 1 or 2 charities and they do not research any new ones. Also, they expect to be informed of how their donation is utilized in social causes or in times of crisis.
SURVEY RESULTS
The survey result revealed that 48% of the respondents have never donated money to a food bank and 60% have never volunteered for them.
SURVEY CONCLUSION
The survey confirmed that people are motivated to donate out of a desire to help their communities, just like our proto persona. They also desire confidence in the NGO they are donating to.
AFFINITY MAP
The results of the interview were put together to create an Affinity map that helped us categorize the needs, demands, complaints and expectations of the donors.
EMPATHY MAP
The empathy map reiterates the fact that trust is one of the most important reasons people do not wish to donate to newer charities, followed by transparency.
I LIKE I WISH WHAT IF BOARD AND PRIORITY MATRIX
To address this concern, we came up with a few ideas and created a I Like, I Wish, and What if board, and narrowed down the results of the voting to create a priority matrix. Some of the important things that came up that we also tried to implement in our redesign were an easy donation process, donation receipt, better color scheme, transparency etc.
HEURISTIC EVALUATION
Main Heuristic Issues:
Aesthetic & Minimalist Design | Flexibility & Efficiency of User Consistency and Standards
Key Focus:
1. Header & Footer Navigation
2. Social media icons are too faded
3. Colour scheme doesn’t pass the accessibility test
4. Too much happening in the header, giving it a busy look
COLOUR ACCESSIBILITY TEST
COMPETITOR ANALYSIS
FeedOntario, The Stop and Second Harvest, all organizations that target food accessibility in Ontario.
Key Takeaways:
1. Donate was the main call to action on the page
2. Clean and aesthetically pleasing design
3. Multi-media to showcase the work they do
Second Harvest which is the largest food rescue organization in Canada, is a very popular food bank and has donors like Walmart, Loblaws, Sobeys associated with it. The colour scheme of the website is very pleasing and motivates users to donate.
USER FLOW
In user interviews, we found that most individuals did not spend a lot of time researching, but still needed a sense of trust with an organization in order to donate. So, we focused on creating a quick process for people to access the information they need, with minimal steps to make a donation.
One major aspect we changed was the design form itself, where instead of clicking on the type of donation you want to make and being redirected to another form, you can instead choose that option within the same form.
In the individual donation form, we wanted to create only a few steps to donate. We also wanted to incorporate the option to make a recurring donation, as this type of donation is the most effective for the organization.
NORTH YORK HARVEST USER STORYBOARD
The main objective is to generate a sense of trust and confidence in donors that their donation is going to a good cause. In the storyboard, we have our user thinking about making a donation and that's how they discover North York Harvest. They read more about the organization and feel they can be trusted. Upon reading more about their programs, they find out where the money is going. Now they are more confident about donating money/food to an organization that is well aligned with its mission and values. They seamlessly fill out the donation form and attain a sense of fulfillment that they were able to help out their community.
NEW SITEMAP
During the interview, we asked users what information they want to know when researching a charity, and based on the information they expect from any NGO, a new sitemap was designed that can address questions like:
1. Where is my money going?
2. How does my donation impact others?
3. Who is managing my donation?
LOW FIDELITY DESKTOP AND MOBILE WIREFRAMES FOR NEW DESIGN
The new sitemap led to designing digital, low-fidelity wireframes, both for desktop and mobile
STYLE GUIDE FOR NEW LOOK AND DESIGN
LOW-FIDELITY USABILITY TESTING KEY INSIGHTS
1. The testers liked the easy navigation
2. They liked the donation button on top right
3. Appreciated the colour scheme which was somewhat visible in overlay menu
4. Asked us to remove sign up for newsletter from top right
5. Disliked the placement of About us
THE REDESIGNING - BEFORE AND AFTER HOMEPAGE
We changed the colour scheme completely to incorporate a soothing green that also goes well with food related content. Based on the new style guide, high-fidelity wireframes were designed and tested for usability and general feedback.
HI-FIDELITY USABILITY TESTING
Key insights:
1. All tests were completed successfully
2. Users were able to navigate the site smoothly and were happy with the clean, fresh design
3. One user identified an issue with the mobile header being cut off, so we revised that
4. Another user noticed that our Thank You overlay appeared glitchy when scrolling, so we ended up prototyping it as a separate page
5. Another user noted that the social media icons could be decreased in size and still be effective
The usability testing was successful with both mobile and desktop designs appreciated by users.
HIGH-FIDELITY PROTOTYPE - DESKTOP
HIGH-FIDELITY PROTOTYPE MOBILE
FINAL THOUGHTS AND NEXT STEPS
While it is easy to judge an NGO by its website, the ground level work they do is commendable and complex and makes it difficult for them to focus on the design of their website. With respect to all the hard work North York Harvest Food Bank does in feeding the hungry and needy, here are our recommendations for continuing to improve the UI of their website to attract more visitors:
1. Have a donation profile of regular donors so they can sign in and see how much they have donated
2. Add financial/annual reports to the website for transparency
3. Motivate volunteers and partners by having their profiles or pictures on the website
4. Get more visibility on social media pages to let people know about the food bank
5. Have a language change feature for people to interact easily with the website
6. Constantly update the pages to highlight upcoming events or post updates on previous ones.
