Work > FoodRun Mobile App
FoodRun:
A Mobile App Designed to Enhance your Cooking Abilities
Project Goal
End-to-end App Design
Conceptual project
Duration: 8 weeks
Role
UX/UI Designer
UX Researcher
Tools
Figma
IKEA Place App
VLC Media Player
Dovetail
THE PROBLEM
What should I make for dinner?
One of the biggest hindrances to home cooking is the thought of deciding and planning what to cook and efficiently gathering the necessary ingredients.
SOLUTION PREVIEW
FoodRun is an engaging mobile app designed to help aspiring home cooks level up their culinary skills at home while saving time on meal planning through a gamified approach.
Effortless Recipe Storage
Enable users to quickly gather recipe information by eliminating the need for manual data entry
Users can store all their recipes in one location
Easy to find Any Items
Enables users to find any item at any partnered grocery stores effortlessly
Efficiently navigate to specific items or optimize the shopping route for the items on a shopper’s list
Engaging & Friendly grocery trips
Providing users with various tips to prepare their shopping trips
Enable users to earn badges, level up, and build their Cookbook by completing shopping quests
THE BACKGROUND
How did it all start?
Driven by a passion for cooking, food, and travel, I faced a dilemma in choosing my UX project. So, I took to Instagram, posting a poll on Instagram to gauge the preferences of my audience between traveling abroad and using a recipe for cooking.
Based on the poll’s response, I conducted a user survey with 68 people for home cooking to delve deeper into my audience's profile and preferences. I ultimately used the insights gathered as a valuable screening tool to shape my UX project.
64.8%
Use a recipe when they cook
78.8%
Use social media to discover recipe and bookmark it
90.9%
Users shop grocery in-store
90.9%
Use online web recipes
SECONDARY RESEARCH: COMPETITIVE ANALYSIS
How are my competitors doing?
Since more than 90% of the people in my survey use digital recipes from different platforms, I decided to check out my competitor recipe apps and other apps with shopping list features.
Competitive Analysis Key Takeaways
These apps fail to incorporate an engaging approach to make cooking fun and exciting.
Grocery lists often lack a feature for finding specific items in-store.
Most recipe apps are not optimized to make grocery shopping easier while in-store.
The direct competitor apps are Cooklist, Meal Board, and Lollipop Ai. The secondary competitor is Target App. The indirect competitor is the Cozi Family Organizer App
THE RESEARCH: USER INTERVIEW
Cooking enthusiasts want an efficient and time-saving process when they prep before cooking
I conducted remote, moderated user interviews with:
6 participants via Zoom
All use digital recipes
In their late 20s or early 30s who value convenience and efficiency
User Interview Key Takeaways
Grocery shopping is a stressful and frustrating experience and users want a convenient experience that saves them time and effort.
Users want a quick way to access and organize their recipe collection to save time and effort in meal planning.
This is a section of the affinity map regarding the pain points the users are experiencing.
“If I can't find something then I can't make what I want.”
- Participant 3
DEFINING THE USER & USER JOURNEY
Meet Emily, the New Yorker who embraces convenience and finds physical grocery shopping overwhelming.
To better guide the design and empathize with the target user, I synthesized the user interview and created the convenience cook persona. I decided to focus on app design for users with urban lifestyles, as my competitor analysis revealed a lack of shopping experiences tailored to those living in pedestrian and public transport cities.
While looking at her user journey, it hit me that the convenience cook gets the most negative experience during the shopping phase. This led me to focus on developing features that assist her in finding items and enhance her cooking journey with delighters.
Emily’s user journey during her shopping phase has the worst experience in her cooking journey.
DEFINING THE MVP
How might we help Emily efficiently shop for all the necessary ingredients from her recipes?
After considering the user's goals, motivations, and pain points regarding time consumption, the reliance on recipes for cooking, and the frustration of not being able to find and gather all desired ingredients, I settled on these core functions:
Shopping List Integration
Provide a convenient way to quickly generate a shopping list from user’s recipe.
Rewards & Badges
Incorporate badges and rewards to provide a fun experience with grocery shopping
Item Weight Warnings
Provide weight warnings for urban residents without a car to efficiently plan their grocery trip.
AR-Wayfinding Map
Provide an optimize path for the user to get their shopping done quickly
Personal Cookbook
Provide a central location for users to store all their favorite recipes from different locations.
Count Tracker
Help users keep track of all the items they collect during each grocery trip
DEFINING: INFORMATION ARCHITECTURE
Constructing the immersive and gamified experience architecture
When I first started working on the project, I wasn't quite sure how to structure the app. So, I decided to create a user flow that mapped out the user's journey and MVP features. This helped me visualize the optimal path for users to take in order to accomplish their goals while using the app. (Due to time constraints, selecting ingredients to add to the shopping list from the store navigation would have to come after MVP)
Testing MVP's Structure: Low-Fi Wireframe Flows Verify Architectural Integrity
I created a basic sketch of the wireframe and made a simplified representation of the main screens to check the site map, user flow, and placement of UI elements. This process helped me identify the crucial components of the system and the necessary actions that need to occur according to the user flow. It allowed me to determine which UI elements were required for the mid-fidelity design and visualize how users might interact with the app to accomplish their tasks.
EARLY DESIGN
Conducting a guerilla usability testing to catch design issues early
To solve the problem of finding ingredients, I planned to implement AR wayfinding as a feature. However, since similar functionalities already existed in other apps, I thought to differentiate my app from competitors by gamifying the experience to avoid it being perceived as just another recipe or grocery app. Thus, I introduced the concept of users embarking on quests and rewarding them upon completing their shopping trips.
Faced with resource limitations for developing AR technology, I found a solution using the IKEA Place app to test AR flow and simulated AR experiences within the Foodrun app using Figma.
Testing early with just 3 users through a remote, moderated test, I could make sure that my early user flow screens made general sense and didn't cause major frustrations.
Guerilla Test’s 3 Key Takeaways
The concept of “Quest” and Grocery shopping trip mixed is not easily clicked
Users were confused by the design when asked about their grocery store commuting habits, as they associated it with map navigation, despite the goal of gathering early information for urban users to plan their trips effectively.
Users wanted a more efficient way to add multiple recipes without the need to repeatedly switch between the Cookbook and go through a time-consuming process
MID-FI ITERATION
Designing a tutorial experience that provides guidance to first-time users at the right moment to reduce confusion
After incorporating the feedback from my guerilla usability tests, I iterated on my mid-fi wireframes.
I focused my iteration on improving upon:
For new users, adding a guide character to convey necessary information
User experience related to how users transport their groceries back home
Adding a new flow that allows user to add multiple recipe quickly and easily
USER TESTING
Evaluating User’s comprehension of the app’s purpose
With the new iterated version of the design, I created a user test plan and conducted another round of remote, moderated user testing with 7 participants to evaluate the user’s comprehension of the app’s purpose and validate the task difficulty in the new design.
Overall, all users understood the app’s purpose and the gamified approach of the solution.
80%
Task Completion Rate
4.1
Average Difficulty
1= Extremely difficult
5= Extremely Easy
4.5
Average Ease of Use
1= Extremely difficult
5= Extremely Easy
“FoodRun is an APP helping you plan your meals for the week, figuring out where to buy them, how much it would approximately cost, and then also save all the recipes that you use too.”
- Participant 3
ITERATION 2
Introduce plot twists to enhance the user experience
Initially, I thought the MVP should center around helping Emily with her grocery shopping for recipes. However, user testing revealed that the app would primarily be used by people who were unsure about store locations or ingredients and in a time crunch.
The MVP's primary focus shifted from grocery shopping to meal planning, as the low likelihood of urban users being unfamiliar with their local store layout made it the main reason for user engagement with the app rather than solely finding an item.
1. AR wayfinding technology is better suited as a supportive tool rather than the primary focus of the app.
2. Users encountered confusion due to the absence of system feedback upon task completion
3. It's the design of the experience that truly brings the gamified aspect, rather than just the wording used in the copy
DEFINING THE BRAND
Let’s make Emily’s Meal Prepping & Shopping Experience Fun
Primary and neutral color choices were made based on the user's perception of grocery shopping as overwhelming. Additionally, these color choices align with our brand values of inspiring joy, positivity, service, simplicity, and innovation, aiming to create a delightful and enjoyable shopping and planning experience.
The logo emulates a Daikon vegetable running, reflecting the use case and ‘time-saving’ nature of the app.
THE FINAL DESIGN
After resolving 2 rounds of user testing & improvements, users could complete and understand the MVP critical flows. After resolving 2 rounds of user testing & improvements, users were able to complete and understand the MVP critical flows.
FUTURE STEPS
Looking Forward to FoodRun’s Future
Multiple Shopping List
After conducting competitor research, it was found that numerous shopping list or to-do-list apps offer the functionality of creating multiple lists, enabling users to have separate lists for different purposes. To align with the gamified concept, users can embark on various quests associated with each list.
List Sharing to help Increased User Base
When considering the business goal, adding an option for users to share their lists with their family, friends, and even their partners. This would not only help us expand our user base, but also create some excitement by adding a scoreboard where users can compete with each other.
Measuring App Success: Quantifying User Motivation for Home Cooking
Right now, the design don't have a concrete way to measure how much the app actually inspires users to cook another meal. But if the app was build and users have tried cooking their recipe that they shopped for, I can add a quick rating feature to ask them if the app motivated them to cook another meal at home. This way, I can gather quantitative data to see if FoodRun is successfully encouraging users to cook more often.