FreeBites

FreeBites Mobile App Redesign

Over the course of 6 weeks, my team and I were able to meet with Kim and Minhee with weekly checkups to ensure a smooth and transparent remote design process! Our redesign process was prompted in efforts to shift from a campus based to a community based forum to ensure an all user-type usability experience. Since shipping off the designs in December, the app has been developed and is currently live! 


Client:
Kim Quach
Company: FreeBites
Development Point of Contact: Minhee Son 

My Role

UI/UX Designer, Addressed Food Insecurity Experience

Duration

Six Weeks (October - December 2020)

Team Members

Miranda Wong, Briana Omori, Nadia Anees

Overview

FreeBites is a community-based startup that emphasizes on rerouting businesses and organizations to eliminate food waste while addressing food insecurity. This app focuses on free food discovery while helping to share surplus food, building an inclusive community in "sharing more, and wasting less."  The first iteration of the FreeBites app before we started our redesign process is shown below.

Frame-306

problem

The Challenge

1 in 9 people in America today identify as food insecure. This project is a big opportunity to help businesses to reroute food waste and help community members to find free food. To solve this problem, our team recognized our end users as community members with 3 user types along with 3 significant pain points to be addressed.

A4-1
A4-2-1

solution

Final Designs

Below is a brief overview of our final designs. A major challenge our team faced was being able to consolidate all of our enthusiastic ideas into one large concept. We overcame this challenge through communicative transparency, allowing our team to bond stronger throughout the design process. We were able to finalize our designs after many iterative rounds of critique and usability tests. The full prototype is available to view here.

Frame-305

feature

Food Map

Adding a Resource

One of the main tasks for the map feature itself is to be able to add resources to it. This is the view from an organization standpoint, when they first created their FreeBites account. There is an onboarding pop up, that describes the key functionality of this feature. Users are able to add a resource quickly and efficiently with customizable content, along with a confirmation screen at the end describing the end of the task.

ezgif.com-gif-maker-14

Editing a Resource

This task is easily done by accessing the profile section to be able to edit a resource previously listed from an organization standpoint. You will be able to make sufficient changes, and receive a confirmation screen to indicate the end of your task.

ezgif.com-gif-maker-2

View a Resource

This task is from an individual view, it allows a user to be able to view resources listed on the map feature. They are given an onboarding process if they are a first time user, and are able to click on the color coded location markers to efficiently filter out the type of resource they are looking for or they can use the search bar if they choose to do so. Once clicked on any of the food markers, the user is given more details and instructions.

ezgif.com-gif-maker-3

feature

Profile

View Posts

Welcome to FreeBites onboarding pop-up directs users how to use the features of the app. The home feed shows the individual posts, time, location, dietary restriction tags etc. If you click on an individual post, you can view more details, comments and who it is posted by. You are able to filter out your search by typing in the search bar or clicking the filter option. You are able to filter by distance, diet restrictions, food resource, and more customization options that are vital in filtering out posts.

ezgif.com-gif-maker-4

View Saved Posts

To view saved posts, you can find it under the profile section. The saved posts are displayed based on your most recently saved posts. There is also a small filter pop up available based on food resource type.

ezgif.com-gif-maker-5

Edit Profile

Of the two ways to edit a profile, you are able to edit from an organization point of view or individual point of view. You can navigate to the profile section and click on edit profile, which will bring up options to change your profile picture or edit and add more information for you to customize. The individual point of view is the exact same process, with the same customization features.

ezgif.com-gif-maker-7

Managing Your Account

To manage your account from your profile, there are three simple options available to add another account, delete account, or simply to log off. To add an account, it simply prompts you to the login page. To sign off or delete your account, it will prompt you back to the onboarding screens to get started with the process again if you wish to do so.

ezgif.com-gif-maker-8

feature

Post

Create a Post

Navigating to the add post button on the navigation bar, you are able to create a post from any page you are on. To post any surplus food you have, you can add as much information as you would like with options to add pictures, location, time frame, dietary restrictions, etc. You then are able to post with a simple tap!

ezgif.com-gif-maker-9

Edit a Post

To edit a previously made post, you are able to access this from two entry points. The first would be to go through the home page to find the post you made and edit it from there, or you can view your posts from the profile page, which is seemingly more accessible. From the profile page, you are able to click my post and click on any posts to edit. You are able to change the availability status, add more photos, or change any other field and finally click post and now your post is edited and published!

ezgif.com-gif-maker-10

Reply to a Comment

Once you are clicked into a post, you are able to click on write a reply, where you can type your response and simply press send to post. This feature is easily accessible and interactive which allows fast replies to inquiries about the post.

ezgif.com-gif-maker-11

feature

Messaging

Message through Post

To approach messaging someone through a comment on your post, you are able to privately message them by clicking on their profile and click message. This directly prompts you to a message entry point to be able to reply privately.

ezgif.com-gif-maker-12

Messaging Feature

To reply to a message, you would first navigate to the message tab. You are able to view new notifications and messages that are highlighted and ordered by time sent and received. You are able to see the date, time, and a quick indication of the post location.  

ezgif.com-gif-maker-13

solution

Design Process

Over the course of 6 weeks, we were able to research extensively by conducting user interviews and performing a competitor analysis, synthesize our results by sketching storyboards, creating empathy maps, and finally wireframing, leading to our iterative designs which we were able to user test before shipping off our final design and prototype.  

Group-1-3

user research

Competitor Analysis

To familiarize ourselves with commonalities within the food sharing industry, our team conducted competitor analysis to determine the nature and scope of the industry as well as to determine key customer benefits.

competitive-audit

user research

User Interview

Each member of our team was able to interview with two users within each sector of Food Insecurity, Surplus Sharer, or Non-Profit. We conducted a total of 8 interviews broken down into a before-redesign interface user task, while observing their user flow, as well as questions to learn more about the user and their experience using the current interface.

Screen-Shot-2021-01-12-at-10.44.22-PM

research synthesis

Empathy Mapping

To synthesize our research results accurately, we were able to efficiently utilize empathy mapping to help us understand our users in analyzing their behaviors to find our key pain points.

Group-419

sketches

Storyboarding

Our team explored different user experience research methods to synthesize our interview results and we all found it best to consider all of our user types through storyboarding and storytelling. We chose this method rather than creating personas to help us visually communicate our process and provide clarity to directly correlate our empathy map to the next step in our design thinking process. 

Group-420

ideation

Wireframing/Lo-Fi

After synthesizing our results from interviews, empathy maps, and storyboards, we were able to focus on establishing user journeys by creating and organizing content hierarchy. We were able to discover our solution to cater to the users with a common visual branding, adding filter and customization options for users to interact, as well as optimizing the food map to be more interactive and readable.

Group-424

prototyping

Mid-Fi

After finalizing our wireframe ideas with our client, we were able to proceed knowing the feasibility of our product was plausible and effective. We combined our Mid-Fi process along with creating a sustainable design system to start our Hi-Fidelity mockups to finalize our designs. 

Group-425

Design System

Group-270

results

Reflection

This project highlighted my experience working on an impactful social issue, and gave me the chance to face real world problems to help solve through design. I had a chance to partake in a cardinal experience and helped bring many members of a community together through an empathtetic mindset. It was amazing to see the simple changes that design can conquer in making a user experience that much more special and successful with a product. I'm so grateful to have been able to work with an amazing team and have an amazing client experience - I was able to grow immensely as  a product designer through such a supportive and patient team adventure.