Academic Project
StillFresh
Date: Fall 2019
Duration: 6 weeks
Team: April Zhang, Xiaofan Li
Role: Research, UX/UI Design, Interaction Design, Prototyping
Overview
StillFresh is an app providing service for eco-minded, start-up hotels/restaurants and individuals or third-party non-profit organizations to easily manage, acquire and trade leftover food. The platform will bring a smooth repurposing flow from ordering, communication, to pick up.
Discovering the Problem
Hotel buffets would usually prepare more food than what the guest actually takes. However, based on our research, only 50% of the food would be actually consumed. Among that surplus food, only 10 to 15 percent will be reallocated due to food safety regulations. A big portion of the leftovers are actually edible and could be repurposed. While some people or third-party organizations, like low-income families or charities who are looking for low priced food and others are trying to reallocate surplus food to reduce their financial loss.
Opportunity
Currently, there are not many effective ways to reduce food waste. The existing process of donating and repurposing is ineffective, due to food safety regulation and inefficient communication. Many foods ended up in the garbage because they have become stale before being relocated or they were eaten by others. There are many people looking for food and also many are trying to reallocate food. There are not many effective ways to connect them together.
To solve this problem, we are proposing StillFresh, a platform that provides services for both hotels and individuals to manage and acquire leftover food at more than 70% off of the original price. The app will bring a smooth re-purposing flow from ordering to delivery. By connecting two stakeholders, it could help to reduce food waste at the hotel and restaurant service.
Target Audience + Persona
Our target audiences are eco-minded, start-up hotels/restaurants who would like to sell their surplus food to reduce financial loss. And individuals or third party organizations (food banks, charities, etc.) who need decent edible food with discounted price. We created a persona based upon our user research to better understand our target user’s goals and needs.
User Journey Map
We created a user journey map based on our persona, we wanted to understand and consider the user interaction and emotion of each step in the user journey to find all the insights on how to help users on the journey.
Interaction Paths
We had then created different interaction paths, from which we created a hybrid version that was the most efficient. Using the interaction path and the elements dictated from the user journey, this allowed us to create some basic mockups for some initial testing.
Paper Prototypes
Once we had discussed what core features needed for each screen, we made some simple paper prototypes to use for usability testing.
Once the paper prototype usability test was done, we had received feedback for our tester and considered and incorporated some of their advice into the next prototype.
Initial Design
Initial we had two types of the target audience - food provider (hotels/restaurants) and food receiver (charities/food banks), we understand that the charity/food bank needs a large amount of low priced decent food. Thus, we designed the portion sizes in grams. Also, since the app is aiming to promote the leftover food, we want to highlight the food rather than the restaurant. Thus, on the product listing page giving big images of food on a clear background, this can avoid user judging the food by the image background environment.
User Testing
Once the first version of prototypes was completed, we conduct a think-aloud usability test, then iterate upon the prototype with the feedback. Here is some feedback we received:
- Simplify the interface of the profile page
- Revise the unit or find a better way to count food
- Hierarchy issues of the "categories bar"
- Add a donate leftovers option to help homeless
- Add an own menu page for each hotel/restaurant
Based on our further research, some food banks are reluctant to receive leftovers from the buffet because it isn't properly packaged. Also, after the user testing, we realized that individuals are willing to get decent leftovers, so we consider and emphasize individual as part of our target audience. We then repeated the process of testing and applied feedback one more time until we had created our final design for the applications' user interface.
Click here to view the final prototype.
Final Design
On-Boarding
Using colorful and informative illustrations to introduce the purpose and core features of the app. If the user is interested, they can create an account in a few simple steps.
Rescue Food - Buyer's Version
Product List
Based on the location entered by the user, the product list will provide the nearest available restaurant/food to the user. Products are categorized by cooking food and produce, the menu is visible on the left, it allows users to search items quickly. Users can simply click the arrows to change the unit of a portion and add the item to the cart if they don't need to read the description.
Product Detail & Cart
The most important information such as allergy warning is shown on the top of the product detail page. If the users want to view more info (ingredients, serving time, estimated expiring time), they can unfold the detail options.
Users can make their final edit on the cart page. When the order is complete, the user will receive an invoice for records of a transaction.
Message & Notification
Users can contact the food provider directly, we made some frequently asked questions, users can simply click and send it, this saves the user time and make the conversation smoother. For the notification, the user will be notified when the order is confirmed and reminded for the pick-up time.
Repurpose Food - Seller's Version
Manage Items
Food providers can manage their product list by adding/updating the item. If the user wants to make a change of the item after added on the product list, the user can click the edit details to change prices, portions, etc.
Manage Orders
Users can easily track the order status of each order, they also have the right to accept or reject orders. If the food is out of stock, buyers will get a notification and the menu will be reflected in the change, also suggest the user contact buyers.
Profile
Both types of users have their own profile settings. For buyers, they care about the order history more. And for sellers, they care about their business - how is going, how many orders they completed and the income. That information is contained in the page, users can easily find out.
Reflection
Through this project, I learned how much a product can transform from its original idea. Our initial idea was to build a B2B platform that intends to save leftover food, allow organizations (charities, food banks) to receive products of equal quality from hotels/restaurants at a discounted price. However, in our further research, we noticed that not every food bank distributes cooked meals, while we wanted the app to solve the issue of leftovers and bring benefits to the community. Lack of research at the early stage, lead us had to take a step back to reconsider its purpose. The feedback from our peers and instructors is crucial for us and made us rethink and integrate design features.
For future development, I would like to add a section for "free donation". Since this app is for commercial use, we can't simply add the "free item" option as people might take advantage of it, and this might change the purpose of the app. Therefore, this still needs to have more research to consider how to combine the section together.