NomNom

Giving users a new way to connect through cooking
and find unique recipes
View Solution
Role
Client Liaison, Interaction Designer
Tools
Figma, Zoom, Google Forms, Maze
Timeline
3 weeks
Designers
Yeyen Ong, Sunnie Williams, Karina Gallego, Nic Manning, Hailey Westrum, Corryn Johnson, Zaquana Patterson

Background

A friend of mine was missing one of their favorite hobbies.

My roommate, Andy (they/them), loves to cook with people. They consider themself a beginner, so they like to collaborate to improve their dishes and try new ideas. The COVID-19 obviously affected their ability to do this with friends, so they were left with having to juggle Zoom with clunky and lengthy recipe websites.

They knew how they would want to solve their problem.

They came to me with some ideas for an app that would help them, while also reducing waste and avoiding annoying recipe websites. I worked with a team of my peers to develop a low-fidelity prototype that would fulfill Andy’s vision and address their frustrations with existing recipe sites and apps.

The scope of this project was very limited.

Being an educational project, there was no actual budget or business client. There was also no branding required for this project, only a low-fidelity prototype.

Solution

NomNom is a low-fidelity iOS app prototype that allows users to

• cook with friends through a video chat feature
• find recipes based on what ingredients you have
• avoid lengthy and annoying recipe websites
View Prototype
Discover
Users & Audience
Choosing a Solution
Proto-Persona & Empathy Map
Customer Journey Map
Screener Survey
User Stories
Users & Audience
Based on our first interview with Andy, we knew that our target demographic would be

• relatively young (18-30 years old)
• on a budget
• looking for ways to connect
• wanting to reduce food waste
• a beginner/novice home cook
Choosing a Solution
To address our client’s vision and pain points, we conducted a "How Might We" exercise to help decide as a team what our main solutions were going to be. We based our plan around the following:

• allow users to chat while they cook, whether it’s through text, audio, or video
• include simple recipes that are easy to follow and execute
• give users the ability to enter and save ingredients they have, and to search for recipes based on those ingredients
Proto-Persona & Empathy Map
Here we see Linda, a proto-persona created based on what Andy told us about the expected target audience in the first interview. This empathy map helped to take some of the abstract ideas we had about potential users and make them more concrete and relatable.
Customer Journey Map
We also created this journey map for Linda, which was made to help shape the group’s idea of how users might interact with our prototype.
Screener Survey
Next we created a screener survey to find usability testers. The results showed that most of our respondents were fairly close to the target demographic. Most importantly, this group of respondents also told us that they enjoy cooking with friends.
User Stories
Based on our initial solution explorations, and on responses from our survey, we created a list of user stories. Here are some user stories we decided to include:

• searching for recipes
• inputting ingredients
• chatting with friends

Some of the user stories we omitted:

• choosing cuisine categories
• sharing out to other social media platforms

These stories were omitted due to time constraints, and because they did not solve the most important problems.

The full list and details can be seen here
Define & Develop
User Flows
Wireframe Sketches & Iterations
Lo-Fi Prototype
User Flows
Next, we all created sketches of user stories mapped out into a flow. These sketches were primarily based on actions listed in the journey map. As a group we provided several different options for potential flows and solutions that could be applied to the initial wireframes.
We also created a few different digital user flows from the user stories. These are clearly quite simple and need some refinement, but they show that we were thinking critically about how our “how might we” questions from earlier should be answered within the context of an app.
Wireframe Sketches & Iterations
We performed sketching exercises like “Crazy 8’s” and “4-ups” to narrow down common ideas we thought would serve users best. We critiqued one another, gathered feedback, and were able to come to a consensus about features we wanted to include and how we wanted them displayed.

After sketching, we created some digital wireframes. Our first two wireframes included two search bars, but after getting some feedback we realized that this was confusing. We combined them into one search bar and added some detail to the featured recipes. We also increased the recognition of the bottom navbar icons to lead users to their friends’ cooking activity and the chat feature. In the last iteration, we added more details and made all elements consistent and iOS compliant.
MVP Prototype
After iterating upon our low fidelity wireframes, we made them interactive and created a prototype within Figma.

Making connections

Start a video chat with friends or family, right from the recipe page. No more juggling two devices.

Avoiding recipe sites

Hate those ads and long backstories? We do too. These recipes only include what you need.

Staying organized

Keep all the ingredients you have on hand stored in the app, so you can find out what to cook without having to run to the grocery store.
View Prototype
Testing
Moderated Usability Tests
Unmoderated Usability Tests
Moderated Usability Tests
Our research team decided to conduct both moderated and unmoderated testing on our prototype. This was done for two reasons: to yield as much testing data as possible, and to get experience using a new research tool. For both tests, the research team chose five tasks to test on:

• Creating an account and viewing your profile
• Finding a recipe from the homepage
• Choosing ingredients to start a recipe search
• Starting a chat with a friend
• Finding saved recipes

The results from this showed that in general this prototype was easy to navigate, but some features like the "Kitchen" section were confusing.

A full test script, notes, and analysis of the moderated tests can be seen here
Feedback from one of our usability test sessions
Unmoderated Usability Tests
From the 11 unmoderated tests we conducted through Maze.design, we were able to gather several useful analytics like success rate, bounce rates, heat maps, and more. The results of these tests were, frankly, lackluster. One of our tasks had users give up on it 75% of the time. It’s a bit unclear whether these results were due to the wording of the task questions or the tasks themselves, but ultimately they reinforced the notion that there are some user flows that need updating.
Conclusions
Next Steps
Outcomes & Results
Next Steps
After collecting user feedback, as a team we decided upon what should be included in future iterations of this project. Those updates include the following:

• Make the social aspect of the app more apparent
• Combine the list and category view within the Kitchen page
• Add more ways to share recipes out to social media
• Add more ways to login (Google, Apple, etc.)
• Add an onboarding process
• Increase clickable areas for icons and links as needed
Outcomes & Results
We created a low-fidelity prototype that our client was very happy with, and that people seem to enjoy navigating. The UI is simple, clean, iOS compliant, and makes good use of Gestalt principles to ensure that a more built out, stylized version of the app will be enjoyable to use. Accessibility and usability were of the utmost importance throughout the project, and we based all of our decisions on best practices. The split screen chat feature was a hit.

There are several improvements to be made: most of our test participants got hung up at some point, so it is clear that some iterating needs to be done in regards to our user flow. Our next steps hope to address those issues.

The scope of NomNom could use some re-definition. Several users were a bit confused as to what the point of this app is. By adding more prevalent chat features throughout the app, we hope to address that problem and reflect our understanding of what this app could do and what needs it could fulfill.

Personally, I learned so much about working on a UX team. Being my first experience like this, I had no idea what to expect. We had our hurdles, and dynamics weren’t always perfect, but we managed to come together to find solutions to our problems as they arose.
Back To Top