nom nom! recipe app

nom nom! is a recipe app designed to assist beginner cooks throughout the entire cooking process, from planning to preparation. Our goal was to create an intuitive interface that seamlessly integrates personalized guidance and real-time support powered by AI, empowering users to become comfortable in the kitchen. This study explores this issue and our solutions through a holistic UX process, from research to iterative designs and testing. nom nom! turned cooking into a stress-free journey for beginners, providing a comprehensive, intuitive, and engaging experience for users looking to learn and enjoy cooking.

Duration
Feb. 2024 - Apr. 2024 (11 weeks)
Role 
Project Lead
Team
Azaan (co-lead), Samantha, Nathan, Junha 
Tools
Figma, Figjam

01

Context

The Problem

Guiding Questions

Traditional recipe apps lack personalized solutions, leaving individuals frustrated with meal planning and cooking. The abundance of online recipes further complicates navigation. There's a clear need for a platform offering tailored guidance to address diverse dietary needs and preferences efficiently.

  • How do beginner cooks currently prefer to learn cooking techniques and recipes?

  • What pain points do novices encounter when trying to learn how to cook?

  • How can AI be integrated to effectively enhance the learning process?

The Outcome

A new app with AI features that offers comprehensive solutions by:

  • Organizing users’ meal plans and saved recipes

  • Providing guidance with specific recipes as well as general cooking techniques

  • Offering various ways to tailor a user’s search

  • Catering to different learning styles with text and visual options

  • Recommending specific recipes and plans based on user preferences

The Process

02

Research

Competitive Analysis

Current recipe apps on the market have specific strengths, but no singular app offers comprehensive help for every step of the cooking process and may not be beginner-friendly.

We looked into the current recipe apps available—Recipe Keeper, Tasty, Yummly, Food Network Kitchen, New York Times Cooking, and Umami. We compared our own experiences and observations on each app, identifying each app's strengths and weaknesses and what made each one unique.

Each app offered its own unique features, but we noticed that none of the apps were comprehensive enough alone to fit a beginner’s needs.

User Interviews

Gaining insights on current typical cooking behavior

We conducted 20 interviews with college students of varying level of cooking experiences. College students are most likely to benefit from the kind of app we wanted to develop as they are transitioning into adulthood and learning new skills, but they’re limited by their busy schedules and need for budget options.

Our questions were centered around 5 main topics listed to the right along with example questions. We were able to identify key patterns and behaviors by understanding these areas of respondents’ relationships with cooking.

From these interviews, we narrowed down our focus to 4 user insights:

Users tend to prefer recipes that are easy to follow and value preparation time and ingredient availability.

Users tend to take a spontaneous approach to cooking, choosing recipes by current taste preferences, or grocery shopping instinctively without a set list.

Users generally don’t trust AI in generating recipes, but they would use it to consolidate recipes to a more digestible format and recommend dishes.

Users value videos for guidance, but face difficulties multitasking when following recipes.

03

Ideation

User Personas & Journeys

Understanding Target Users and identifying where nom nom! could Address their needs and pain points

Based on the insights we gathered from user interviews and our observations in the competitive analysis, our team created user personas and journeys that reflected the experience of various target user types and addressed the issues we identified.

Their journeys detail the different stages of their experiences with cooking, showing their intent and what ultimately hinders their relationship with cooking. The personas and journeys helped us plan our features around users’ needs and pain points and justify our solutions. I personally created Busy Becky, a user whose struggle focuses on meal planning and preparation. As a lead, I also gave feedback to team members to develop their stories and user types.

Information Architecture

ORganizing our features and flows

Our team then brainstormed ideas for solutions and organized them into a comprehensive information architecture for each part of the navigation that detailed every page and interaction. This information architecture guided our designs throughout the rest of the case study.

We also made a more high-level version of the information architecture to make it more digestible and presentable, only highlighting the most important key features.

Sketches

Drafting the Basic Concepts

Each team member created sketches of ideas of how to implement our flows and features visually for each main part of the app’s navigation. After consolidating all of our sketches, we discussed how to combine our approaches to best address our insights and personas while maintaining a visually appealing and easily navigable platform.

