What is Munch

I worked on this process in 3 distinct phases: a Discover phase, a Design phase, and then the Validation phase.

Where I began…

The original problem that Munch stemmed from was quite close to me, as I was a college student at the time. I would watch friends struggling with figuring out what to cook, and often choosing to instead skip the meal or order take-out more often than they should. Before trying to solve the problem, I wanted to take a little bit of time to do more research to see how far it stretched.

The most important thing that I took away from my initial research(reading articles about the issue) was that students often lacked time, and would give their school work priority over eating. I also learned that their were consequences to skipping meals that most college students didn’t know; it could cause depression, disease, and trouble focusing. This revelation led me to narrow my goals, and add more emphasis on nutrition to my eventual solution.

Moving forward

While secondary research is great when you need to discover a problem, it is also important to support that research by talking directly to your target audience. My interviews were based on four main questions I asked were:

1. Do the students have a budget for groceries, and do they stick to that budget?

2. Are there outside factors affecting the students’ meal choices?

3. Are the students aware of how to prepare a healthy meal, or are there any resources to learn?

4. Why do students choose to take the easy way even though it leads to poor health?

Synthesizing Research

Affinity Mapping

From the information gathered in interviews I started by creating an affinity map — affinity mapping is a process used to group similar ideas together using user quotes, insights from interviews, and ideas. I used this map to determine what things I would have to prioritize in the eventual creation of Munch.

Affinity Map based on User Interviews

My Findings

The affinity map gave me insight into what things were most important to the interviewees in relation to what they would eat. The largest category on my map was ‘Convenience,’ a lot of decisions were made because they were easier than other options. Most times the interviewees would get home after a busy day, and instead of spending time to figure out something to cook, they would end up ordering take-out or eating something like canned soup. Almost all of the participants admitted that they would prefer to have home cooked meals, but that they often were too tired after a long day to both try to find something to make, and to actually cook the meal.

