NextBite

rescuing farmers market leftovers one box at a time

NextBite is a mobile app that bridges the communication gap between farmers market vendors and non-profit volunteers to help out local communities in the Seattle area.

Role

UX Designer & Developer

Tools

Adobe XD, Illustrator, Photoshop, React Native, Firebase, Google Cloud Functions, Fetch API, & Google Maps API

TEAM

Alexis Koss, Lisa Koss, Kar Yin Ng, & Sean Martin

RESPONSIBILITIES

Interviews, User Journeys, Sketching, Prototyping, Wireframing, Usability Testing, Development

Time-frame

6 months

Instructors

Nam-ho Park & Christopher Holstrom

The Challenge

Reducing Food Waste

Farmers markets often have produce at the end of the day that cannot be sold, either due to visual imperfections or overproduction, which contributes to food waste. Volunteers from nonprofit organizations rescue food from farmers markets, but this process is inconsistent due to ineffective communication between volunteers and vendors.

AWARD WINNER

2018 Informatics Capstone Service Award Winner

With over 100 Capstone presentations, our team won one of six awards offered by the UW iSchool. Our project met the expectations of “focusing on the common good by engaging students in active interaction with a user community in need.”

The Discovery

How is food currently being redistributed at the end of the day at a farmers market?

To gain a deeper insight into the problem that we identified, we completed user research on both potential user groups in order to create personas and curate user journeys before moving onto the design phase.

First off, we conducted several semi-structured interviews with farmers market vendors at the University District Farmers Market to acquire a better understanding of the current food donation process. Our focus within these interviews was to discover the key pain points that vendors and volunteers experience when attempting to donate surplus food. We identified three major problems from this initial research:

Inconsistent Donations

Volunteers used to come to collect donations at the end of every market day, but stopped when they didn't always have donations to collect

Lack of Communication

Vendors have no way to effectively communicate with volunteers to tell them to stop by their booth and vice versa

Unreliable Arrivals

Volunteers are inconsistent when they come by asking for donations; vendors never know when they're going to come and they're unsure how long they should wait

Additionally, we also interviewed the manager of the Ballard Farmers Market to get another perspective on the donation process and how it might change at different times during the year. We identified almost the exact same problems.

A phone interview was also conducted with the University District food bank to gain insight from the volunteer perspective, where we confirmed our initial research from the vendor side:

Infrequent pickups

Volunteers can’t accurately predict when they can pick up donations so they infrequently stop by to not waste their time

A Deeper Look

Exploration of who we are designing for

All of these problems have discouraged both volunteers and vendors because of the high degree of uncertainty that both parties face when collecting or making donations. Each user group places expectations on the other to be ready for a donation drop-off or pickup but with the current gap in communication, these frustrations arise.

To build upon the research that we collected, Lisa and I created two user personas: one that represents a farmers market vendor and one that represents a volunteer from a non-profit organization.

These personas allowed us to constantly reflect back on our user groups to ensure we were keeping them at the forefront of our design process.

You can view our user personas, Stephanie and Michael, below.

Vendor persona

Volunteer persona

After we created our user personas, my team and I decided to take even a deeper look into the farmers market vendors specifically. They had identified more problems than the volunteers did, so we wanted to explore thoroughly their current state pain points and frustrations with donations.

Our Approach

After our deep dive into our identified problems, user groups, and pain points, our team had to take a look at how we were going to approach this problem by thinking about…

• How are we going to solve it?

• What goals do we need to achieve?

• What steps do we need to take to get there?

Design Approach

My team decided on using a weekly design sprint approach to tackle our solution. With the ability to rapidly ideate, iterate on our designs/prototypes quickly, and test weekly with users, we could collaborate together while validating the design choices that we made for our app. User feedback was invaluable in this process so seeking it weekly make sure we were able to keep them at the forefront of our design process.

Software Approach

At the end of our 20 week Capstone, we had to have a final deliverable that could be presented to our stakeholders and demonstrated to the students and faculty of the iSchool.

Based on our prior knowledge and skills, our Capstone advisor advised that we should stick with developing a mobile responsive web application as we had done that in the past. Initially, my team thought this would still be fine as users could use the application on their phone, but we soon found out later in usability testing that this solution failed to meet the expectations of our users. Without real-time notifications, the communication gap between vendors and volunteers still existed.

We had to pivot after 10 weeks of development, designing, and testing.

With only ten weeks left, myself and another team member taught ourselves React Native and coded our very first mobile application for Android phones. It was risky, but paid off in the end.

Our Vision

How are we going to bring our ideas to life?

It was now time to bring our vision to life. My team and I create user journeys for the future state of what we wanted NextBite to be so we knew exactly not only who and what we were designing for, but also the emotions we wanted our users to feel when using our application.

Bridging The Connection

Both vendors and volunteers solely rely on each other to make this donation process happen, but without a line of communication they are both continually left frustrated. Our goals for the end product of NextBite were:

• Allow volunteers to see if there’s any donations available at nearby markets.

• Notify vendors that a volunteer is coming for their donation.

• Have both user groups rely on the application rather than directly on each other, giving them a direct line of communication.

Time Saver

Ultimately, we wanted to save both vendors and volunteers time. Vendors wouldn’t have to wait around if they knew a volunteer wasn’t going to be able to make it that day and volunteers would be able to better use their time elsewhere if markets didn’t have donations for the day.

