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

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.”

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

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.

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.

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.

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).

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 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.

Volunteers will claim tasks and confirm their delivery

Food banks will be notified when a volunteer is delivering food to them. They will confirm the delivery once the food is received.

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.

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.

Below, we included some of the main screens for each of the three flows (food providers, volunteers, and food banks).

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.

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.

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

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?

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.

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.

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.

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.

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.

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.