Role
UI/UX Designer, UX researcher
Project Type
original app
Timeline
12 weeks
Tools
Figma, Procreate, Adobe Suite
Project Overview
ACM, short for Association for Computing Machinery, is the biggest club at UCSD. I selected for their design project program, where I created an original app, Munch.
This case study follows my team’s journey on developing the app and our efforts in socializing food delivery services.
Defining the Problem
Our research process was split into 3 steps:
Step 1: Initial Research
Conducting broad research about contemporary trends and their relation to food services.
Step 2: Competitive Analysis
Researching competitors of different niches to set standards and find potential opportunities for improvement for our app.
Step 3: Interviews & Surveys
Understanding meal prep/delivery app users' experiences and opinions.
Step 1: Initial Research
Step 2: Competitive Analysis
Step 3: Initial Interviews & Survey
Our Role & Goal
Goal #1: Create a straightforward, user-friendly app that excels at its primary purpose—selling customizable meal kits.
Goal #2: humanize and socialize meal kit services by connecting its users through an embedded social platform.
My Role: I worked in a team of UI/UX designers and researchers. I took on the idea I proposed: the socials page.
It was our own twist on generic delivery apps by making the app community based. This would allow our users to connect with one another through their food and lifestyle. The social feature was important to achieving our greater goal of elevating our users’ sense of satisfaction in food and life.
Understanding Users
User Persona
User Flows
Early Ideation
Lo-fi Wireframes:
Mid-fi Wireframes:
User Testing, Feedback, and Improvements:
We went through 2 rounds of task-based usability testing to arrive at our high fidelity prototype.
Each round, we gave users tasks for each page, observed and recorded their behavior, and got feedback through difficulty ratings and follow up questions.
Round 1: we gathered the feedback from our first round of user testing, as shown below.
A good example of the improvements we made after receiving feedback is from the social page.
Problem: When executing the task of looking for users to send a friend request to, instead of clicking on the search bar to look for people like we expected, many would click on the "friends" tab of the social page and end up lost and confused.
The fault was in the search bar's location, which was counterintuitive for such reasons:
Misleading Information Hierarchy: The search function sitting on the top of the subsections made it feel like a global search bar, which is not what we intended
Clutter: Having the search button near the header creates visual clutter, preventing users from being able to locate it easier
Solution: We relocated the search bar inside the “For You” subsection to improve visibility and provide a more intuitive experience.
Q: why is the search bar not in the "friends" subsection?
A: Because a "For You" page encourages new exploration, making search a natural tool to have, while a "Friends" page focuses on fostering existing connections (hence the "friends" button replacing of search bar)
Final Solution (Prototype)
Name:
We named our app “Munch."
To dissect the word, Munch is:
Memorable: one syllable and simple, Munch was easy to remember
On-Brand: the definition of “Munch” is the act of eating something, which fit perfectly with our meal service theme
Lively: Its characteristics as a “continuous” and “audible” action gave Munch a distinctively animated energy.
Moodboard:
For the moodboard, we looked for designs that were:
minimalistic (because simple is best)
professional (we need users to trust our product when looking at our app)
fun (one thing I don’t want to lose is personality: because simple and boring are different)
Prototype of social page:
Social Page: For You
Social Page: Friends
Next Steps & Learnings
From what I learned during this project, here's some things I'd want to do in the future.
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.