04

Design

Low-Fidelity Wireframing

Visualizing the Flow and Features

With our finished sketches, we started making our low-fidelity wireframes to properly visualize the app’s design and interactions. We designed basic screens for key parts of our information architecture.

I personally designed what it looks like to click into a recipe, showing new features that address different learning styles and provide supplementary tools commonly used when cooking to minimize having to touch your phone.

As a project lead, my role is less design-heavy, so my work during the design stage was geared more toward facilitating discussion during meetings, providing guidance and feedback, preparing the team for our checkpoint presentations, and ensuring a unified team effort.

High-Fidelity Prototypes

Onboarding gives users a chance to tailor their recommendations to their dietary restrictions, experience level, and goals.

Setting these needs and preferences early on narrows down recipes and ensures recipes relevant to the user are being shown.

Users can open overlays to see nutrition facts, access a video, and set a timer.

Viewing a recipe is simplified with an accordion to focus on each part of the recipe only when the user needs it.

The overview provides baseline information about the recipe including difficulty and preparation time. Users can adjust how many servings it will make, automatically changing the quantities shown in the ingredients.

The AI chatbot enables users to ask for and receive personalized help in real time.

Each category can be tapped on to expand. Recommendations are split into horizontal carousels to minimize endless scrolling.

See preparation time and ratings for each recipe directly on the card. Quick save recipes for later without having to click into them first.

The Home page provides different categories of recommendations from tailored dishes for each meal of the day to what’s popular on the app.

The Search page supports searching by ingredients through both manual search, customizable quick search options, and AI photo recognition.

Find tutorial videos and premade cookbooks.

Search also features general categories available in an accordion.

Users can then search and filter through recipes specific to a cuisine, meal type, diet, etc.

Users can flip through their cookbooks similar to an e-book. They can also zoom out to a grid view and view their bookmarked pages.

Both list and grid view options are available to see the user's library of custom cookbooks.

Users have the option to either pick from recipes in the app or import their own recipes to create a cookbook. They may also import entire cookbooks as well.

Users can find their daily meal plans in a calendar view.

There are three calendar views where users assign times to their plans.

Easily switch between weeks

Create and save new custom plans.

Search through premade week-long plans to add directly to the user’s meal plan calendar for quick and easy planning.

The user can connect their meal plan to their Google Calendar to seamlessly integrate cooking into their daily schedule.

05

Next Steps & Reflection

Next Steps

Iterating based on high-fidelity usability testing

Following our prototypes, our team conducted usability testing for the entire app, observing how easily new users identified and navigated key features and flows in a more natural simulation than our low-fidelity usability testing. We gained valuable insights into prototyping and design details that would help simplify the app. Provided more time, we’d develop our prototyping more to address more detailed functionality and make design adjustments to simplify the experience for the users and address inconsistencies.

Reflection

Creating a Cohesive new product

Creating a new product rather than building off of the preexisting came with a lot more ideas to think about and details to consider. While we focused on the UX, we also had to determine a set direction for the app to make sure our vision and goals were unified and to narrow down our pool of ideas into a comprehensive yet simple platform. We also had to develop a more detailed information architecture and design system than I’ve had in past projects to ensure cohesiveness.

Our team relied a lot on research to provide a foundation and justify our decisions. Without a preexisting product, we had to be more flexible and continuously discuss and provide feedback to each other for even the smallest details and use cases.

Overall, I developed my attention to detail and thought processes, creating more advanced design justifications and delving deeper into aspects of UI/UX that I hadn’t experienced in as much depth before.

Leading a highly collaborative team

This was my first experience as a project lead, and I learned a lot about how to apply leadership principles to a design environment and facilitate effective collaboration. Good leadership is especially important in creating a team dynamic that pushes the team to be productive, provide one another support, hold each other accountable, and give and take feedback. With such a high amount of collaboration, I also often had to find a way to balance different opinions, discussions, and skill levels to maintain a unified direction despite the diverse perspectives each of our team members brought and use our team members’ different strengths to the project’s advantage.