Munch: Original App

Munch: Original App

Munch: Original App

Socializing Meal Kit Apps

Role

UI/UX Designer, UX researcher

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 prototype and our efforts in socializing food delivery services.

Problem

Meal kit delivery service apps aren't able to appeal genuinely to customers.

Solution

Socialize meal kit delivery service apps by adding a socials page inside the app.

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

Modern adults have been reported to be…

  1. Busy and tired

  2. In poor health

  3. Lonely

We took these struggles and re-imagined them as opportunities for how food could serve the people of today.

Because adults don't have the time nor energy to cook elaborate meals everyday, our app would have to account for time efficiency and simplicity.

Because adults struggle with taking care of their physical health, our app would need to provide features to give people option to easily cater their meals according to their health concerns.

The first two problems seemed straightforward enough, but what about loneliness? At this point in the project, I felt lost.

Modern adults have been reported to be…

  1. Busy and tired

  2. In poor health

  3. Lonely

We took these struggles and re-imagined them as opportunities for how food could serve the people of today.

Because adults don't have the time nor energy to cook elaborate meals everyday, our app would have to account for time efficiency and simplicity.

Because adults struggle with taking care of their physical health, our app would need to provide features to give people option to easily cater their meals according to their health concerns.

The first two problems seemed straightforward enough, but what about loneliness? At this point in the project, I felt lost.

Modern adults have been reported to be…

  1. Busy and tired

  2. In poor health

  3. Lonely

We took these struggles and re-imagined them as opportunities for how food could serve the people of today.

Because adults don't have the time nor energy to cook elaborate meals everyday, our app would have to account for time efficiency and simplicity.

Because adults struggle with taking care of their physical health, our app would need to provide features to give people option to easily cater their meals according to their health concerns.

The first two problems seemed straightforward enough, but what about loneliness? At this point in the project, I felt lost.

Step 2: Competitive Analysis

In order to get a comprehensive understanding of the current meal plan/delivery service market, we conducted research about competitors of different niches. For example, we chose Hello Fresh as the most mainstream, Platejoy for our weightloss and health focused, and Mealime for a meal planning focused competitor.

We were beginning to get a sense of our target audience; now it was time to pry (professionally and respectfully) on our competitors. In order to get a comprehensive understanding of the current meal plan/delivery service market, we conducted research about competitors of different niches. For example, we chose Hello Fresh as the most mainstream competitor, Platejoy for our weightloss and health focused competitor, and Mealime for a meal planning focused competitor.

Our competitive analysis taught us that most meal prep and delivery apps go by a similar handbook: a set of questions to gather user information about their dietary habits, a variety of plans that users can choose from, and clean, friendly UI to give a friendly, approachable feel to the users.

  1. However, we found that many apps were limited in their scope of customization, accessible pricing, and connection with the users.

We were beginning to get a sense of our target audience; now it was time to pry (professionally and respectfully) on our competitors. In order to get a comprehensive understanding of the current meal plan/delivery service market, we conducted research about competitors of different niches. For example, we chose Hello Fresh as the most mainstream competitor, Platejoy for our weightloss and health focused competitor, and Mealime for a meal planning focused competitor.

Our competitive analysis taught us that most meal prep and delivery apps go by a similar handbook: a set of questions to gather user information about their dietary habits, a variety of plans that users can choose from, and clean, friendly UI to give a friendly, approachable feel to the users.

  1. However, we found that many apps were limited in their scope of customization, accessible pricing, and connection with the users.

Most meal service apps go by a similar handbook:

  • a set of questions to gather user information about their dietary habits

  • a variety of plans for users to select

  • clean, friendly UI to give an approachable feel to the users

However, we found that many apps were limited in their

  • scope of customization

  • accessible pricing

  • lasting connection with the users

Most meal service apps go by a similar handbook:

  • a set of questions to gather user information about their dietary habits

  • a variety of plans for users to select

  • clean, friendly UI to give an approachable feel to the users

However, we found that many apps were limited in their

  • scope of customization

  • accessible pricing

  • lasting connection with the users

Our competitive analysis taught us that most meal prep and delivery apps go by a similar handbook: a set of questions to gather user information about their dietary habits, a variety of plans that users can choose from, and clean, friendly UI to give a friendly, approachable feel to the users.

However, we found that many apps were limited in their scope of customization, accessible pricing, and connection with the users.

