Foody
UX Design | Google Certificate Project | Figma | April 2022
Foody is a mobile food delivery app designed for busy commuters and working professionals who care about eating healthy but struggle to find the time to cook. The goal was to create a seamless, user-friendly way to order fresh, nutritious meals without hassle or decision fatigue.
Problem
Busy workers and commuters often lack the time or energy to prepare healthy meals, leading them to make less nutritious choices out of convenience.
Goal
Design an app that makes it easy for users to discover, order, and receive fresh, health-conscious meals with minimal effort.
Design Process
🔍 Research
Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to cook proper meals.
This user group confirmed initial assumptions about Foody customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included challenges that make it difficult to get groceries for cooking or go to restaurants in person.
Pain Point
Persona
Based on my user interviews and research insights, I created two personas to guide my design process. These personas helped ensure I focused on the real needs, motivations, and frustrations of potential Foody users.
✏️Starting the Design
Outline an User Flow
“I created a user flow showing how a user orders a meal from restaurant selection to payment, helping define essential screens and interactions needed for a smooth ordering experience.”
Creating a storyboard
To explore the ideal user flow and context of use, I created two types of storyboards: a big-picture storyboard and a close-up storyboard. These helped visualize both the overall experience and the detailed interactions within the app.
Big-Picture storyboard
The big-picture storyboard focuses on the user’s daily life and environment. It illustrates the broader journey, including motivations, challenges, and external factors, to highlight why and when the product is useful.
The close-up storyboard focuses on specific touchpoints within the app. It breaks down the task flow, showing step-by-step interactions to help ideate clear, intuitive screen-level experiences.
Creating wireframes
Based on the insights gathered from research and ideation, I created a series of wireframes to define the structure, layout, and functionality of key app screens. I began with paper sketches to explore multiple concepts quickly, then refined selected ideas into digital wireframes.
Paper wireframes(w/a pen and paper)
Close-Up Storyboard
To quickly iterate and visualize layout ideas, I sketched multiple versions of each app screen. I marked the ones best aligned with user needs, using stars to guide the transition to digital design. This process helped focus on usability, clarity, and core functionality from the start.
Digital wireframes(w/figma)
Building on the paper concepts, I created digital wireframes to lay out the app’s key screens. I prioritized clear navigation and accessibility, key pain points identified in earlier user research. These wireframes served as the foundation for the prototype and included screens from the home page to checkout.
To represent a full user flow, I designed 11 screens, covering: Home & restaurant listings, Menu browsing with filters, Item selection, Order summary & checkout and Confirmation screen
Low-fidelity Prototype
Using the completed wireframes, I developed a low-fidelity prototype to simulate the key user journey: browsing, selecting, and ordering food. This prototype was used in the usability testing phase.
🔄 Refining the Design
Building a research plan
To test the early concept of the design, I decided to conduct a research to get some insights to improve the low-fidelity design. First, I built a research plan to test my prototype.
To evaluate how easy it is for users to complete core tasks in the app, I conducted an unmoderated usability study using a low-fidelity prototype. The goal was to understand whether users could navigate the ordering process smoothly, and identify areas for improvement.
Usability Study
I used a spreadsheet to take notes about the entire usability study in one place, and here are the results.
Getting insights from observations
To better understand users’ thoughts and behaviors during the usability study, I collected all feedback into one place and used an affinity diagram to group similar comments by theme. This helped surface key insights around how users interacted with the app and where improvements could be made. I grouped feedback into categories like this.
Categorized findings into themes
Based on the affinity diagram, I identified three key usability themes that emerged during the study — areas that could create confusion or friction for users and should be improved in future iterations.
Insight Identification
Based on usability study findings, I identified three key insights that needed to be addressed to improve the user experience. I then updated the prototype accordingly to better meet user needs.
💡 Insight #1: Lack of Clarity Around “Fast Delivery”
Problem: Users were confused about what “Fast Delivery” meant — specifically, how fast is “fast”?
Solution: I clarified the estimated delivery time next to the "Fast Delivery" label so users can immediately understand the expectation.
💡 Insight #2: Redundant Category Screens
Problem: After clicking a category on the home screen, users were taken to another screen showing the same categories again, which felt repetitive and confusing.
Solution: I updated the flow so clicking a category leads directly to relevant restaurant listings.
💡 Insight #3: No Option to Edit Shipping & Payment Info
Problem: Users expressed frustration at not being able to edit shipping or payment details during the checkout process.
Solution: I added clear “Edit” buttons next to both fields so users can make adjustments easily.
Creating high-fidelity mockups and prototype(w/figma)
After refining the wireframes based on usability feedback, I created a high-fidelity prototype that reflects the final visual design, branding, and interactive flow of the app.
This prototype includes:
Updated UI with brand colors, typography, and imagery
Clear navigation and improved user flows (based on insights)
Interactive features that reflect real app behavior
Solutions to pain points discovered during usability testing
Key Mockups
High-fidelity prototype
The final high-fidelity prototype delivers a cleaner user flow for menu selection and checkout, while also addressing user needs with the option to edit order details.
User Journey Map
To identify potential obstacles and emotional friction points during the user experience, I created journey maps
Problem Statement
Based on the personas and user journey maps, I defined two core problem statements that this project needed to address.
Tina’s Problem Statement
Tina is a busy working adult who needs easy access to healthy food options because she doesn’t have time to cook but still wants to maintain a healthy lifestyle.
John’s Problem Statement
John is an exchange student who wants to explore diverse local foods but struggles due to language barriers and unfamiliar menu options. He needs a food delivery solution that offers clear, accessible descriptions so he can confidently order and enjoy local cuisine.
Value Proposition
Based on user needs identified through research and journey mapping, I defined four key pillars of value that the app must deliver.
Competitive Audit
Before diving into design, I conducted a competitive audit to explore existing solutions and gather insights about the current market. This helped me identify what’s working, what’s missing, and where Foody could differentiate itself.
🔍 What I Did:
Identified key competitors in the food delivery space
Reviewed their core features and overall UX
Evaluated strengths, weaknesses, and areas of friction
Analyzed how each competitor positioned their brand and spoke to users
💡 Key Takeaways:
Strengths: Streamlined ordering flows, well-designed filtering systems, customer reviews, loyalty programs
Weaknesses: Overwhelming interfaces, lack of customization (especially for dietary needs), accessibility limitations, and minimal transparency around food quality
Opportunities for Foody:
Better support for dietary preferences (vegan, allergy-friendly)
Multilingual support for international users
Transparent kitchen and food quality visuals
A more human, friendly brand tone
🎓 Takeaways
Impact
The app offers users an easy-to-navigate and helpful experience that supports their busy lifestyles.
“I think it's easy to navigate in general. Because it is organized by the types of food, I can easily browse and find what I want to order. And the fast delivery option seems to be useful as well. I’d use this app.”
- Peer feedback
What I learned
While completing this project, I realized that design is more than just aesthetics; it’s about solving real problems.
Through user research and usability studies, I learned the value of listening closely to users' needs and pain points. That user-centered mindset guided each decision I made and helped shape a product that’s not only functional but genuinely useful for real people.