The second largest category here was ‘Perceptions on Nutrition,’ in this category I included the things that people knew about balanced diets and some peoples struggles to get enough important nutrients(especially those with food allergies or restrictions. The consensus was that even though all of the people I had talked to had learned about balanced meals and eating healthy at some point in the past, all of them admitted to being unable to take that information and put that into practice, especially when they worked around a busy schedule. One user quote struck me from this category, he said “I was severely vitamin deficient because I was kind of unsure of what I’m supposed to be eating.”

Learning the user and creating personas

The first step that I took towards learning my users and creating personas, was to sketch out empathy maps. Using information gathered in the interview stage I created three maps, exploring the user’s pains, and what they might hear, see, feel, or do.

Empathy Maps Based on Interviews of the Target User

Using the empathy maps as a base, I was then able to create three distinct personas: The Procrastinator, The Vegan, and No Free Time. The Empathy maps really made me think about who the user was — they were no longer just words on a paper, they became real people with opinions.

The personas from left to right: The Procrastinator, The Vegan, and No Free Time

How might we…?

From the research I was able to form these questions, which I would later use during the Ideation process to find possible solutions.

- How might we make preparing healthy, balanced meals easier for students?

- How might we make the cooking process more convenient for busy students?

- How can we change students’ preconceived ideas of what’s healthy?

- What can we do to make finding recipes for people with dietary restraints more convenient?

- What might we do to optimize the meal preparation process?

- How might we prevent students from skipping meals?

Ideation and Processes of Design

Brainstorming

With the creation of “How might we…” questions, I was able to start brainstorming possible solutions. Before starting any sort of project I always like to see how other people solved similar problems, so I went to Pinterest and scrolled through similar apps; then notated aspects of the ones that drew my attention. This brainstorming session allowed me to start thinking of the features that would eventually become a part of Munch, and helped immensely when I later started working on a User Story Map.

User Story Mapping and Creating Site Maps

With the information I gained during brainstorming, I was able to form a basic idea of what the app would be able to accomplish when it was finished. Creating a user story map is a two step process: (1) the creation of user stories, and (2) the organization of the user stories. I learned two valuable things during this process; creating the user stories helped me to figure out all of the things the app would be able to do, while organizing the stories into a map helped me figure out how the app would be organized. The information gained in the completion of the user story map, helped later in the creation of the site map(a detailed breakdown of the app’s navigation).

User Story Map(Left), and Site Map(Right)

User Flows

Just as the creation of the user story map helped with creating the site map, both of those maps together helped me create the app’s user flows. User flows show the path a user would take to successfully complete a specific task. The user story map helped me define the actions that the user would take to move forward, and the site map helped me define how the user would navigate to those options.

Red routes are the most critical and the most frequently used paths a user would take to complete their tasks. I created three flows for Munch’s red routes: The Log In flow, The Discover New Recipes flow, and the Create a Meal Plan flow.

User Flows: Login(Left), Discover New Recipes(Middle), Create a Meal Plan(Right)

Sketches

The creation of these user flows was the first step toward creating polished designs for my app screens; each box on the flow denoted a page that would have to be designed to complete the red routes for my app. I drew up a list of those pages from the created user flows and set down to create sketches of what these pages might end up looking like.

Wire Flows

Placing the sketches into Adobe XD, I was able to quickly build wireframes from them. There were a few ideas that I chose not to include from the original sketches because when they made it into the program, I realized that they weren’t as effective as I wanted them to be.

After the wireframes were completed, I took the User Flows I had created and mocked up the flows to better see how the screens might interact together.

Wire Flows for all 3 red routes

Testing the Prototype

The main goals of the usability test at this stage, was to test the general reactions to the app from the target audience, and also to identify any pain points where users would get confused or frustrated. Going into testing, I was most concerned about the process of creating a meal plan; it was designed to feel as if the user were communicating with someone, however I was afraid that this had made the process too lengthy which would in fact frustrate the users.

The results of this test provided me with some valuable data, showing both things I expected and things I didn’t. One of the most important conclusions that I drew from the test is that 4 out of 5 users seemed to struggle with the design of the home page. Users commented that they were unable to locate the button they were looking for because there was too much information displayed on the screen. The second conclusion drawn from the test was the one I suspected; 3 out of 5 users commented that the reason for their frustration was the length of the meal planning process.

Coming Up With Solutions

After some thinking on the test results I came to two definitive conclusions:

(1) The meal creation process needed to be redesigned, and even though the idea of having the meal plan creation process appear like a conversation was appealing, in order to avoid user frustration the process should be made simpler. Instead of a lengthy information collection process, it should be reduced to a short questionnaire, however the process for refining the plan should still appear the same way.

(2)  The home page had too much information on it, and I needed to find a way to incorporate it better. I still believe that it would be beneficial to be able to access all of the information that is currently included on the home page; a good way to include that information and not overwhelm the user would be to incorporating a tab for the nutritional information that drags down to include more in depth information on nutritional needs, and also the suggestions for improvements.

Starting the development of my high fidelity screens was a little bit of a rocky process for me. I began by taking my low fidelity screens and just adding colors and images, but I realized quickly that wouldn’t work the way I wanted it to; unfortunately I got stuck here for a while due to stubbornness

For a while I tried to work with my original designs, but that didn’t work; I changed up the design a bit after that, but I was still trying to stick with my original plans. Eventually I accepted that in order to move forward I needed to completely overhaul my designs.

Final Drafts Before User Testing

Once I changed my design style, it was full sail ahead. I had crossed over my roadblocks and was able to complete the rest of the screens needed to user test my red routes.

The Prototype

Now that I had completed all of my red route screens, it was an easy process to create a working prototype for testing.

There were three main questions that I needed to have answered before I could move forward with my designs and make improvements. These questions were:

(1) How do users respond to the app signup/setup process?

(2) Are users able to create/edit their own meal plan?

(3) Are participants able to narrow search results using specific criteria?

I wanted to see how individuals responded to the app setup process, if the user was able to create a meal plan from the home page, how the user responded to the ‘+’ menu on the home page, and if the search’s sort/filter function would be easy to find and use. My main worry going into testing was that users would be unable to find the ‘create a meal plan’ button located in the ‘+’ menu.

The test was run with 5 different participants, and run remotely due to the ongoing pandemic at the time of testing. I chose to use Skype for running these tests because it allowed me to view the screens of my participants, see their faces, as well as record the calls so that I could view them later and capture all of my participants reactions.

Results of Usability Testing

Aside from the one missing button on the search page, the biggest issue that I uncovered in my testing was the ambiguity of the ‘+’ menu. 3 out of 5 participants in the Usability Test first tried to navigate to the Plans page before finding the ‘Create a Plan’ button in the ‘+’ menu.

Going into the tests, I believed that the testing would show me that the ‘Plans’ page was superfluous and that I would be able to remove it; it quickly became clear that the page was necessary. At first glance the results of the tests indicate that the ‘+’ should then be removed, but after the test 4 out of 5 users stated that they liked having the option to go to the ‘+’ menu, since it provided easy access to creating a plan. In future versions of the app, an onboarding informational page after completing the set-up would show users what the ‘+’ menu was for and help users to avoid confusion.

The other main thing that I took away from testing had to do with the Set-Up process. Each part of the process had a ‘Skip’ button so the user could fast track their way through the process, however the initial design of the page had the ‘Skip’ button the same design as the ‘Next’ button. The problem with that design decision was that the ‘Skip’ button was a lot more prominent because of it’s location, and this caused users to have to search before moving on . 2 out of 5 users took a moment to navigate to the next page of the set-up because they spent time looking for the ‘Next button. I was easily able to solve this problem by removing the ‘Skip’ button from most of the set-up and only having on the first page, still giving the user to skip the process.

What I Learned

I learned a lot about the design process here, that I will take with me in the future.

(1) Don’t let yourself get stuck, step away for a bit to clear your head and keep moving forward.

(2) If stepping away doesn’t work, sometimes you need to move backwards to go forwards. Basically, sometimes it may help to start over.

(3) It’s possible that your original ideas won’t survive moving into a design program. In that case, rethink the idea and move on.

There were also a few things that I learned from user testing, that I will take with me to future projects:

(1) Users like to have multiple ways to get to the same destination. When talking through solutions to the problems with the ‘+’ menu every user that had initially missed the ‘create plan’ button disagreed with the suggestion to remove the button. While they had intuitively gone to the Plans page to create a plan, they felt like being able to create and edit the plan directly from the home page was useful.

(2) Something that you think will work wonderfully and be intuitive for users might not work how you think. Sometimes you need to go back and revisit these ideas and rethink them or come up with other solutions.