Iterative Design and User Testing: 412 Food Rescue
iterative design cover image
Context
This project was made for CSCI 1300: User Interfaces and User Experiences, a class at Brown University taught by Jeff Huang. Our goal was to choose a startup and based off of only a short summary of the goals of the startup, we had to design an interface and perform user testing.
My teammates were Miranda Mo, Jennifer He, and Milanca Wang

412 Food Rescue
We were inspired to design a mobile app for 412 Food Rescue, a start-up that instantaneously redistributes surplus food from retailers to food banks. Instead of making a website, we chose to create a mobile app because it would make it easier for restaurants to take photos of leftover food and for volunteers to navigate while driving.
We started brainstorming our ideas for the design based off of a blurb in an article that was written about the startup on Carnegie Mellon University’s website:
“Co-founded by Leah Lizarondo, 412 Food Rescue partners with food retailers and other suppliers to pick up their healthy surplus food and deliver it to community nonprofit organizations, where it is directed to individuals and families experiencing food insecurity.”

Pre-Design Questions
Before starting the design process, we considered how our app might affect various groups of people and addressed the following questions.

Who is directly affected by the interface?
People directly impacted include the restaurants and organizations that want to donate leftover food, the volunteers, the people who receive food from food banks, and the people working at the food banks.

Who is indirectly affected by the interface?
People indirectly impacted are garbage collectors who might be laid off due to less need to pick up trash. Another group is restaurant customers because they are encouraged to visit stores that advertise itself as zero waste with 412 Food Rescue rather than non-green stores.

How are these mentioned groups affected by the interface?
Restaurants can now efficiently distribute food to shelters through volunteers and reduce waste. However, food banks will have an influx of donations, which might negatively affect the workflow of employees there. Nevertheless, the increase in food can improve the quality of life for those who face food insecurity.

What are the ethical concerns?
The emphasis on immediate delivery neglects the negative consequences of transportation’s gas emissions. It is difficult to balance eco-friendly transportation while maintaining the quality of the food (volunteers can choose to ride scooters but that might cause bruises in food).

User Flow and Low Fidelity Wireframes
To begin, we mapped out the user journey of three groups of people - food retailers, volunteers, food banks - and integrated the flow in our wireframes.
Food Providers
Food retailers will post their leftover food on the app, and be notified when a volunteer picks it up. After the volunteer picks up the food, retailers confirm the pickup.

food proviers low fidelity mockup
Volunteers
Volunteers will claim tasks and confirm their delivery
volunteer low fidelity mockup
Food Banks
Food banks will be notified when a volunteer is delivering food to them. They will confirm the delivery once the food is received.
food pantry low fidelity mockup
High Fidelity Prototypes
high fidelity mockup
Changes from Wireframes
From the wireframes, we modified the UI to improve usability.
  • Added a page that lists information about the delivery such as the addresses of pickup and drop-off after the volunteer selects their task.
  • On the map screen, we dedicated it to location based navigation and minimized the size of the “from” and “to” field to place emphasis on the map.
  • Eliminated the duplicated delivery information that is already provided on the Details page and Dashboard.
Final Changes from In-class Critique
For the interactive prototype, we decided to focus on the volunteer’s user flow because food delivery is the main focus of the startup. After presenting our high-fidelity prototype of the volunteer user flow to the class, we noticed that our main problems include legibility and clarity of task, which can interfere with the efficiency of the volunteer. Therefore, we resolved these problems as follows
  • Darkened the body text and bolded fonts
  • Added duration of drive to task information page
  • Removed the date and moved the profile icon there for easy access
  • Allow volunteer to interactively click the phone or message button to contact the store/food bank
  • On map screen, added immediate directions at the top and added a “End” button for the volunteer to exit the trip.
  • Added congratulatory message at the end of delivery

Here are examples of how we took these critiques and implemented changes to some of our screens.
mockup iteration

