Leftovers is a Canadian non-profit organization and its' mission is to reduce food waste and increase access to the food for people in need. They work with volunteers, donors, and service agencies across Canada to rescue and redirect food.
Product Designer
User Research, Visual Design, Prototyping & Testing
Figma, InVision, Miro, GitHub, VS Code
3 weeks
10 user tests over the phone & 22 user surveys
When we first started the user research process, we had two goals in our mind: 1. run user tests on the current Leftovers website and 2. conduct user surveys to find out if people (who grow their harvest) would be interested in using an app to donate their excess food.
My team and I created a Google survey with 10 questions and 22 participants completed the survey. Some questions we had on the survey included the following:
We also ran 10 user tests on Leftover's current website to discover the biggest pain points for the users and to understand how to create a better user flow for our Leftovers app design. When we ran the usability test, we concentrated on two different scenarios:
Scenario 1:
You are a local farmer that grows beets and carrots. Sometimes the vegetables you harvest have imperfections and they are not acceptable for sale, but are perfectly fine to eat. You don’t want to waste good food and are willing to donate a few boxes of “imperfect” vegetables from your harvest. You decide to explore their service. Please follow these prompts:
Scenario 2:
You have an apple tree that produces a lot of apples every year and it produces more than you can use.
You decide you want to donate extra apples to an organisation. You find Leftovers website and decide to explore their service.
Based on the data gathered from the survey, we discovered that:
Based on the data gathered from the user tests on the current website, we discovered that:
Problem
Solution
My team and I wanted to create a mobile app for Leftovers with clear step by step instructions how to contribute and simplify the process of donating extra harvest by funneling users into a right user flow and improved information architecture.
After the user research, we created an user persona based on the findings from the user research:
Motivations:
Pain Points:
Based on these findings, my team and I decided to concentrate on one user flow (how a user can donate their extra apple harvest).
IDEATING
As a starting point, we did some market research on competitors to investigate what kind of food rescue companies are currently out there. We conducted a heuristic evaluation and SWOT analysis for each competitor and gathered the strengths we would want to apply to our mobile app.
Second Harvest - Canadian food rescue company
Not Far from the Tree - Toronto fruit picking and sharing service
Rescuing Leftover Cuisine - food rescue Organisation in the USA
After the Competitor analysis was done, we started to create a User Journey. We had already previously decided to concentrate on a user journey for someone who wants to donate their extra apples to a charity. Since we had discovered from our user research, that for most of the users, it's hard to navigate through the website, we wanted to ensure a smooth navigation for our app design.
From the User Journey, we moved on to deciding which features and things we want to concentrate on. My team and I had a brainstorming session and as a result, created a Priority Matrix to help us to design the mobile app.
During the brainstorm session, we also referred back to our user research results and decided to concentrate on four different things when designing the app:
USER FLOW
We wanted to concentrate on creating clear user flow for donating backyard harvest. Based on the user research, we had discovered that donating process was confusing and since donating food is one of the main tasks you can complete on Leftovers' website, we wanted to ensure that user flow is clear on our App.
NOTE ABOUT THE COLORS - WCAG GUIDELINES
We also wanted to make sure that our app design would pass WCAG guidelines - during our user research, we noticed that the current Leftovers website didn't pass WCAG's color guidelines so we considered that when designing the colors for the app.
PROTOTYPING
LOW-FI
After the ideating phase, we started to work on our first sketches - our main focus for the landing page, was to ensure that the call-to-action buttons and the purpose of the app is clear to the users.
MID-FI
After creating a few quick sketches, we started to work on a Mid-Fi prototype and made them clickable so we could run some user tests on them and iterate further.
TESTING AND ITERATING
Because of time constraints, we moved quickly to our Hi-Fi prototype. We focused on prototyping the Backyard Harvest donation flow and we added step-by-step instructions to address the confusion that our users felt about the process on Leftovers’ original website. Finally, we spread out the donation form across 5 pages to reduce scroll and added indicators to show which step users were on in the process. We performed usability testing with 5 users. All of our users were able to easily complete the Backyard Harvest donation process, but we did receive feedback that our color scheme and design could be more related to food and harvest.
HI-FI
For the Hi-Fi version, we changed the color scheme as per the feedback we had received from the user testing for the Mid-Fi prototypes. We also ensured all the colors followed the WCAG guidelines and are accessible to all the users. We also didn't want to use white (#FFFFFF) for the background or completely black (#000000) for the fonts to avoid too big of a strain on an eye.
We would want to spend time with the stakeholders to review the current site content and perform analytics and based on those findings, we'd improve the user flows and design new features. My team and I find it important to minimize the number of clicks from the home page to important content and make navigation easier. In the future, we'd perform more user tests and make changes based on those findings.