Step 3: Initial Interviews & Survey

Interview key insights:

  • Health is valued, yet compromised due to lifestyle hurdles (eg: time, convenience, money)

  • Users want more personalization and customization in their meals

  • Cooking is time consuming (1-2 hours per meal)

Interview key insights:

  • Health is valued, yet compromised due to lifestyle hurdles (eg: time, convenience, money)

  • Users want more personalization and customization in their meals

  • Cooking is time consuming (1-2 hours per meal)

note: We did both video interviews and surveys so that we could get more intimate, qualitative data from interviews and more general, quantitative feedback from surveys.

Interviews: We interviewed individuals to get a more thorough and personal insight on potential user’s experiences and opinions on meal prep/delivery services. We chose working adults who were either single or in a committed relationship (ie living together or married) to understand different types of households' outlook on meal prepping.

Some key insights include

  • Health is valued, yet compromised due to lifestyle hurdles (eg: time, convenience, money)

  • Users want more personalization and customization in their meals

  • Cooking is time consuming (users take 1-2 hours for each meal)

Survey: The initial surveys acted as a supplement to the information we gathered from our interviews. There were questions about income and grocery expenses to gauge appropriate pricing for our meal as well as questions about ranking app features to decide which features to add to our app.

For insights, there was one particular question, "what words would you use to describe your image of apps like Hello Fresh and Uber Eats?", got me thinking. While there were positive adjectives like "professional," and "clean," there were others that were more critical.

"Overpriced" "Confusing" "Impersonal"

Out of these words, "impersonal" stood out to me. It was true that larger meal delivery companies lack the personal connection or community feel of smaller, local restaurants, making them seem impersonal or transactional.

Remember the problem of people feeling lonely? I connected loneliness and pre-existing meal apps feeling impersonal and realized there could be a solution for both issues: something as simple as socializing the meal service experience.

Survey: There were questions about income and grocery expenses to gauge appropriate pricing for our meal as well as questions about ranking potential app features to gauge user interest.

One particular question,

"What words would you use to describe your image of apps like Hello Fresh and Uber Eats?"

got me thinking. While there were positive adjectives like "professional," and "clean," there were others that were more critical.

Survey: The initial surveys acted as a supplement to the information we gathered from our interviews. There were questions about income and grocery expenses to gauge appropriate pricing for our meal as well as questions about ranking potential app features to gauge user interest.

For insights, there was one particular question, "what words would you use to describe your image of apps like Hello Fresh and Uber Eats?", that got me thinking. While there were positive adjectives like "professional," and "clean," there were others that were more critical.

"Overpriced" "Confusing" "Impersonal"

Out of these words, "impersonal" stood out to me. It was true that larger meal delivery companies lack the personal connection or community feel of smaller, local restaurants, making them seem impersonal or transactional.

Remember the problem of people feeling lonely? I connected this sense of loneliness with the impersonal nature of existing meal delivery apps and realized both stem from a deeper issue: a lack of meaningful human connection. This insight became the foundation of our goal.

"Overpriced"

"Confusing"

"Impersonal"

Out of these words, "impersonal" stood out. It was true that larger meal delivery companies lack the personal connection or community feel of smaller, local restaurants, making them seem impersonal or transactional.

Remember the problem of people feeling lonely? I connected this sense of loneliness with the impersonal nature of existing meal delivery apps and realized both stem from a deeper issue:

a lack of meaningful human connection.

This insight became the foundation of our goal.

Our Goal

Goal: how to socialize customers of a meal delivery service app.

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 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

  • professional

  • but also playful!

Component Library:

Color: turquoise #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

Logo: after multiple unsuccessful attempts, I sketched a sandwich with a bite mark on it. And that was it, our final logo.

  • Reason:

    • 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

Component Library:

Color: turquoise #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

Logo: after multiple unsuccessful attempts, I sketched a sandwich with a bite mark on it. And that was it, our final logo.

  • Reason:

    • 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

Component Library:

Color: turquoise #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

Logo: after multiple unsuccessful attempts, I sketched a sandwich with a bite mark on it. And that was it, our final logo.

  • Reason:

    • 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

Prototype of social page:

full prototype link

Social Page: For You

Social Page: Friends

Next Steps & 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.

Next Project

Mangrove Monitoring

Next Project

Mangrove Monitoring