We crafted a future state user journey for both groups to analyze how NextBite would function while also ensuring we achieved positive touch points at all interactions. We really wanted to think about how our application would function in a real scenario while also ensuring vendors and volunteers would no longer be frustrated with each other with the use of NextBite.

An Early Look

Initial iterations and exploration into our solution

Following our initial user interviews and deep dives into our users, my team set out to design our first paper prototypes. Since our first approach was considering a mobile responsive website, the paper prototyped designed NextBite with that in mind.

In The Field Testing

At the end of every sprint, we tested our newly iterated paper protoype with vendors at the University District Farmers Market and volunteers from the University District Food Bank. Their feedback was critical before moving on to more defined wireframes.

From Ambiguous to Obvious - Vendors are in Control

The donation process relies on vendors having food available for donation at the end of a market day. This is the most critical user flow on the vendor side of NextBite so we wanted this process to be quick and easy to access so volunteers could be alerted as soon as possible and vendors could resume their work at the market. In later iterations, we made the design decision to have the vendor side immediately direct vendors to make a donation upon launching the app, reducing taps, as their other uses of NextBite are less often accessed.

Almost all of our testers were confused by what we meant by tags in our early iterations. We found that our vendor user group rarely used hash tags on other apps so we iterated on the wording from what’s inside the box? -> what’s inside -> types of food. Despite the wording being longer, all of these iterations were received better than our initial wording of tags, reducing confusion on filling out the form.

Giving Volunteers Back Their Time

A live map was a game changer for volunteers. Not only did they know how far they were from the closest rescues, they no longer would waste their time traveling to farmers markets if their help wasn’t needed.

In initial testing we observed that volunteers disliked how small the map was on mobile devices and some also had trouble navigating the map as they were unsure if the list of markets/donations corresponded to the location markers on the map.

We made the design decision to have the map take up the entire screen as much as possible, moving more detailed information about each market to another screen. Volunteers only needed to view specific information about available rescues if they were traveling to that farmers market so it made sense to move that information until it was requested.

A Line of Communication is Now Open

We wanted to ensure that the digital communication of available donations empowered volunteers to rescue food while giving vendors the confidence that their donation requests will be picked up.

At this point in testing, volunteers informed us that they didn’t care exactly what was in their donation pickup, as long as they had a general idea of the food types to ensure their food bank could use the produce. They were more concerned about transporting a large quantity of boxes or heavier items so we made sure to include that information in our final iteration.

Keeping Track

To further increase communication for both user groups, we made sure to include a status indicator for current donations to alert vendors if a volunteer was actually coming to get their leftover food, preventing them from leaving before their volunteer’s arrival.

We also confirmed in user testing that the donation history tab was appreciated by most vendors as donations are tax deductible so this gave them an easy way to keep track of what they were donating with little effort on their part.

Introducing NExtBite

20 weeks of work in one application

Branding

Lisa and I created the following UI style guide that we followed while creating our hi-fidelity mock-ups and presentation poster. This ensured our designs were cohesive as we were working on them as a team and also made it easier for when we went to engineer our designs into our finished product.

Poster

In conjunction with the final stages of development, my Capstone group also focused on creating a poster for Capstone night. I led the design of the poster, but as a team we focused on summarizing what our app aimed to accomplish, the problem it was solving, and its key features.

By focusing on the most important details and screens, we were able to create a concise, information friendly display of our project.

Video Demonstration

See our final product in action

The following is a video demonstration that shows both the vendor and volunteer sides of NextBite on two different Android devices. The demonstration also details how a vendor would interact and communicate with a volunteer and vice versa during a donation pickup and delivery. Take a look below!

Capstone night

Launch of our demonstration

The culmination of our hard work over two quarters came together on the iSchool's Capstone night. Over the course of three hours, we presented our research and work that we accomplished to create our Android application. We demoed NextBite on two physical Android phones, allowing viewers to see how farmers market vendors and volunteers would interact with each other during the donation process.

Our poster also accompanied our presentation, allowing viewers to get more background on our work, its purpose, and our finished application if they missed the beginning of our presentation or did not have time to view our presentation in its entirety.

At the end of Capstone night, the judges awarded our group with the Service award as NextBite focused on the common good because our group had an active interaction with a user community in need.

Reflection

What's next for NextBite?

Working on NextBite over the course of 20 weeks was a challenging, yet rewarding, experience. I learned a lot about the different phases that a project must go through before it is finalized and ready to be shipped.

What I Learned

Working on a project from start to finish is hard at first if you lose focus of what’s important and what your end goal is. My team had to constantly check in with each other to make sure we were on the same page about our goals and the results that we wanted to see.

What’s Next for NextBite?

Due to our pivot half way through the project, our team was not able to finish NextBite to the initial expectations that we had set out to do. If we had a couple of more weeks we would’ve liked to:

• Publish the finished app to the Google Play store so our application could have real-world results.

• Develop the iPhone version of NextBite (React Native makes this easy, but we didn’t have time to test on another operating system).

• Test our fully functional, deployed app with both user groups to see how our solution could be improved for expansion outside of the Seattle area.

At the moment, our team does not have plans to fully publish NextBite, but maybe one day we can circle back to this project to help out the local communities.