What's Food Roots Harvest?

blueprint x APIFM header

LA Blueprint, one of my favorite clubs throughout my college experience, is an organization at UCLA dedicated to building tech for social good. As Design Project Lead, I was tasked with leading the design vision of my team and acting as the liaison between our nonprofit and the team.

​I had the pleasure of working with Asian Pacific Islander Forward Movement (APIFM), which is a nonprofit local to LA that aims to empower Asian and Pacific Islander communities. Our project specifically works with the Food Roots Harvest (FRH) 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.

The problem

Why is this necessary?

After speaking with APIFM, I began to get a better understanding of the issue at hand, and they all affect Food Roots Harvest’s staff and clients in a multitude of ways.

The current process


right arrow


right arrow


two arrows pointing left and right


🌾 Farms

📋 FRH Staff

📨 Clients

🧮 FRH Staff

Send weekly inventory to FRH staff

Update inventory and send list to clients

Place produce orders through email or text

Calculate totals within spreadsheet

Laborious, manual process

Everything is done in an outdated manner: manual input into a spread sheet with dozens of pages, text and email to place orders, and back and forth contact between farms, FRH staff, and clients. Each tedious step allows room for human error and miscommunication.

FRH original spreadsheets

Snippet of what FRH’s spreadsheet looked like. Values would be copy and pasted between different sheets and columns. Ahh!

Slow inventory updates

Due to the old-fashioned ordering process, inventory quickly gets jumbled. Clients only find out an item is out of stock after trying to order it, which leads to frustration and disappointment.

How might we reduce the manual labor for Food Roots Harvest and streamline clients’ ordering experience?

sneak peek

The Solution

A fully functional produce ordering app that is customized to Food Roots Harvests’ unique needs as a nonprofit.

Skip to see full solution
Research & explore

Understanding FRH and its users

Before we began designing, my dev project leads and I held multiple scoping calls with Kyle, our APIFM and FRH liaison. Through our discussions, I discovered some constraints that would serve as a frame for our designs.

calendar icon

Delivery dates and order deadlines

Because of a limited number of employees, Food Roots could only deliver on Mondays and Fridays. As a result, there were two order deadlines ever week. This meant that it was imperative for us to remind the user when they must order by to have their shipments arrive on time.

search icon

Developer bandwidth

Due to a tight timeline, our development team did not have the bandwidth to develop more complex features, like a search bar. For us, this meant that we had to think creatively to still give the users a seamless experience.

Understanding the product ordering landscape

As design project lead, I was tasked with guiding my team and mentoring them throughout the design process. For our first step, we conducted a competitive analysis on 9 grocery / produce delivery apps, comparing their features and noting their respective strengths and weaknesses.

FRH competitors from analysis

Common areas we discovered among the competitors include categories for produce, subscription models, and features like favoriting or past orders. These all served as inspiration for our own features to design.

What are the pain points of current users?

As I spoke with FRH staff during scoping calls with the other project leads, I began to gain a better understanding of their problems. However, we still didn’t have enough information to comprehend the challenges that FRH clients go through.

To better understand who our users were, we conducted 5 user interviews with current clients of Food Roots. Our participants came from a range of occupations, such as restaurant owners, chefs, cooking instructors, and community organizers.

APIFM Affinity map

After we wrapped up our user interviews, I taught my team how to draw an affinity map to group our findings into categories. By grouping similar notions together, we were able to discover themes such as delivery patterns, tech literacy, order frequency, and purpose.

What does it all boil down to?

schedule icon

Ordering patterns

Order dates don’t change that much, but the quantity and contents of the order do change occasionally.

eye icon

Accessing items

Users want to be able to see more items at once and to select frequently-purchased items easily.

cloud raining on a sprout icon

Seasonal freshness

Users want to see which items are immediately available, especially seasonal ones, and see real-time updates.

Hand holding apple icon

Community connection

Users enjoy FRH because it aligns with their belief in supporting their community, but they don’t feel a connection to the local API farms they purchase from.


Starting from scratch

As design project lead, I drafted up very lo-fidelity designs of our overall app to construct a general foundation based upon my discussions with APIFM. I assigned each team member a feature to iterate on and gave them the creative freedom to continue designing on top of them.