Final Visual Design
Below, we included some of the main screens for each of the three flows (food providers, volunteers, and food banks).
food supplier high fidelity mockup volunteer high fidelity mockup ngo high fidelity mockup

User Testing
We submitted our prototype to UserTesting, a service that allows UX researchers to test the interface, indicating the following task and scenario. We had three user testers: Samueltom, Ibe, and Hksvij.

Hypothesis
The minimalistic and one-directional design of this app makes navigation user-friendly and therefore will allow the users to complete the tasks with few distractions.

Selected Task
Successfully pickup and deliver food from a restaurant to a food bank

Subtasks
Navigate to the dashboard page and in your own words, describe what you think you can do on this page.
View your profile page to see your achievements. Is there anything on this page that you do not understand or know how to use?

Scenario
You have been participating as a volunteer for 412 Food Rescue for the past 6 months. You would like to increase your engagement with the community by completing more deliveries each month. Today you have a few hours free in the afternoon and want to make some food deliveries from nearby restaurants to food banks. You will use the 412 Food Rescue app to select a delivery you want to make, pick up the food from the listed restaurant/store, and then deliver that food to the listed food bank/homeless shelter.

Quantitative Metrics
user testing task 1 metrics user testing task 2 metrics user testing task 2 metrics
Qualitative Analysis
Error Type
On average, all three users commented that the navigation is intuitive, as supported by a complete rate of 100%. However, Samueltom made a planning error and assumed the Sign-In page was the Dashboard, therefore she described the wrong screen when asked to describe the functionality of the Dashboard. Her mental model of logging in was not the same as that of the prototype (where she assumed she can log in with the Google icon, so she did not click the usual Sign-in button), which resulted in her error.

User Satisfaction
Nevertheless, our low time on task averages support that the users are generally satisfied by the app’s simplicity, with Hksvij saying “Nothing is confusing.” Moreover, Samueltom mentioned that seeing her achievements at the end of delivery makes her feel an “adrenaline rush,” and Ibe noted that her accomplishment metrics keeps her engaged.
Overall it seems like our hypothesis was correct because our users were able to successfully use the app to make a delivery in about 2:45 minutes which is very little time. When viewing the recorded videos on UserTesting, we can see that users spent the most time choosing between different food delivery posts and they navigated through the other pages fairly quickly. Therefore we can accept our hypothesis because users were able to make a delivery without getting distracted.

Potential interface changes
Ibe suggested making the profile page more descriptive by adding the color and model of the volunteer’s car, the approximate location for which they can deliver food, and the volunteer’s cell phone number. We can also add additional information on the confirm delivery and pickup pages to increase accessibility for users with disabilities. For deaf users, we can add a note informing restaurants that they should text the volunteer instead of calling them. Another user also suggested that we let volunteers schedule deliveries and pickups a few days in advance so they can plan out their week ahead of time.

UserTesting Experience
A challenge that we ran into during our UserTesting sessions was that we didn’t expect the user computer’s lag time to influence their interaction with the prototype. One user was confused when they clicked on a button and the next page did not appear due to the lag time of their computer. Another user tried to sign in using the Facebook button but couldn’t because we did not think that was a necessary screen to have for our prototype. In this case, we should have told users that they should sign in as if they already had an account instead of signing up as a new user. Overall, the users were able to follow our instructions very well. When we asked users to navigate to the profile page, they immediately clicked on the profile icon and understood all the information on the page.

Conclusion
For this assignment, we were able to come up with a new design for an app simply based off of a description about a startup. Without looking at their existing website and app, we brainstormed how we thought the app should be laid out, therefore implementing user flow for the three types of users. Throughout the assignment, we made several changes from our low-fidelity mockups to the high-fidelity mockups and then further changes after the in-class critique. Over each iteration, we felt that we were able to make the app more user friendly and increased learnability and memorability. This certainly proved to be the case, as our testers were able to complete the given tasks with minimal confusion. If we were to build onto this project, we would add functionality to more of the buttons that we had included, such as the edit settings icon and the buttons on the sign in page.




Other Projects