food roots

role

time

tools

goal

ui/ux designer

january 22 to june 22

figma

create an ordering platform to connect farmers with local businesses

impact

bridge 10,000+ community members to Asian produce while working with a nonprofit organization

problem

Currently, orders can only be placed through a spreadsheet, which is an inconvenience for both Food Roots and their clients.

With a large number of orders coming in each week, the ordering process— including updating inventory, managing spreadsheet formulas, keeping track of delivery dates— are subject to human error.

For clients, it can also be frustrating to order using a spreadsheet as it’s easy to place orders in the wrong cell and hard to filter through the available produce.

The Challenge

How might we minimize Food Root’s manual intervention, accurately reflect inventory updates, and allow clients to easily find the produce they need?

Previously

There were four steps that APIFM followed to complete their processes.

First, weekly inventory would be sent to the staff at Food Roots Harvest.

Second, Food Roots Harvest staff would send lists of updated inventory to clientele.

Third, clients would use email or text messaging to place produce orders.

Lastly, Food Roots Harvest staff would calculate totals within a spreadsheet.

It’s very obvious to discern the inefficient, slow, and outdated nature of the ordering system that yielded many weak spots inviting human error and loss of information.

Not only that, clients would frequently run into moments of frustration as they would discover their much needed produce was unavailable, or that they were missing items due to inventory or orders being messed up.

final designs

Here’s a glimpse into what the ordering system looked like and the spreadsheet information that was hard to navigate.

conclusion

I’ve learned an insane amount of knowledge from this project with APIFM. It taught me how fulfilling it is to design and work for a non-profit organization, as I could feel the satisfaction from my contribution. It also taught me how to work efficiently with a team of designers and I felt safe in the space to freely communicate my opinions and ideas on certain design choices, and to help each other become more accessible, user-friendly designers. Not only that, we had to hand off our designs to our very own developer team as well, so it taught me how to design in a way that didn’t compromise the beauty or simplicity but also didn’t make it harder for our software engineers to create the site.

introduction

Our project specifically works with the Food Roots Harvest program of APIFM, which works to connect local and sustainably grown Asian specialty foods to communities and businesses in the greater LA area while supporting Asian American small farms and other farmers of color in California. Food Roots Harvest is currently working with a network of 4 farms and 15+ clients, including nonprofits, restaurants, hospitals, and schools. Any revenue made from these sales goes right into supporting the programs they produce to cultivate healthy API communities.

designing

Proposed Solution

Our goal was to help APIFM connect local organizations and the larger APIFM community to APIFM’s food hub— and by proxy, the farmers.

Our mobile application clearly displays available produce in a marketplace and allows users to browse, checkout, and manage their orders.

To streamline APIFM’s client management, users should be able to save their personal information and delivery address as well.

Initial Constraints

Before we began designing, we were informed of important constraints to keep in mind as we work.

  1. Order deadlines: For an order to be delivered by a certain date, users need to order X days and hours in advance so that APIFM has enough time to fulfill the orders.

  2. No search bar: Due to technical constraints and time concerns, our app could not include a search bar for users to look for specific produce items.

To design around these constraints, we proposed the following solutions:

  1. Calendar: Ask users to select a delivery date before they begin browsing to create an order deadline reminder.

  2. Produce filtering: Include a thorough filter & sort feature that enables users to quickly find their desired produce.

User Research

User Interviews

Five interviews were conducted with Food Roots users to ask about their experience with the current ordering process, and to gauge their reaction and subsequent interactions with the low fidelity screens that we designed.

Affinity Map

Interview insights were then organized into categories to analyze overarching patterns and extract key takeaways.

Proposed Solution

  1. Subscription: Place recurring orders that are editable, accommodating for changing demand.

  2. List view + favorites: Enable quick scrolling to view multiple items at once. Allow users to select favorited items quickly.

  3. Filter: Easily identify seasonal items without the use of a search bar.

  4. Community: Reinforce community support through including farmer’s names.

Competitor Analysis

We performed a competitor analysis on 9 grocery/produce delivery apps to compare and contrast features and note strengths and weaknesses to better inform our own designs.

User Personas

Low-Fidelity Wireframes

  1. Because of limited staff, Food Roots can only deliver on Mondays and Fridays.

  2. Because produce availability is always changing, users cannot order one week in advance, making repeated orders/subscriptions difficult for Food Roots.

  3. Due to a tight timeline, our team did not have the bandwidth to develop a subscription model.

The Cart is where the buyer can see all of the produce they added to purchase, and where they can finalize checkout details.

Within the Cart, users are given multiple opportunities to review their items and respective costs before finalizing their purchase, and are able to edit item quantity, remove unwanted produce, and edit/add delivery addresses.

Unexpected Challenges

Usability Testing

After we completed our hi-fidelity prototype, we conducted usability testing over Zoom to identify pain points and successes users are experiencing while navigating the app.

Key Findings

  • The overall design is efficient, easy to use, and visually appealing.

  • Past orders screen should include an editable quantity flow.

  • Restaurants are always changing stock. Although they may need the same item, the quantity varies by what is still available in their stock

  • For the quantity count of total items in the cart, the number should represent total pounds as a quantity.

  • Clients use the total pounds as an indicator of how much they’ve ordered in total, rather than individual unique items.

Style Guide

01. Login & Onboarding

When users first open the app, they will be directed to the Onboarding process to make an account.

Users will be prompted to add personal information necessary for the purchasing process, as well as delivery details and reading the Terms of Conditions.

Once users are finished signing up, their accounts will be pending approval by Food Roots Harvest before they can start browsing the mobile app.

05. Past Orders

In the case that customers typically have similar orders as weeks go buy, they can quicken their purchasing process by accessing Past Orders.


Here, all of the users’ past orders will be stored and customers can place the same order again, with the ability to remove items or adjust quantitity if needed.

Past orders can also be ordered on a different date, but customers must be wary as some items are only available for specific delivery dates.

04. Profile

02. Marketplace

The Marketplace is where users can browse, favorite, and purchase produce from Food Roots Harvest.

Our design team implemented a few features to help smoothen the user experience, such as:

Calendar: ensures users are aware of order deadlines.

Sort & Filter: categorize and organize items in different ways.

List View: help users view multiple items quickly.

Favorites: enables buyers to find frequently-purchased items.

03. Cart

If a user needs to change any of the personal information that was first inputted during the Onboarding process, they can do so through their Profile.

Contact information, delivery addresses, and avatar images can be edited here. The avatar images were designed and created by our own team!