A marketplace promoting Asian produce, in partnership with the nonprofit APIFM
role
Design Project Lead of team of 3 designers
impact
Improve 10,000+ community members access to Asian produce
timeline
January - June 2022
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.
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.
🌾 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
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.
Snippet of what FRH’s spreadsheet looked like. Values would be copy and pasted between different sheets and columns. Ahh!
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.
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.
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.
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.
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.
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.
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.
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.
Ordering patterns
Order dates don’t change that much, but the quantity and contents of the order do change occasionally.
Accessing items
Users want to be able to see more items at once and to select frequently-purchased items easily.
Seasonal freshness
Users want to see which items are immediately available, especially seasonal ones, and see real-time updates.
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.
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.
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.
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.
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.
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.
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.
Marketplace
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.
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.
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.
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.
Profile
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!
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.
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.
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.
Thank you to the all the APIFM staff, clients, and especially my amazing team! Couldn’t have done it without every single person :) <3
Thanks for stopping by!
michellekou@gmail.com
