Case Study 1

Case Study 1

Case Study 1

Munch Original App

Munch Original App

Munch Original App

Role

UI Designer, UX Designer, UX researcher

Project Type

original app prototype

Timeline

12 weeks

Tools & Skills

Figma, Procreate, Adobe Creative Cloud, User Research, User Testing, UI Prototyping

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

My team decided to focus on meal planning/food delivery services. The decision came natural as our team comprised of Yelp loving culinary enthusiasts, but that didn't mean we were experts in the food commerce industry.

To begin our project, we dove into the food commerce industry over 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: Initial Interviews & Survey

Understanding meal prep/delivery app users' experiences and opinions.

Step 1: Initial Research

We knew from the beginning that, realistically, our target audience would be self-sufficient adults. So it got us thinking, how are adults doing?

Well, we found out pretty soon enough that most of them are not doing all too well (how are you? by the way?). In fact, 21st century adults have been reported to be…

  1. Busy and tired

  2. In poor health

  3. Lonely

Grim as these findings were, 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 on what an Italian cold cut could have to do with the emotion. But we'll come back to that.

We knew from the beginning that, realistically, our target audience would be self-sufficient adults. So it got us thinking, how are adults doing?

Well, we found out pretty soon enough that most of them are not doing all too well (how are you? by the way?). In fact, 21st century adults have been reported to be…

  1. Busy and tired

  2. In poor health

  3. Lonely

Grim as these findings were, 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 on what an Italian cold cut could have to do with the emotion. But we'll come back to that.

We knew from the beginning that, realistically, our target audience would be self-sufficient adults. So it got us thinking, how are adults doing?

Well, we found out pretty soon enough that most of them are not doing all too well (how are you? by the way?). In fact, 21st century adults have been reported to be…

  1. Busy and tired

  2. In poor health

  3. Lonely

Grim as these findings were, 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 on what an Italian cold cut could have to do with the emotion. But we'll come back to that.

Step 2: Competitive Analysis

We were beginning to get a sense of our target audience; now it was time to scan 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, 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.

Our analysis taught us that 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, and 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, and lasting connection with the users.

Our analysis taught us that 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, and 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, and 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

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 (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 (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: 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.

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"

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.

"Confusing"

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.

"Impersonal"

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.

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.

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.

Designer's 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 2 other UI/UX designers. After deciding what main features/pages we wanted to include in Munch, we delegated work to increase efficiency. 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

Who are we making this app for? Was our next big question. To answer our question, we created a user persona and user flows.

User Persona: When crafting our user personas, we looked back at our user interviews along with our competitive analysis to see 1) what the general user for a food delivery service is like and 2) what we envision the user of our app to be like.

The ideal munch user is someone who's: busy, working, health-conscious, & social-media savvy.

User Flows: after our user persona was set, it was time to set up the user flows. Split into 4 sections, the user flows set a solid foundation for designing the app’s UI.

Early Ideation

Low Fidelity Wireframe: We began with some lo fi wireframing. As lo fis are like the rough draft of a paper, we really wanted to get an idea of what we wanted on the app down.

Mid Fidelity Wireframes: after we had the skeletal structure of our design, we added the muscles for the mid-fi. Our team's standard for the mid-fi was for it to be developed enough to go through the first rounds of user testing.

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)

Now, it was time to piece everything together.

Name:

We named our app “Munch”. I actually proposed the name because the viral rapper 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.

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)

Component Library:

Color: turquoise #008575

  • Reason: Looked most stable, professional, and welcoming when tested on our mid-fi’s + the color psychology of health and trust were what we decided was most fitting with our brand

    (we also made sure it met the color contrast ratio standards of 4.5:1 for normal text)

Font: Inter

  • Reason: Inter and Poppins were the 2 final candidates, but we ultimately went with Inter after testing both fonts on our mid-fis

    • Inter: narrow, straight, professional, neat (Analogy: steve jobs)

    • Poppins: round, “cute”, connected, fun (Analogy: Emilia Clarke)

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: Looked most stable, professional, and welcoming when tested on our mid-fi’s + the color psychology of health and trust were what we decided was most fitting with our brand

    (we also made sure it met the color contrast ratio standards of 4.5:1 for normal text)

Font: Inter

  • Reason: Inter and Poppins were the 2 final candidates, but we ultimately went with Inter after testing both fonts on our mid-fis

    • Inter: narrow, straight, professional, neat (Analogy: steve jobs)

    • Poppins: round, “cute”, connected, fun (Analogy: Emilia Clarke)

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: Looked most stable, professional, and welcoming when tested on our mid-fi’s + the color psychology of health and trust were what we decided was most fitting with our brand

    (we also made sure it met the color contrast ratio standards of 4.5:1 for normal text)

Font: Inter

  • Reason: Inter and Poppins were the 2 final candidates, but we ultimately went with Inter after testing both fonts on our mid-fis

    • Inter: narrow, straight, professional, neat (Analogy: steve jobs)

    • Poppins: round, “cute”, connected, fun (Analogy: Emilia Clarke)

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:

full prototype link

Home Page:

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

Next Project

Mangrove Monitoring

Next Project

Mangrove Monitoring