As a team, we discussed and deliberated on which designs should serve as the basis for our next phase in designing, which eventually took us from Phase 0 to 1. By leading design critique sessions and using knowledge from my meetings with APIFM, we scoped out the architecture of our designs.

FRH lo-fidelity designs

Adding personality and life

After many meetings to narrow down and decide between iterations, we began to explore color and structure more. This is where we began to create and implement our design system.

FRH mid-fidelity designs

An unexpected challenge

Communicating with stakeholders can be tricky in understanding everything, given that there are so many layers to creating our mobile app. Halfway through our design process, it was revealed that produce availability is always changing. The farmers update APIFM weekly with what fruits and veggies they have for that week alone. One week there may be bok choy, but the next week, it could be unavailable.

Thus, users cannot make orders a week in advance, making repeated orders or subscriptions difficult, as produce availability cannot be determined.

FRH changing subscriptions to past orders designs

Repurposing Subscriptions design

With this new information, we had to quickly adapt our Subscription feature into a Past Orders page. That way, users can still revisit their previous orders, and also be able to edit quantities and contents when repurchasing. If an item is no longer available, then a pop-up would appear to warn the users accordingly.

usability testing

Validating the Designs

FRH user interviews

Upon making the appropriate changes, the team conducted usability testing to validate our designs. We gave participants a series of tasks to test how they organically interact with the app.

Overall, we received good feedback; the app is efficient, easy to use, and visually appealing. It felt familiar to most participants, as it shared some similarities to other major shopping or grocery apps.

However, there were still areas of improvement.


Tiny font size

The text was a little small (12 pt), making it hard for users to click on the correct buttons.

Un-editable past orders

Although they may need the same item, restaurant inventories are always changing, so the quantity varies weekly by what is still available in their stock.

right arrow

Increased font size across design system

We upped the font size to be 16 pt across all body text, with only small details in 14 pt.

Fully editable past orders

We made the quantity flow in “Past Orders” editable. If an item in a reorder is no longer available, a warning message pops up.

Food Roots Harvest Header

A world of produce


Users can browse, favorite, and purchase produce from Food Roots Harvest.

Features like sort, filter, and favorites streamline the browsing experience for Food Roots Harvest users.

Stay ahead

Calendar & order deadline

Before users begin browsing, the Calendar pops up to prompt them to select a delivery date.

By doing so, the marketplace updates to accurately reflect the produce available at that time. The unique order deadline gives users a gentle reminder of when to place their order by.

Easy checkout

Cart & checkout

Within the Cart, buyers can see all of the produce they added  and finalize their checkout details, like address, quantities, and totals.

An order minimum popup appears to notify users of the minimum dollar amount they need to reach for free delivery.

Simplified order flows

Past Orders

For clients like restaurants who order the same thing every week, Past Orders can help speed up their purchasing process.

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

Make it yours


To edit personal information, users can access their Profile. Contact information, delivery addresses, and avatar images can be edited here.

The avatar images were designed and created by our own team!


What I Learned

My journey with LA Blueprint and Food Roots Harvest taught me an endless amount about leadership, design practice, and teamwork. I believe Blueprint was one of the best college experiences that I've had, especially since we built a product that would actually be used by the nonprofit and affect thousands of community members.

Of all the things I've learned, here are the biggest things that I took away from the 7 month long project.

Client communication

One should never make assumptions about what the client may want or need, and just ask!

It was very overwhelming at first for me to be the nonprofit liaison; my team relied on me to understand the nonprofit needs. There were so many things to handle, like the marketplace closing on certain days of the week, or how the address needed to be known beforehand to calculate order minimums. Through this, I learned that communication of product requirements needs to happen as early as possible and in full detail.

Dev & designer compromise

Since our dev team was relatively inexperienced and new to coding, we had to compromise some designs and features to ensure that it was able to be produced. It really taught me a lot about empathizing with developers and understanding that designers need to be rooted in reality (code) and comprehend the work and bandwidth that goes into creating a product.

APIFM team at our final demo dayAPIFM team bondingAPIFM team pizza making nightBlueprint at the beach

Thank you to the all the APIFM staff, clients, and especially my amazing team! Couldn’t have done it without every single person :) <3