An extensive mobile app solution to enhance user’s overall cooking experience by using groceries efficiently from smart buying to cooking.

10 min read

top_home.png

Role:

Concept Development, User Research, UX Design, UI Design, Prototyping, User Testing

Role: Concept Development, User Research, UX Design, UI Design, Prototyping, User Testing

Tools:

Figma, Photoshop, Principle, Lightroom, Pen & Paper

Project Summary

Bento is a cooking app I designed in a 10-week UX design program at Brainstation. Through user research, I conducted qualitative interviews to identify the challenges millennials encounter when cooking at home. Some of these challenges can be found in moments during buying groceries, stocking up their pantry, to cooking a meal.

 

My desired outcome is to utilize the researched data to design a mobile app that alleviates pain points and motivate users to develop better cooking skills. An everyday solution that encourages a healthy eating lifestyle as well as efficiency in grocery shopping and food preparation.

The Challenge
"Many busy millennials try to prioritize self-care to maintain a good work/life balance, but they often overlook the benefits in cooking at home and building a long-term healthy eating lifestyle."

A recent report by the United States Department of Agriculture (USDA) revealed that “millennials consume food in a restaurant or bar around 30% more often than any other generation.”

 

Wellness is a daily, active pursuit for all of us. Although we are aware and mindful about living healthily and developing good eating habits, cooking at home can sometimes feel like a heavy task for most of us despite its many benefits. In this project, I want to exercise my UX design skills and address the pain points that discourage millennials from cooking at home.

78a07b00d9cf829fc8af787a2bbfdd10.jpg
groceryshop.jpg

Project Goals

  • Discover user pain points from buying groceries to cooking a meal

  • Design a seamless meal planning through user empathy

  • Motivate user's discovery to new recipes and learn cooking skills

  • Help users organize their ingredients and suggest recipes accordingly

Qualitative Interviews

interview_diagram.png

In order to better understand user's behaviors, I conducted 12 in-person interviews with users between 20-40 years old to understand how they feel about cooking at home. I asked questions about their experience during grocery shopping and cooking, specific things that motivate or discourage them during their food preparation.

Key Insights:

  • Portions - Challenging to buy groceries/cook for 1-2 people

  • Expenses - Trying new recipes usually means buying more ingredients and spending more money

  • Time - Busy schedules usually lead to a usual cooking routine

  • Skill Level - Average users know how to make 1-3 meals, most users did not grow up knowing how to cook

  • Waste - Leftover ingredients usually end up in freezer, or gets thrown out

User Journey Map

userjourneymap.png

Synthesizing qualitative interviews into actionable insights through journey mapping.

"I discovered moments of pain points when users feel overwhelmed at a super market and not sure which groceries to buy, not just when they are deciding which recipe to use."

Through user journey mapping, I am able understand and locate where pain points would appear during the user's food preparation process. This gives me a clearer idea on the problem and shows that users go through a series of discouragement before they decide not to cook at home. With this data, I look into the user's emotional journey and explore solutions to simplify and help improve their process accordingly. Here are some of the core user needs that are found in 3 stages:

1. Grocery Shopping

  • It saves time when users know what to buy

  • What's on sale?

  • A shopping list or organizer could be useful

2. Preparing

  • Quick search results

  • Easy and straight forward navigation

  • Applicable for daily use

3. Cooking

  • Clear instructions with photos

  • Cooking time and portion information

  • Recipes that match their skill level

Design Process - User Flow

User Flow.png

Wireframe

DSC04418.jpg

Some initial sketches of BENTO to decide on layout and navigation through user testings.

In order to create a versatile experience for users to access the app while they're shopping, cooking, or just browsing, I began to sketch with pen and paper to explore different ways for users to search for recipes. After the first few rounds of user testings with the wireframes, the results show that majority of users tend to tap the add ingredients button or search bar to begin their search process in most situations.

Exploring Navigation Ideas

Voice Command

A voice-command option could be useful for users who are cooking while using the app. That way their hands are free to cook without juggling between the phone and the ingredients.

Although I envision the voice-command option could be a useful feature to increase accessibility to the app in the future, at this time the results from user testings show that multitasking between the app and cooking usually happens after they have selected the ingredients and have started the cooking process.

nav1.png
nav2.png

Idea: double click the add icon to switch to voice-command mode, then hold and say ingredients to the device.

Button Size

Design bigger CTA buttons with expanded surface areas to allow for more accuracy for users who prefer to navigate with their fingers.

 

Larger buttons not only benefits users who are cooking while using the app, but also users who are shopping since they would most likely be multitasking and handling their device with one hand at the super market.

After testing the 2 options with users, they prefer navigating the app manually with their hands with bigger CTA buttons for more precision and control.

nav3.png
nav4.png

Placing bold CTA buttons within the combined thumb-zone area for easy accessibility for right and left-handed users.

Design Decisions

home_detail

BENTO home screen

recipe_detail.png

BENTO recipe screen

High Fidelity Mockups

navigation.gif

Search Recipe

Selecting ingredients by using the add button in the home screen allows users to search for recipes quickly. Suggested ingredients are shown on the side bar to give users inspiration and ideas.

Recipe Navigation

Step by step instructions with photos to provide guidance. On the recipe screen, users can select to view ingredient details, instructions, or add/save recipe to shopping list.

Video instructions could be an option in the future to give users more hands-on instructions and cooking techniques.

recipe.gif
shop_deals.gif

Shopping List / Grocery Deals

Users can organize their groceries inside the shopping list tab with calendar to keep track of what ingredients they have or need. Flyers from their supermarkets are available on deals tab to keep up to date with what's on sale.

Logo / UI Decisions

bento.jpg

Japanese Bento Box: Rounded corners are used for app elements and buttons to resemble the aesthetics of Bento boxes.

"Bento" is a Japanese term referring to carefully prepared lunch boxes. I named the app BENTO because it embodies the idea of organization and preparation of food. In a similar way, this app lives inside a mobile device just like how food is stored inside a bento box for future use. I want to connect this resembling idea of mobility and food to highlight the essence of something that was once traditional and interpret it in a digital platform.

I decided to use a minimal monochrome approach with Bento's colour palette to accommodate the vivid food photos in the menus and recipes. My goal is to drive user's focus to cooking tasks and instructions while they're using the app by minimizing any excess colors or features that could be a distraction.

Style Guide.png

Reflection

My main focus for the challenge was to listen to users and create a valuable solution based on their needs. If given more time, I would conduct several more rounds of user testings with new user groups to confirm and refine some of my interface design assumptions. I would also explore how I can incorporate the ingredient substitution feature in the recipe and shopping list page to help users find alternatives.

 

Some of the metrics I would use to measure success would be monitoring the task success rate to see the percentage of users effectively use the app for grocery shopping and cooking, as well as the app's overall engagement to see how often users interact with the product when they are preparing to cook.