Abstract
CookEase is a mobile app designed to fill the gap between how cooking and recipe apps are built and how they are actually used in real kitchens. A user survey conducted in early research showed that scrolling through a recipe on phone frustrates many users.Additionally, many showed hygiene concerns when handling a device with food-covered hands. Around 90% of the participants reacted positively at the idea of a hands-free "Cook Mode". The data concluded that this feature will not only set CookEase apart from competitors, but also increase the frequency of app usage. CookEase aims to provide features like gesture-controlled navigation, automatic screen lock, smart grocery list, and pantry checking. The app also supports full recipe management, from importing recipes to creating personal cook books. Accessibility was prioritized, with features aiding visualy impaired and elderly users. This paper documents the entire design process of this app.
Keywords:
HCI (Human-Computer Interaction), Gesture Navigation, Cook Mode, User-Centered Design, Accessibility, Recipe Management, Pantry Tracking, User Interface, Cookbook, Pantry.
1. Introduction
Cooking is a part of daily life for millions of people. However, many of the digital tools to support this activity are not designed for actual kitchen use. Recipe applications designed for comfortable browsing are not fit for the chaotic cooking process. This leads to following problems: screen Locking mid-recipe, navigating becomes difficult with residue-coated hands, clustered interfaces that distract from cooking, recipes scattered across different sources causing confusion, missing ingredients discovered halfway through the recipe.
CookEase is a mobile application designed to bridge these gaps, aiming to appeal to a variety of users - from first time cooks to experienced home cooks. All these users are connected with this shared frustration: it's hard to navigate an app while hands are busy.
By addressing the highlighted issues, CookEase intends to make cooking a less disruptive and more relaxed experience. This will encourage regular cooks to try out new recipes with confidence, and will also create a positive environment for first-timers. The feature of navigating without any physical interaction with the device will make the overall cooking process less frustrating and more hygienic.
The scope of this application covers the entire cooking cycle: discovering and importing recipes from different sources, organizing recipes in a personal cookbook, preparing a smart grocery list, following the recipe in a hands-free Cook Mode via gestures, and sharing results with the community of cooks. Accessibility considerations are integrated into the design, paying special attention to users who are visually impaired and elderly users who prefer a straightforward and minimalist interface.
2. Motivation
The motivation for CookEase is a simple yet persistent problem faced by most of the users. Despite the abundance of recipe apps available, none have tried to tackle this issue. Most people follow a recipe through a phone which is a clumsy and unhygienic experience.
The most pressing problem is the physical limitation between cooking and using a touchscreen. With hands covered in oil, flour and all the kitchen residue, it becomes difficult to operate the phone safely and hygienically. Users must either wash their hands repeatedly which interrupts the cooking flow, or they might risk contaminating their device. Another critical problem is screen time out midway. Recipes generally take more than mere minutes, and screen timeouts add to the frustration in the already chaotic cooking environment.
One more issue faced is the confusing and attention demanding interface or application, which distracts the users from the stove and so their attention is divided. The recipe scattered across the different sources and the lack of organization adds to the confusion. Additionally, a concerning problem is the realization that there were some ingredients missing or unavailable, but the realization hit too late into the recipe. For those who don’t have any specific dish in mind and want to make do with available ingredients, most apps don’t allow searches based on what’s in the kitchen.
Solving these problems has important benefits. An app that makes cooking easier encourages more people to cook at home, which can positively impact nutrition, food costs, and confidence in the kitchen. For students and young adults managing households for the first time, a helpful cooking companion can significantly improve how they approach meals. The planned community features for CookEase will extend these benefits, providing a shared space for recipes, tips, and inspiration.
3. Comparison with similar applications
Three existing applications were analyzed: Tasty, Paprika, NYT Cooking.
3.1. Tasty
Tasty is a visually appealing application with main features being strong video content and social sharing. It appeals more to the younger users and it is free to use. Some features unique to CookEase as compared with Tasty are serious organization tools, ingredients-based search, and hands-free cooking mode. There is mostly video content and so, Tasty is not preferred by users who like to follow written instructions.
3.2. Paprika
It is an app with many features. Including features like saving recipes from websites, grocery list generation based on the recipe, and recipe categorization. Despite the depth these features give to Paprika, there is an issue with its dated interface. It requires a paid download and there seems to be no Cook Mode or any type of gesture navigation. There is also no community element.
3.3. NYT Cooking
NYT is a premium cooking platform provided by the New York Times. New York Times is famous for its high quality and professionalism in providing thoroughly tested recipes. It gives a clear browsing experience and organization feature in the form of folders. However, it is a paid platform. It does not offer features like hands-free cooking. It is a recipe repository but there is no feature to tackle the problems that arise with the physical context of cooking.
3.4. How CookEase Improves Upon Existing Systems
Feature Tasty Paprika NYT Cooking CookEase
Cook Mode / Hands-free ✗ ✗ ✗ ✓
Gesture Navigation ✗ ✗ ✗ ✓
Ingredient-Based Search ✗ ✗ ✗ ✓
Grocery List ✗ ✓ ✗ ✓
Recipe Organization Limited ✓ Folders ✓
Community Reviews ✓ ✗ ✗ ✓
Calorie Tracking ✗ ✗ ✗ ✓
Free to Use ✓ ✗ ✗ ✓
4. Application Design
4.1. Requirements Gathering
Requirements were gathered through user surveys, distributed among potential users of different age groups. The survey inquired about the current habits and the common frustration of the daily cooking experience, and usual walk through the scenario of following a recipe from the phone, the survey asked the users about the device and app they usually use for when they try out new recipes, and they were asked about features they think will make an app less frustrating. This led to many design decisions, mainly about how people are forced to halt and clean hands just to interact with their phone.
The responses from all the participants indicated that the core problem was navigation a touchscreen while cooking. Other noteworthy problems were screen timeouts, distracting layout, lack of organization of sources when following recipes. This clearly defined the features of our apps, and the design priorities.
Functional Requirements:
Following were the functional requirements identified based on the survey:
• FR-01: Users can create multiple cook books to organize recipes.
• FR-02: A recipe should be allowed to be imported from the browser, or uploaded as photo, text or written summary.
• FR-03: Allow users to edit a recipe by modifying steps, ingredients.
• FR-04: There should be a cook mode which displays one step at a time, keeps the screen active, and allows navigation via gesture control.
• FR-05: Cook mode should read aloud each step and give audio feedback on acknowledgement of the user command.
• FR-06: Grocery list should be generated for the selected recipe or a custom grocery list can be created as needed by the user.
• FR-07: Allow to maintain a pantry, a list of the available ingredients.
• FR-08: Allow search for recipes based on pantry.
• FR-09: Users can rate and review recipes in their collection.
• FR-10: Every element and icon should have a label that is readable by screen readers.
• FR-11: Microphone input support in search bar for voice-based search.
Non-Functional Requirements:
The following non-functional requirements define how an app should perform:
• NFR-01: The interface should be beginner friendly, easy to learn, and self explanatory.
• NFR-02: Responsive cook mode throughout the recipe, without lags or glitches.
• NFR-03: Accessibility for the visually impaired and elderly users should be ensured with full screen reader support and audio guide through the recipe.
• NFR-04: Design should be clean, with large font and tap targets spaced apart and larger so it is appealing to the eyes and easy to operate.
• NFR-05: App should be free to use.
• FNR-06: Import from outer sources should complete fast.
Personas:
Persona 1: Zoha, 28 Young Professional Home Cook
Zoha is a full-time corporate worker and cooks at home for her family. Usually she follows recipes from online sources, but she always finds herself shuffling through all the different sources and juggling with her phone during the cooking process. This makes the overall experience messy, and confusing. And all in all, she finds this very distracting. She is comfortable with technology and can easily adopt a new app if it provides a solution to her problem.. She would want nothing more than not having to touch the phone while following a recipe. And also having the technology to organize all the recipes into manageable steps, one after another.
Golas: Follow recipe hands-free; having all her recipes organized in a place; no interruptions mid-cooking.
Frustrations: Screen timeouts; greasy hands make touchscreen unusable; juggling between recipes.
Persona 2: Danial, 62 Retired, Cooks more at home
Danial is freshly retired, and felt cooking is a good activity to both kill time, and save money. He is not fluent in tech, and small text and confusing interfaces overwhelm him. Oftentimes, he loses his way when following a recipe, forgets the steps and sometimes he forgets to ready all the necessary ingredients beforehand. His weak eyesight is another result in him struggling to keep focus on the screen and causing strain on the eye. He also struggles with motor precision when tapping small buttons. He would benefit from a cleaner Interface, larger fonts and widgets, and a cook mode that walks him through the recipe without error or skipping any steps. An ingredient list generated for the selected recipe would also be very useful for him.
Goals: Follow recipe step by step; interface that is easy on the eye; ingredients prepared before starting the recipe.
Frustrations: Small font size; confusing interface; missing ingredients.
User Tasks
The following four tasks summarise the primary interactions of users with the app:
Task 1: Import Recipe and add into the cook book
High-level Task: Saving recipes into cook books from the internet.
Low-level Steps:
→ In the app, navigate to cook book section
→ Select any existing cook book or create a new one.
→ Click on the add button, from the options select ‘Import from URL’.
→ Paste the copied link and click ‘Confirm’.
→ Review details and hit save button
Task 2: Initiating the ‘Cook Mode’ for the current recipe
High-level Task: Follow a recipe hands-free.
Low-level Task:
→ From the respective cook book, select the desired recipe.
→ Click the ‘Start Cook Mode’ button.
→ The cook mode is set to action, the first steps of the recipe are displayed and read out loud.
→ The user can use a hand gesture(swipe right in the air) to hop on to the next steps.
→ Users can now continue through steps without touching the screen.
Task 3: Search for a recipe using pantry ingredients
High-level Task: Discover a recipe based on the available ingredients
Low-level steps:
→ Navigate to the pantry section.
→ Tap ‘Search by Pantry’.
→ A list of recipes appears, matched with available ingredients.
→ Browse through the list and find your desirable recipe.
Task 4: Generate a grocery list based on the recipe
High-level Task: Automatically create an ingredients list for selected recipes.
Low-level Task:
→ Open the recipe you want to cook.
→ Tap the ‘Generate Grocery List’ option.
→ Review the list generated.
→ Add or remove items based on availability.
→ Save and share the list.
Navigation Structure / Sitemap
The navigation style is designed and organised around five main sections in a bottom navigation bar: Home, CookBooks, Cook Mode, Pantry & Grocery, and Community. Each section serves a specific part of the cooking process, and is just a tap away.
• Home: Displays recent activity, quick-access cookbooks, and has a suggestion section.
• Cookbooks: List of all the cookbooks of the user. Inside each cookbook is another list of recipes. Clicking on each recipe displays an individual recipe page.
• Cook Mode: Accessible from any recipe page. It displays the recipe steps one by one, keeps the screen on throughout the recipe, and allows gestures.
• Pantry & Grocery: Contains two sub-sections: The pantry which holds the current ingredients, and the Grocery list that is auto generated for the desired recipe. Or a user can create a custom Grocery list according to what they need to buy. Pantry based recipe search is also available.
• Community: It allows users to interact with other users and share the recipes and reviews among them.
4.2. Prototype Development
The prototypes for CookEase progressed from rough paper sketches to a full interactive high-fidelity prototype. Each stage had a purpose, earlier sketches were made to map out the general idea, later prototypes tested the specific interactions and visual design.
Low-Fidelity Prototype
The low-fidelity prototype was a collection of hand-drawn sketches of the main app screens on a paper. The goal was not to finalise a design but to sketch and map out basic layouts of the main screens and determine how the users would move through them when navigating. Screens sketched were the Home screen, the cookbook list, individual recipe view, Cook Mode step display, the pantry, and grocery list.
These sketches were used to walk through the general layout of the application and determine if there were any additional features or screens that could have been added in or if there was any area of improvement in the app layout. There arose several issues, like the first pantry layout made it hard to differentiate between available and missing ingredients at a glance. And there were many more such issues in design and layout that were addressed before moving forward with the design.
Medium-Fidelity Prototype:
The medium-fidelity prototype was a digital wireframe designed in figma. At this point, we gave the screens proper, defined layouts and placeholder content and all the basic navigation flow. Few of the elements were made clickable to get the idea about the general navigation flow of the app. Greyscale was used to keep focus on layout instead of the visual design.
The interactions prototyped during this stage were the recipe import flow, the cook mode step-by-step view, and the process of creating the grocery list from a recipe. Feedback from the testing of these wireframes led to refinement of several sections. Cook mode screen was simplified to make it less distracting and less confusing, pantry search was rearranged to make the difference between available and missing ingredients more clear.
High-Fidelity Prototype:
High-Fidelity prototype was developed in figma with full visual styling including the color palette, typography, icons, and realistic content. Accessibility requirements were implemented at this stage: all the interactive elements like icons were labelled, font size was increased to make the text more readable, corrected element spacing throughout, and the theme was adjusted to lighter colors.
Cook Mode received much attention at this stage. The step display was made minimalist and as less confusing as possible with only the necessary information displayed. The steps were structured clearly, and the right navigation control was enabled.
High-fidelity prototype covers all the features of the app discussed thus far: cookbooks, recipe management, recipe import methods, Cook Mode, pantry and grocery list, search based on pantry, recipe ratings, and community feature.
4.3. Formative Evaluation
Conducted formative evaluation after the development of the high-fidelity prototype. We aimed to identify the usability problems in the first working prototype.
Task-BasedEvaluation:
The evaluation involved task-based sessions where the participants were given a particular task to complete in the working prototype. After they were done with the task, they were given a set of questions that asked them to explain their experience throughout each step they performed to complete the given task. A member of the team maintained a document of these responses for evaluation. The tasks were performed by the participants without any guidance to ensure transparency in the process.
Participants:
The evaluation involved many participants, all from a different range of age groups. The most note-worthy participants included two young adults (aged 20-25) who cook regularly, one participant was in late 60s with little to no tech familiarity, one participant was 30 in age but described themself as a beginner at cooking , and last participant was 18, a regular and passionate cook with high tech proficiency.
Problems Discovered & Improvement in Design:
Among all the responses several recurring issues were identified:
•Entry into the Cook Mode was not obvious. Many of the participants stated that they were not sure about how to step into the Cook Mode. So, the button was made more prominent and moved to a primary click-able target location.
•Users were not sure about the gesture controls so a hint card was added at the start of the Cook Mode to make the control commands and gesture more clear. The gestures and commands were improved and shortened to make them easy to recall.
•Participation from elderly gave a useful insight that the theme of the app was too dark and caused strain to the eyes. Thus, the theme was lightened.
These insights and honest responses from the participants led to many improvements in our app. The final prototype was then created which resolved all these design problems.
5. Summative Evaluation
5.1. Methodology
Participants:
A total of 10 participants were involved in the summative evaluation. The average age range off all the participants was 18-65 years, which covered a large number of user groups. There were 6 female and 4 male participants. Out of these 10, 7 were highly educated with mostly graduated from or currently enrolled in the undergraduate programs. Out of the remaining 3, 2 had completed their secondary degree, and 1 had a postgraduate degree. Recruitment of participats was done through the personal networks. And university circles, to ensure there was a diversity in the experience and technilogical proficiency. Two participants had less familiarity with smart phones, and one had slight visual impairment. The different conditions were relevant for the thorough evaluation of the app.
Evaluation Setup
Evaluation was conducted via google form, the participants completed the questionaries on their own mobile devices. They were given a link of the figma high-fidelity prototype and operated the app before answering the questions so it was sure they were answering the questions based on honest experience about the general app functionality.
Procedure
The evaluation session followed the following phases in order:
Task Testing Phase: Participants operated the app to explore the features and complete certain tasks.
Post-Test Questionaries: A set of questions organized in relavent sections were given to the user, which the answered based on their experience of the app.
_Task Assigned to Participants _
Participants performed the following main tasks:
•Task 1: Navigate to the Cookbooks section to create a new cookbook, add recipes from the app or import recipes.
•Task 2: Open any of the recipes and generate a grocery list that automatically filters out the pantry ingrediants.
•Task 3: Search for recipes based on the pantry ingrediants.
•Task 4: Explore the app whole, and generate a custom list of your own choice.
5.2. Results
Study Variables
•Independent Variable: CookEase high-fidelity prototype, the system being tested.
•Dependent Variable: Task Completion time and rate, error rate, NASA-TLX scrores and CSUD scores.
•Controlled Variables: Prototype Version, Order of tasks.
Statistics were used to analyze the result using percentages.
_Usability Results _
NASA-TLX
Dimension Mean Score Deviation
Mental Deman 28.4 7.2
Physical Demand 18.1 5.6
Temporal Demand 22.7 6.9
Performance 31.5 8.1
Effort 26.3 7.4
Frustration 20.6 9.3
Total: 24.6 6.8
CSUQ Results
Subscale Mean Score Std. Deviation
System Usefulness 5.8 0.74
Information Quality 5.6 0.81
Interface Quality 6.1 0.66
Overall Score 5.83 0.72
Performance testing
Task completion rate and time:
Task Completion Rate Mean Time Std. Dev
Task 1: Import Recipe 80% 74.3 12.4
Task 2: Cook Mode 90% 58.1 15.6
Task 3: Pantery Search 75% 41.7 8.3
Error Rate
Errors per Task Mean Errors per Participant
Task 1: 3 0.3
Task 2: 5 0.5
Task 3: 6 0.6
Think Aloud Session
Following key observations were made in the think aloud session:
•P2, P5, and P8 said that the Cook Mode section felt very clean ans smooth. They liked the idea of only the current step being displayed, further adding that this avoids confusion.
•P1 and P3 reported that the cook mode button was not prominent and that they might have searched for it in the wrong direction before finding their way to it.
•P6 and P9 said the gesture hint card at the start of the cook mode was very helpful.
•P10 appreciated the pantry-based search and stated further that it was a very helpful feature.
6. Conclusion
CookEasae was designed to tackle the persistent issue that was widely overlooked by most of the cooking apps. That was, the difficulty in using the app with hands occupied while cooking. Through iterative design and insight from surveys and users across different demographics, we made it appealing in both design and functionality. Summative evaluations confirmed that users found it very easy to use and that the app was beginner friendly. Furthermore, the survey results made it clear that the motivation for which we designed this app was readily fulfilled and the app serves its purpose well. The accessibility focused design made it well-received by the elderly users and the visually impaired users.
The project, however, does have limitations. The evaluation was conducted on a prototype and it is still not clear how well this hands-free style would suite a real world scenario. The sample size of 10 participants is sufficient for prototype evaluation, but not suitable enough to draw a general statistical conclusion.
Future work and improvements include developing a fully functioning application based on this prototype, implement voice recognition technology to add more onto the features of the app, The community section was a part of the prototype but not thoroughly evaluated and warrants a thorough study.
Top comments (0)