1
: persistently curious UI/UX designer with a child-like imagination and professional execution
2
: currently working on…
UCSD ACM's 2026 Hackathon Website
,
Fall 25 Events for Design Co
,
UCSD ACM's 2026 Hackathon Website
Socializing meal kit delivery apps.
mobile app
feature development
Gamifying the horizontal networking experience.
mobile game
user interface
conservation research
website redesign
Redesigning a research resource for Engineers.
conservation research
website redesign
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
15 MIN
30 MIN
45 MIN
60 MIN
60+ MIN
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.
Connect to Content
Add layers or components to swipe between.
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:
Removed “social” header & put search bar below the headers “friends” and “for you”
emphasize that search bar is social page specific
Added “search for people” text
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.
Mobile Game Prototype: Cafe Village
Game to Facilitate Horizontal Networking
Timeline
6 weeks
Tools/Skills
Figma, Adobe Suite, Multi-media Prototyping, UX Research, game development
Role
UI/UX Designer, UX researcher
My Scope
Responsible for project start to finish along with 4 fellow designers. Pitched and developed idea to gamify the networking process.
Problem
Students want to find networking opportunities for their career development, but face too many barriers to properly do so.
Solution
Gamify the networking experience with a mobile game that helps students approach networking in a more genuine and lighthearted manner.
Introducing...
Cafe Village
Cafe Village is a world-building networking game that connects students with shared career interests through virtual coffee chats. It emphasizes horizontal networking, connecting individuals in similar or adjacent fields to foster meaningful connections.
Focus on Horizontal Networking
We decided to focus on horizontal (peer to peer) networking versus vertical networking because we were aware that there's already an abundance of vertical networking platforms (e.g. LinkedIn). Instead of doing what's already been done, our team wanted to explore the more niche sectors within networking and see what could improve such sectors.
Key Features
Create your Networking Profile and Avatar!
Fill out info to complete your profile:
Name, Age, College, major
Connect your LinkedIn
Career interests and goals
Design an avatar, customized to best express yourself!
Start Coffee Chats in Coffee Lounges!
Explore Coffee Lounges catered to your career path(s)
View other players’ profiles
Initiate coffee chats through chat request (dm) → leave lounge to Video Meeting
Add Shared Characters to Your Village!
Users can view their shared created characters on their homepage.
progress bar at the top of the screen that tracks the points earned from coffee chats
points unlock village customizations
Chat with Multiple People in Group Chats!
Users can also join group discussions with those who share the same interests/lounges!
Reflect and record key moments from coffee chats in your diary
Once they have finished a coffee chat, users can click the “Diary/Reflection” icon on the bottom navigation bar which includes notes and information about the past 1:1 coffee chats they had.
Personalize your Comfort Level with AI
The “Settings” page allows users to disable or enable AI Coffee Chat notes which allows AI to record, transcribe, and create a summary of takeaways from the 1:1 coffee chats.
Defining the Problem
Why and what about networking is so difficult to students, early in their career development?
Research Goals
Learn what factors contribute to stronger, meaningful relationships and the impact of networking in professional development.
Understand specific user needs and frustrations when it comes to informal networking as college students.
Identify gaps and opportunities for improving the networking experience based on existing solutions/competitors.
Survey Insights
We received a total of 22 responses from undergraduate students regarding their experiences and opinions on networking and coffee chats. Our key findings include:
Most common topics for informal networking are career journey, skill-building tips, and goals and aspirations.
Coffee chats are intimidating and awkward for reasons such as anxiety talking to new people, not knowing how to approach people, or lack of good conversation topics.
Some users are reluctant to network and arrange coffee chats on platforms like LinkedIn due to lack of response, feeling intimidated, or not wanting to come across as impersonal
Many expressed a need for conversation aids, scheduling support, “open to coffee chats" indicators, and overall guidance with networking.
"Networking seems difficult and intimidating because I don't really know how to approach it. I've had a couple coffee chats virtually in the past, and they've been extremely helpful, but I also feel that it's hard to find opportunities to actually have coffee chats."
Literature Review
Gaming and collaboration significantly strengthen social ties. Digital gaming creates spaces for interaction, and humans have a fundamental need for meaningful relationships as these affect cognitive behavior (Goncalves et al., 2023).
Networking is also key to landing jobs, with referrals becoming increasingly important (Laborde, 2024). The rise of Online Social Networks (OSNs) further boosts connectivity and collaboration (Wang & Ma, 2014).
These three factors shape how people build social and career connections, and we aim to integrate them into Cafe Village.
Competitive Analysis
Now, why would we need another networking app when LinkedIn already exists? In order for Cafe Village to truly be novel, we conducted a competitive analysis of 7 existing platforms and compared that to our own platform’s features.
Cafe Village addresses LinkedIn's limitations by offering a gamified and student-focused platform that simplifies networking, enabling meaningful connections without the need for premium subscriptions or navigating large, impersonal connection pools.
Animal Crossing
Cafe Village draws inspiration from Animal Crossing’s emphasis on community and customization. Unlike Animal Crossing's slow progression and repetitive tasks, Cafe Village focuses on dynamic, career-oriented interactions that foster meaningful connections and professional growth.
Coffee Pals
Cafe Village takes inspiration from Coffee Pals’ focus on fostering workplace connections over shared interests but tailors the experience for students by gamifying networking. Cafe Village provides structured, goal-oriented features to help students build lasting and purposeful connections.
Our Goal & Role
How Might We...
Make a novel networking experience that is more approachable and helps college students build and maintain meaningful long-term relationships with their peers?
My Role:
I worked in a team of 4 other UI/UX designers. I pitched and developed idea to gamify the networking process, then distributed work evenly in researching, prototyping, and testing to arrive at our final game prototype.
Prototype Sessions
We conducted 2 rounds of in person prototype sessions to imitate the networking experience with our game. In our sessions, we made our classmates complete tasks that they would in the app, but in an altered way to better match the restrictions of a real physical environment.
Prototype 1
How it Worked
Our first prototype was heavily dependent on Figma, where all the steps in our prototype took place (eg: avatar creation, character customization, lounges, villages, reflection cards). We also utilized Knowit, a flashcard deck making app for our networking prompt questions that the players answered during their coffee chats.
1
get character cards
players were given a random character card that acted as the roleplay script
had to take note of personality, career goals, and networking objectives to embody their assigned roles during the prototype
2
create your profile
each player designs a personalized avatar on Figma
players would drag the pre-made components onto their avatar makerspace
3
coffee chat + shared avatar
players head to lounges
use flashcard prompts to guide discussions and build your shared avatar on Figma
hybrid character goes into the players' villages
4
post chat reflection
Reflect on your networking experience by leaving comments in the “Coffee Chat Characters” section of the figma file
Feedback from Prototype 1
Streamline Prototype
simplify the process to focus on the social experience, reducing initial setup steps
“felt like there was a lot of hoops to jump through to get to the actual social experience”
“there’s a lot that users have to do at the start to get things going”
Participation
ensure everyone can fully engage in and understand the prototype experience
“Audience members didn’t really get a chance to experience the prototype, so we didn’t get a full view of what the app experience actually is”
“As a non-volunteer, I felt a little lost as to what my role was – I was not able to hear or understand the activities the volunteers were completing”
Concept
highlight the app’s unique approach but address concerns about its practicality given existing competitors
“this is very unique, I’m just not sure how likely it would be for me to it versus typical networking apps like LinkedIn…”
“I like the gamified experience…however since I think the core of the app is meeting up with someone based on a shared interest…I think I could do that without a game experience’’
Prototype 2
Response to Prototype 1 Feedback
After our experience in week 8, we made some drastic changes for prototype 2.
To start off, we moved our instructions from a doc to our slides and added more visual aids for more clarity.
Simplified customization:
Removed full avatar creation.
Limited options to 3 per feature in Round 1 and 6 in Round 2.
Addressed inclusivity feedback:
Involved the entire class instead of only 5 volunteers.
Removed character cards; participants played as themselves for a more natural coffee chat.
Transitioned to physical setup (for evaluation):
Replaced Figma lounges with physical lounges.
Changed villages from Figma frames to photo albums.
Created paper doll avatars and used Post-it notes for reflection cards
Feedback from Prototype 2
In our second round of prototyping, we observed significantly higher engagement from participants across the class. The feedback we received was overwhelmingly positive. Participants were positively receptive to the concept and indicated that the prototype felt more streamlined and enjoyable.
“I think overall it’s really fun, I would like a structured way to network because I’m quite awkward so if this was an option I would definitely use it."
“It was much more streamlined and less confusing than before"
“I like the idea of incorporating games in a networking experience in order to break the ice and help conversations flow better."
“It was fun! I feel the time constraint made it less deep but overall I had fun”
Suggestions primarily focused on clarifying game features, which we couldn’t explore in depth within the available time. Based on this second round of prototyping, we refined the features of our app and enhanced the digital prototype.
Lo-fi wireframes
We designed lo-fi wireframes to envision the app structure on Figma.
Final Prototype
Inspiration for Game Style
I’m not much of a gamer, but have always loved simple world building games like cat & soup and animal crossing. I took inspiration from these games, utilizing its addictive and gratifying characteristics of being able to grow and develop your own space.
Cats and Soup
Village City
Game components
We created game components, focusing on finding a large variety of character customization pieces. Due to time constraints, we utilized Figma Communities to source our customization pieces, but created all other layout graphics on our own.
What we Learned
Developing Cafe Village revealed key challenges, such as addressing the intimidation users feel when networking, simplifying overly complex prototype processes, and balancing engaging gamified features with practicality. These challenges taught us the importance of streamlining features, providing clear instructions, and thoughtfully integrating gamification to create an approachable and effective networking tool.
Key Takeaways:
Simplify processes to make the experience more user-friendly and accessible.
Provide clear, concise instructions to reduce confusion and setup time.
Use gamification to ease anxiety and encourage meaningful conversations.
meet the team
Team Latte
Lena Pham
Shinhye Park
Kellie Huang
Allison Huang
Irene Joo
