App Prototype: Munch
Socializing Meal Kit Delivery Apps
Timeline
12 weeks
Tools/Skills
Figma, Procreate, Adobe Suite, Prototyping, Branding, UX Research
Role
UI/UX Designer, UX researcher
My Scope
Responsible for project start to finish, later focusing on full idea development to design execution of socials page and logo prototyping.
Problem
The convenience of food delivery services isolates people from their community, contributing to rising feelings of loneliness rising since the covid-19 pandemic.
Solution
We socialized meal kit apps by creating a socials page in the app, connecting users with each other through their experience with Munch meal kits, ultimately strengthening customers’ bond with the company and their product.
Introducing...
Munch
Munch is a customizable meal kit delivery app that aims to foster genuine human connection through food in a rapidly isolating society.
Key Features
1. Build customized meal kits, delivered to your door
A. Answer meal related questions to get customized meal kit recommendations.
B. See macros to find meals that match your nutritional needs/goals
2. Explore new meals to add to your meal kit
A. Filter recipes by: difficulty level, time, and dietary restrictions
B. Favorite recipes to save for your next meal kit order
3. Connect with Other Munch Patrons in the Socials Page
A. Post your meal kit creations
Share meals from your Munch meal kit to the community!
B. Save other user’s meals for your next meal kit order
click on the bread tag and heart the meal to save it
This adds the meal to favorited recipes, which will show up first when ordering meal kits
Defining the Problem
Analyzing what is missing from the current meal kit market
Initial Research
During the pandemic, the use of automated and remote food services increased significantly.
Kim et. al (2023), McKinsey & Company, Cloud Kitchens
With the convenience and automation of the food industry came an unfortunate tradeoff: less human interaction.
Consumers recognize this tradeoff as well. Research shows that many still prefer in-person interactions because they fulfill a deeper need for genuine human connection—something digital platforms struggle to provide.
Belonging Forum, WHO (World Health Organization)
Ultimately, while delivery services offer unparalleled convenience, they fall short in providing the sense of community that traditional, in person food establishments provide.
Interviews & Survey Insights
Interviewees and survey respondents were adults ranging from ages 20 to 52, with occupations from college students, office workers, and stay at home parents.
1. Find meal kit delivery services convenient, but are often deterred by how intimidating and expensive they can be.
2. Preferred supporting in-person food providers, noting that bigger companies like Hello Fresh feel “too commercial and impersonal.”
3. Want to see more image reviews on the meal kit service websites to know what the meals in the meal kits look like in real life.
Our Goal & Role
How Might We...
Humanize and socialize meal kit delivery apps, fostering more genuine connection amongst users in a digital platform.
My Role:
I worked in a team of 2 other UI/UX designers. After deciding what main features we wanted to include, we delegated the main pages. I took on the idea I proposed: the socials page.
Understanding Our Users
User Persona
Joanne
25 / Female
BIO
Joanne is an investment banker. Because of her labor-intensive job, she doesn’t have a lot time to cook for herself, especially not for regular grocery runs. However, she wants to live a healthy lifestyle while eating fun and new foods!
PAIN POINTS
Not enough time to buy, prepare, and cook groceries regularly
Ordering delivery is her current solution, which makes tracking macros very difficult
GOALS
Eat a good variety of food
Have a balanced diet
Track macros for muscle gain
Cook meals regularly without spending a lot of time
User Flows
Early Ideation
Lo-fi wireframes
We started out by each creating our own version of the lo-fis to see what vision everyone came up with.
My lo-fi wireframes, done on Goodnotes (shoutout to my fav)
Mid-fi wireframes
After discussing our different lo-fis, we consolidated our ideas to create mid-fis ready for testing.
Testing, Feedback, and Improvements
We went through 2 rounds of usability testing with 2 versions of our mid-fi wireframes. After getting valuable feedback, we developed appropriate iterations of our prototype with improved features.
Meal Tags
Feedback:
“Can I save the meals other people post? Or am I only allowed to like or comment?”
“I’m not sure what’s different about this social page compared to other social media platforms”
gives users limited interaction ability
inadequate functionality as company marketing tool
Solution:
Meal tags lets users tag the meal they’re posting, like one would a person.
If a user wants to try a meal they see on their feed in their next meal kit order, they can “heart” the meal tag to save it.
differentiates Munch with unique, contextual interaction
benefits company through natural buzz marketing
Search bar placement
Feedback:
“I don’t know how to find people I don’t follow already”
“I thought the search bar was for the whole app, not just the social page”
poor visual hierarchy & UI
Solution:
Improved visual hierarchy
Heightened user understandability
Final Prototype
Why “Munch”?
Oxford Languages
When I suggested this to the team, it was because Ice Spice’s song Munch (Feelin’ U) had been stuck in my head that week. However, the more I thought about it, the more it was the perfect name for our app.
Memorable: one syllable and simple, Munch was easy to remember.
Playful: “Munch” has a lighthearted and playful connotation, matching the vibe we envisioned.
Animated: Its in-the-moment and audible characteristics of the word munch's definition gave Munch a distinctively animated energy.
Design System
Logo
After multiple unsuccessful attempts, I sketched a sandwich with a bite mark on it, which became our logo.
Sandwich: a universally loved, on-the-go, and nutritious/balanced meal
Bite: the “munch” factor of the logo (symbolizes active customer interaction with the food
Color
Primary Color #008575
Reason: stable, professional, and welcoming + the color psychology of health and trust
Accessibility: met the color contrast ratio standards of 4.5:1 for normal text
Next Steps and Learnings
Responsiveness: for this project, we made Munch a strictly mobile app. However, I believe it has just as much potential as a website and want to take responsiveness into consideration for my future projects.
Dark mode & color variables: we wanted to add a dark mode option, but was unfortunately too far into our design to incorporate color variables. Next time, I want to make sure to add that option for greater user usability and accessibility.
More modern UI: I admit, I thought the drop-shadows on our buttons looked cute. However, I realized after gaining more experience that they probably weren’t the best design choice to make when considering contemporary design trends. Frankly speaking, they were outdated! For future projects, I’d be more sensitive to design trends to make sure I was designing interfaces that looked best.
