About

For this project, I was tasked with designing and implementing an interactive user interface mock-up of a smart object. I was given the following options:

• Smart desk

• Smart cookbook

• Smart bike

• Smart windows

• Smart mirror

Ultimately, I chose to design and implement a smart cookbook. Note that if I were to develop a smart cookbook, this user interface would not be formatted for a website. Instead, it would be a part of a physical cookbook, which the users could hold themselves or hang in their kitchens for easy access.

Gathering Design Requirements

Interviews

To gather design requirements, I conducted three interviews. I spoke with Alberto, a 24-year-old mechanical engineering graduate student in person. I had a phone call with Jeff, a 49-year-old optometrist and parent. I conducted a written interview with Emma, a 22-year-old speech pathology graduate student.

The following were their answers to my interview questions:

1. How many meals do you typically cook each week?

Alberto: 2-3

Jeff: 4

Emma: 0-2

2. What cooking appliances do you have at your disposal?

Alberto: waffle maker, oven, stove, microwave, slow cooker, toaster, outdoor frill, fridge

Jeff: outdoor grill, stove, microwave, indoor grill, oven, toaster, slow cooker, fridge

Emma: microwave, blender, oven, stove, Instant Pot, air fryer, toaster oven, mixer, fridge

3. Do you often search for new recipes? If so, where, and how complex are they? If not, why not?

Alberto: No, I don't cook that often.

Jeff: Yes, typically online. Medium difficulty at the most (nothing too elaborate).

Emma: Yes, online (Google/cooking sites). Not too complex. I also ask my mother and mother-in-law for recipes.

4. What makes you choose one recipe over another?

Alberto: ingredients (likes/dislikes and allergies)

Jeff: difficulty and ingredients (healthiness, likes/dislikes)

Emma: if it's quick, takes fewer ingredients, has fewer steps, and looks tastier

5. What are some features you would like to see in a smart cookbook?

Alberto

• Tell what portions of ingredients are sold at different stores

• Click on ingredients to show alternatives

• Change serving size

• Measurement conversion calculator

• Ability to view images of a recipe

Jeff

• Automatically change the amount of ingredients based on how much you want to make

• Nutrition facts

Emma

• Collect ingredients from recipes and make a shopping list

• Assign recipes to specific days of the week

• Section for notes or editing the recipe to my liking

Assumptions About the Smart Cookbook

• The system has access to one or more recipe databases.

• The system has the ability to connect to the user’s other smart kitchen appliances.

• The system has a microphone, speaker, camera, and touchscreen.

• The system has access to the user’s location if they choose to share it.

Design Requirements

• The user wants to search for recipes according to their needs (time, complexity, ingredients, equipment).

• The user wants to follow the directions of a recipe without having to interrupt their workflow.

• The user wants to be able to easily adjust the amounts of ingredients according to how many servings they want to make.

• The user wants to compile a shopping list according to the recipes they plan to make in a given week.

• The user wants to be able to add recipe modifications (e.g. adjusting ingredient amounts, substituting ingredients, modifying cook times).

• The user wants to know the nutrition facts of the recipes they cook.

• The user wants to be aware of any food allergens that are present in a given recipe.

• The user wants to convert between measurements (e.g. cup to tablespoon) easily.

• The user wants to share their images and view other people’s images of recipes.

Design Challenges

1. How to inform the user of the next set of directions for a recipe

2. How to provide recipes according to the needs/wants of the user

3. How to make the user more informed before/during recipe preparation/cooking

Sketching Design Alternatives

To come up with ideas for the above design challenges, I completed a protocol for exploring design alternatives called "10-plus-10." See below for my ideas and associated sketches.

Basic User Interface (UI)

Controls

Implemented Now

• Search for recipes by name

• Filter recipes by…

  • Ingredients

  • Prep/cook time

  • Equipment/appliances needed

  • Complexity

  • Serving size

• Connect to a smart oven/stovetop to automatically set/change temperatures for cooking

Could Be Implemented Later

• Have the recipe instructions read aloud by the system

• Change the serving size of a recipe

• Save recipes to the user's profile

• Automatically create a shopping list based on saved/selected recipes

• Add personal notes to recipes

• Convert between measurement types

• Upload recipes

• Rate recipes

• Filter recipes by rating and allergens

• Share recipes with other users

Indicators

Displayed Now

• Recipe prep/cook time

• Recipe ingredients

• Recipe instructions

• Recipe nutrition facts

• Recipe image

• Recipe complexity

• Recipe serving size

• Equipment/appliances needed for a recipe

• The current temperatures of the connected smart oven/stovetop

Could Be Displayed Later

• The recipes saved by the user

• The generated shopping list

• Gallery of recipe images

• Allergens present in a recipe

Design Choices

• When the user clicks the filter button on the search page, a popup modal will be displayed, which will allow them to set various filters.

• Within the list of recipes on the search page, each recipe will have an overview (name, image, time, and complexity).

• When viewing a specific recipe, ...

  • all details of the recipe will be available (prep/cook time, ingredients, instructions, allergens, nutrition facts, images, complexity/difficulty).

  • a model of a stovetop and oven will be visible, with the temperatures of each burner and the oven displayed.

Prototype Sketches

I received the following feedback on my initial prototype sketches:

Overall

• The hamburger menu is unnecessary

• Use warm and inviting colors (red, orange, yellow, light green)

• Add a text-to-speech feature

• Add soothing background music

Recipes Search

• Make the recipe’s image the entire background of the search result card

• Make it clear that the recipe cards can be clicked (e.g. shadow)

• After selecting filters, show the chosen filters under the search bar so that the user remembers which options they chose

• Use an icon (magnifying glass) instead of the "Search" text

• Use an icon for the filter button

• Instead of "Recipes" put the name of the smart cookbook

Recipe Details

• Instead of going to a separate page, display a popup modal with the details

• Use a different icon for the back button (curved arrow, x, "return", <--) 

• Allow users to mark off instructions

• Allow users to mark off ingredients

• Allow the user to scroll down from within the instructions (not the entire page)

• When the user scrolls the entire page, keep the title and back button at the top

• Add audio feedback when marking an instruction as complete

Implementation

Availability and Demonstration

The code for my implementation of this smart cookbook is available at https://github.com/egardner2019/UIDesignProject1. This code is deployed at https://cookingcompanion.netlify.app/.

Colors Used

The following color palette is used throughout the cookbook, with the greens being the primary colors, the dark grey being the secondary color, and the red being used only for more "dangerous" actions.

Controls

Search Page

Click the search bar and type a search query. This query will be compared to the recipes' names, and only the recipes containing the search query in their names will be displayed. The list of displayed recipes is automatically updated as the user types.

Recipe Details Page

On the recipe details page, click the "View Original Source" link to be redirected to the recipe's original posting.

While progressing through the instructions, click the buttons associated with the current instruction. Because this cookbook is connected to the user's oven/stove, this will automatically set the users actual oven/stove burners to the required temperature for the instruction. These changes will be shown in the oven model displayed to the right of the instructions.

After finishing with the oven/stove, click the "Turn off oven and burners" button to connect to the oven and stovetop burners and turn off the heat to both.