FareShare: A Case Study
Overview
FareShare is a food awareness campaign and food bank service dedicated to ensuring that everyone in Ontario has access to nutritious food. Based in Toronto, they provide direct food assistance to individuals and families across the province, helping people in need get the support they deserve. FareShare also offers educational workshops to inform communities about food insecurity, nutrition, and the realities of accessing healthy food in today’s economy.
The Problem
With Canada's rising cost of living and inflation making it harder for people to afford basic necessities, the demand for food banks continues to grow. Whether people are living in areas where healthy options are few or where food isn't affordable, no one should have to make impossible decisions just to put nutritious food onto the table.
User Research
Key Survey Results
We learned that people are concerned about their community's well-being and the prevalence of food insecurity in their area. Not everyone knows what food insecurity is, and they also want to know how they can help or donate.
The types of information that people want to see on this website are stats by major city in Ontario, stats by specific groups and income level, solutions and resources, and real life stories. The data people are interested in are the number of households experiencing food insecurity, living in poverty, and visiting a food bank. People like to see interactive visuals and stats comparisons.
Empathy Maps & Competitor Analysis
Our next step was to take a closer look at our target audience and determine their main needs and pain points.
Based on our research, we determined our users' needs, which are:
1. Becoming more informed on the issue of food insecurity
2. Confidently knowing where and how to help (i.e. donating or volunteering)
3. Learning more about how their local area is being impacted (via stat comparisons)
User Personas
Using our survey results as a guide, we created two user personas to represent the website's primary audience. Creating these profiles helped us focus on must-have resources, and avoid pain points such as a confusing user interface.
User Flows
We combined our user flow and site map as both followed the same general format. We decided to structure the home page in a "story-telling" format, logically stepping the audience through food insecurity, its impact on major Ontario cities and specific groups of people, how income plays a role, and how FareShare is making a difference (via success stories). Our focus is on prompting users to donate to FareShare so that their local community can continue to support each other. The users' pain points are also being addressed through its user-friendly navigation bar leading them to
different sections of the website.
Wireframes
Our lo-fi and hi-fi wireframes brought our user flows to life in both mobile and desktop formats. They really started to clarify the visual style of the site, acting as a guide for the prototype design.
Branding & Visual Design
About the Brand
FareShare is a charity dedicated to helping local communities across Ontario struggling with food insecurity. They have a strong focus on providing assistance to families through their food bank service and by educating communities on this prevalent issue.
The logo was designed to reflect the brand values of being friendly, approachable, and community-focused. It blends an organic, humanistic identity with modern relevance. The letterforms are hand-drawn, and are paired with an abstract, lush shape that simulates vegetable leaves. The name FareShare is a play on the word "fare" in how it connects to food insecurity across Ontario. It has multiple meanings—transport fare, range of food, the action of traveling, and equitable ("fair"). Geography is visually represented by hinting a location pin in the centre leaf of the iconography.
Visual Design
With the end goal being to inform and solicit donations from users, FareShare's website has been intentionally designed with a clean and organized system. Both modern and food-related colours have been purposefully used to add vibrance and hopefulness. The colours are utilized to visually group information so that viewers can easily digest the information they are seeking. Subtle hints to the brand's humanistic values are shown through the roughened line treatment in the header and footer, resembling the earth's surface and connecting back to the organic logo design.
As an information and call-to-action website, the design needed to emphasize impact statements. This is achieved through the use of typography that plays into the modern design choices. Monotype is used for impact statements, while the header and body typography is easy to read for digital platforms.
The overall design is easy to navigate, not adding any more confusion or unexpected elements for users. Where more information is needed, instead of directing viewers to a new page, interactive elements keep users in the same part of the story. This keeps them immersed from start to finish.
Component Library
Building a component library for FareShare helped speed up the process of creating the final prototype. If we hadn’t created a library ahead of time, the website would’ve lacked consistency and functionality.
Desktop Walkthrough
To maximize our storytelling approach, we logically step users through the Home page and include interactive visuals such as the flip cards and pop-up windows. We don't include too many that it becomes overwhelming or distracting for viewers.
Mobile Walkthrough
We designed an adapted version for mobile screens, simplifying interactions such as the pop-up windows to a simple flip card for best usability. We made elements larger and more stacked to distribute the information in digestible portions.
User Testing & Iteration
User testing provided insight into four main areas of the website design:
Readability of Stats by City section
The hierarchy of the legend could be adjusted because at a quick glance, users didn't connect the categories to the vegetable icons and what the numbers beside them represented.
Section grouping
We needed more indication of when a section started and ended, so we incorporated colour blocks next to the headers.
Alignment subtleties
The vegetable icons in the Stats by City section weren't aligned in the same way as data in other sections, causing a disruption in the flow of the design. Another one-off in the design was indenting the Contact Us information, which was adjusted to be in alignment with the rest of the information.
Impact statements
The impact statements were floating, lacking the logical placement that tied them back to the section they belonged to. Weight and colour brought them and the story together.
Reflections and Lessons Learned
We discovered four main areas of reflection and lessons learned from this project.
Target audience
Our user research caused us to pivot from targeting those who are food insecure to those who want to help the food-insecure. The approach we take on the website is most effective for people looking to learn more about this local issue and how to take action.
Geographical focus
Initially, we were going to have a strong geography focus, highlighting local food sources and the lack of access to nutritious food in various neighbourhoods. Our user research focused us away from map-based visuals and towards stats comparisons and real life stories.
CTA's & resources
The call-to-action and resource portions of our website were planned to show users how to combat food insecurity and locate food sources in their city, but this transformed when our target audience changed. We found it more effective to demonstrate "success stories" from various perspectives of people in contact with FareShare, whether they are a volunteer, donor, or program recipient.
Animated elements
We considered adding more interactive, animated elements to our website, but we decided to keep it simple and less distracting for users. Overall, this helps people digest the information better and stay focused on the important stats and ways to help.