- Case Study
Food Roots Produce Ordering App
Developing an efficient system for Los Angeles restaurants & nonprofits to support community health by ordering produce. 🍊 🥦
- Login Screen
- Produce Catalog
- Search Function
- Order Revision Function
- Favorites Section
- Help Section
Introduction
What is APIFM and Food Roots?
Asian Pacific Islander Forward Movement (APIFM) is a Los Angeles nonprofit that focuses on community health and justice. The organization advocates for policies that improve people’s quality of life. APIFM also organizes programs related to air quality, environmental access, and additional social issues.
Food Roots is a program run by APIFM staff. APIFM sources fresh fruits and vegetables from local farmers and delivers them to restaurants, community centers, medical facilities, school and nonprofit organizations which make bulk orders. The sales proceeds fund educational workshops to help LA County residents lead healthy lives.
Short on Time?
Why did I choose this project?
I decided to explore app development for Food Roots to increase their efficiency and produce sales, because I support their mission of helping people lead healthy lives. I’ve been a volunteer in the past, consulting on technology, Google Sheets and operations. Now, I’d like to make a larger impact by designing a mobile app.
Timeline
Beginning of March to June 2021
Team
APIFM program manager, Food Roots staff, test users & myself
Problem Statement
Food Roots needs an easy-to-use mobile app for nonprofit and restaurant leaders to order fresh produce from local farmers, because increased sales will fund community workshops that help people in Los Angeles live healthier.
My Role
From beginning to end, I was the sole UX/UI designer and research lead for this project. I collaborated with the nonprofit’s Program Manager and Food Roots team to identify test users. We conducted multiple rounds of user research and accessibility testing.
Our research has informed our product from wireframing to design reiteration. I created a prototype of the Food Roots app.
What's Our Guiding Process?
Understanding Our Target Audience
To design a useful product, we needed to understand and empathize with our target audience’s top values and priorities.Â
User Survey Results
In a survey of 20 participants, we found that our target audience:Â
- accessed email and browsed the Internet 500% more often on mobile than desktop.
- want to know which produce items are in season and which are unavailable.
- want the ability to revise orders and get email confirmation.
Our users ultimately wanted a quick and easy way to:
- Order fresh produce from local farmers through their phone andÂ
- Support APIFM’s community work.
We created two composite user personas, Jane Trinh (nonprofit worker)Â and Martha Ramirez (restaurant manager), based on the survey results.
Jane Trinh
Nonprofit worker who bulk orders fruits and vegetables for clients, co-workers and family to eat fresh and save money
- Age 25
- Cal State LA
- English - Fluent, Vietnamese - Conversational
Goals
- Excelling at work to get a pay raise
- Cooking meals with friends and family for upcoming holidays
Frustrations
- Lives in a food desert, where the nearest organic grocery store is a 90-minute bus ride away
- Can't afford a car to drive and transport large purchases
Guiding Beliefs & Values
Martha Ramirez
Restaurant manager who wants quality ingredients to feed her customers and kids delicious dishes
- Age 31
- Stanford University
- English - Fluent, Tagalog - Fluent, Spanish - Conversational
Goals
- Winning Best Ramen Restaurant in Echo Park this year
- Creating the perfect meal plan for herself and her growing family
Frustrations
- Farmer's market nearby runs out of fresh Asian produce within first hour
- Can't drive long distances or lift heavy objects anymore due to temporary disability and increased health risks
Guiding Beliefs & Values
Mapping Out the User Journey
Log into the app
Select Produce Items
Confirm & Place Order
Users like Jane and Martha use the Food Roots app to bulk order fruits and vegetables. We have to identify what actions must a user take to go from Point A (Login) to Point B (Placing Order).
In order to do this, the APIFM Food Roots program manager and I used the “Red Routes” exercise.
Finding and Defining the "Red Routes"
Borrowed from British terminology and roads, “Red Routes” refer to key paths our users take to get from point A to point B.Â
The program manager and I brainstormed what actions our users Jane and Martha take in the app. Then, we assigned them importance by frequency of use and how many users would use it. Then I color-coded the importance by the intensity of the red hue, with vibrant red equaling the highest importance and priority.
"Red Routes" Takeaway
This “Red Routes” exercise helped us see which paths to focus our energy on. We needed to fine-tune these Red Route paths to be as smooth as possible.
Turn your phone sideways to see the whole chart.
Used by Few
Used by Some
Used by Many
Used by Everyone
Used Always
- Favorites
- Sort by Category
- Login
- Item Add
- View Cart
- Confirm Order
Used Frequently
- Repeat Past Order
- Search Item
- Back Button
- List Item
Used Occasionally
- Review Past
- Upcoming
Used Rarely
- Cancel
- Help Email
- Social Like
- Password Reset
- Help Menu
- Logout
Wireframes to Prototype
Logo & Colors
Food Roots already had an established logo and colors (orange and green) so I worked with those assets.
Food Roots Orange - #F8991C
Food Roots Green - #4D9B46
These fresh colors remind me of a carrot, similar to how Instacart looks like.
Font Selection
The Food Roots team frequently used Josefin Sans on their website. I adopted this as an H1 Title font since this was a suitable display font, but I chose Roboto for body text and H2-H4 fonts since I wanted a clean sleek font to enhance readability.
Beginning Sketches - Wireframes
Low Fidelity Mockups
Digital Wire Frames & Flow Map
Usability Testing
To reduce likeability bias as well as leading questions, we went with an unmoderated usability study through Maze which produced heatmaps, recorded clicks, tree diagrams and other data for interpretation.
We recruited volunteers from our friends and families who were not very familiar with Food Roots to avoid proximity biases.
Test Dates & Length
The study was completed on April 8th, 9th and 10th, 2021. Each test session lasted between 5 to 10 minutes with users going at their own pace.
Participants
All ten participants, aged 22 to 73, completed the test from their own homes. The majority were located in Los Angeles, but we had test users from Seattle as well as Germany.
Details
Each participant completed tasks and gave feedback about 4 processes: 1) Login, 2) Add item to cart, 3) Remove item, 4) Confirm details and complete order.
Common Themes Affinity Mapping
We tested usability with 10 users on Maze, and found common themes about login, ordering and additional features request.
Read Usability Study Results & Design Revisions (HTML)
Feedback on Ordering Experience
People click on where the bright colors are and need help identifying buttons to continue ordering.
- 9 out of 10 users said the ordering process was easy to understand. One user said it was slightly hard due to button visibility.
- One user wasn’t able to find the add item button, and asked about additional ways to add/remove items.
- Feedback helped us consider the scenario if users wanted to order in partial versus whole number increments.
While removing items, could you remove partial amount instead of the whole item?
Revisions based on Feedback on Add Item Button
We aimed to make ordering easier and increase the visibility of clickable elements like buttons.
- We moved the Add Item button up, next to the quantity.
- We resized the produce photo to fit better, and remind people their purchase helps nonprofits.
- We added a decimal place in case users wanted to order in partial amounts or half increments.
We saw opportunities to make other buttons more visible throughout the app.
- Search button highlighted in orange, so users see the feature.
- Add to Cart changed from gray to green, so it looks like an active button
- Add More Items button highlighted in light green during Order Details page to encourage clicks.
We continued testing and design reiterations for two more rounds, until we arrived at the final prototype. The prototype is available below.
Feedback on Login Experience
We discovered our bias in assuming tech literacy.
- 9 out of 10 users said the login process was easy to understand. One user clicked on the Login Help.
- One user told us that they were confused because they weren’t familiar with the login credentials given.
- We saw that the login instructions could have been made clearer that we’d login using a default profile for our fictional user Jane Trinh.
One User Hit" Reset Password" & Asked How to Register
- Test design: We saw that the login instructions could have been made clearer that we’d login using Jane’s login.
- Feature: We saw that there was a request to not create an extra login, but integrate with existing technology i.e. Google Sign in.
Revisions based on Registration Feedback
The feedback led us to add a one-click sign in through Google in the app design.
We aimed to make login easier and less time consuming.
- We designed a Sign in with Google button, in case users forgot their login information.
- This Google Sign in also solves for the account registration request, so users can create an account with ease.
Feedback on Ordering Experience
People click on where the bright colors are, and need help identifying buttons to continue ordering.
- 9 out of 10 users said the ordering process was easy to understand. One user said it was slightly hard due to button visibility.
- One user wasn’t able to find the add item button, and asked about additional ways to add/remove items.
- Feedback helped us consider the scenario if users wanted to order in partial versus whole number increments.
Revisions based on Feedback on Add Item Button
We aimed to make ordering easier and increase the visibility of clickable elements like buttons.
- We moved the Add Item button up, next to the quantity.
- We resized the produce photo to fit better, and remind people their purchase helps nonprofits.
- We added a decimal place in case users wanted to order in partial amounts or half increments.
We saw opportunities to make other buttons more visible throughout the app.
- Search button highlighted in orange, so users see the feature.
- Add to Cart changed from gray to green, so it looks like an active button
- Add More Items button highlighted in light green during Order Details page to encourage clicks.
Revised Prototype
Click to expand & test prototype.
Key Takeaways
Lessons Learned
- Don't assume tech literacy. Design clear login instructions for all levels.
- Make sign-in seamless. When possible, create easy logins without extra registration.
- Clickable elements must be visible. Make it easy for users to find search and add item buttons.
This design process made me question my biases and assumptions, especially about tech literacy and how people would engage with the prototype.
One thing I’m proud of is how we found a diverse group of testers. It’s helpful that our test users are further away from the Food Roots program, so they can evaluate the app in a more neutral light.
In the next few iteration rounds, I’d like to pursue A/B testing to see how we can test ideal button placement to increase clickable element visibility.
Next steps & Recommendations
I’d love to continue designing the Food Roots app. If we were to go forward, here would be my recommendations.
- Testing – Do it again. Redesign and go through another round of user testing to see if there are perceivable improvements in user experience.
- Research best practices on how to design clickable buttons and how to use clear language during testing.
- Consider doing A/B testing in a moderated study to ask user about their preferences in app design and why.
- Test with more users who vary in tech literacy. Perhaps we’ll find more learnings and will design a better product when we have an app everyone can use.
Commitment to Accessibility
Our testing reminded us that accessibility must be a top priority.
In our design, we followed WCAG Standards for contrast and large text considering users with visual impairments. We aim to increase button visibility too. If we were to go further into product development, we hope to incorporate alt-text for screen readers and other best practices during development, and continue learning through testing with diverse participants.
A Round of Applause to...
My friends and loved ones. They have inspired me to continue pursuing this project past the Google UX Certification course.
Thank you to my design mentors at r/Graphic_Design, Charisse Yeh, Andrew Chen, and JJ Garrido and friendly internet strangers who advised on this project. I thank Amanda Walujono and Kiley Chang, whose encouragement and kind words motivated me through this process.
Last but not least, a huge thanks to Kyle Tsukahira and the APIFM team. This project quite literally wouldn’t have existed without you.