SmartChef: Interface to a Smart Object
October 2023, Class Project using React.js︎Overview: The interface to a smart object tasked us with choosing an everyday object and creating a “smart” version of it. Features were determined by interviewing users and finding needs. Sketches where then created and finally the application was created using react.js
︎Objectives:
- Follow the design process to discover needs
- Use React.js to create a web application
- Add two advanced design requirements
Check out the code on GitHub or the Live Demo
︎Design Requirements
- When cooking the device does not require the user to touch the screen.
- The
device can display specific recipes based on the settings of the user profile.
-
The
user can ask for alternatives or alterations to recipes when cooking.
︎Design Assumptions
- The device already has functionality to scrub
recipes from the web or has some other ability to input recipes.
-
The device is a tablet sized device with bumper
buttons on the bottom as well as a touch screen.
Interview Results
3 participants were asked about their cooking habbits in order to identify what problems a smart cookbook would need to address.
What does the average week look like for you when it comes to cooking?
Participants said they typically eat out once or twice a week and cooked the rest. Typically they would cook a meal and then eat the leftovers the next day, alternating between cooking and leftovers.
What appliances do you use during cooking?
All participants said they had access to and used a stove-top and microwave. Other appliances typical of the participants was an Insta-Pot, air fryer, or rice cooker.
Do you look for new recipes often? If so, where, and how complex are they?
Participants said they did not often seek out new recipes. On the times they did try something new it was because of an external factor such a special occasion or a recommendation from a friend.
What makes you pick a recipe over others?
Simplicity was the number one factor when choosing a new recipe. Participants said they did not want to have to purchase specific ingredients of use appliances they don’t have.
How do you follow a recipe while you cook? What were the pros and cons of that method?
Participants mostly followed along with a video. They reported having to go back and check the video, as they’d often forget steps. The visual element of video ranked highly as a pro while participants reported frustration with having to constantly wash their hands.
“I cook, but only when I have time. I don’t usually have time to cook something complicated.”
“When I’m following a recipe I constantly have to wash my hands to touch my phone”
“For me cooking is a social experience. I cook with a roommates and share recipes with them.”
Sketching Activity
︎When cooking the device does not require the user to touch the screen.
︎The device can display specific recipes based on the settings of the user profile.
︎The user can ask for alternatives or alterations to recipes when cooking.
︎Prototype Sketches & Feedback: Users responded favorably to the horizontal configuration, appreciating the reduced number of physical buttons and enjoying the progress bar feature. The card format was deemed intuitive, but there was some confusion about distinguishing the screen from the bumpers, highlighting the need for clearer design in future prototypes.
ChatGPT Collaboration
︎Context API: One of the biggest challenges in the implementation of this application was figuring out how to pass states and props between unrelated components. ChatGPT suggest context ai and showed me how to construct a component that would hold props and states shared by unrelated componenets.
︎useEffect(): One of the challenges was displaying the different recipes based on the appliances selected. At first I tried to conditionally render different components, but that proved too clumsey. ChatGPT suggested a better way using the useEffect() method.
︎Debugging: This being my first time in javascript I found begugging to be more difficult than normal. Often times my code would compile, but wouldn’t have the correct visual effect. ChatGPT provided very helpful in debugging the code. Specifically it was able to help me identify a bug in which my code was not giving enough time for a state change to occur.
Final Design
︎C-Level: Display information for different mock users or situations.
Smartchef has a basic UI that will display different recipes, allow you to select those recipes, and then follow each of the different steps of those recipes.
Smartchef has a basic UI that will display different recipes, allow you to select those recipes, and then follow each of the different steps of those recipes.
︎B-Level: Display information for different mock users or situations.
The user can change the selected profile which will load a default list of appliances. While appliances can still be changed the profile will also load the same appliances.
The user can change the selected profile which will load a default list of appliances. While appliances can still be changed the profile will also load the same appliances.
︎A-Level: Enable the user to input a complex set of selections.
The user can select different appliances to update which recipes are displayed. When in recipe mode the buttons can also change meaning depending on the user’s choices.
The user can select different appliances to update which recipes are displayed. When in recipe mode the buttons can also change meaning depending on the user’s choices.
︎Menu Page: The Menu page displays the avalaible recipes based on the the selected appliances. By selecting different appliances from the drop down menu, different recipes will be displayed.
︎Profile Selection: In order to prevent having to repeatily selection appliances, regular user can have profiles that store default appliances. Once selected the selection on the dropdown menu will be updated to reflect their choices though the user is still free to change the selection.
︎Selection Page: Once a recipe has been choosen the user is taken to the selection page. Here they can see the required ingreidents and a short description. At this point the bottom row of buttons appears, allowing the user to use the physical buttons to navigate instead of using touch. Once start cooking is selected the user is brought to cooking mode.
︎Cooking Mode: In cooking mode the user only needs to use the physical buttons to navigate the recipe. The Home and Selection buttons still require touch, but this is intentional to prevent the user from accidently exitting the recipe. During this process the assignment of the bottom buttons can change. Let’s see if we press the button labeled “How Spicy?”
︎Changing Buttons: Now that we’ve clicked the “How Spicy Button” the bottom row of buttons has changed. Let’s say we want our Beef and Broccoli to be mild. One the mild button is pressed the buttons will change again, this time instructing us on how to change the recipe to make it mild. Once we press Ok we are brought right back to where we left off.
︎Custom Buttons: There are numerous ways the buttons will react depending on the recipe. However, not every step of the recipe has a checkpoint, in fact most don’t. It is only at the steps where the user’s needs might diverge from the recipe that there is a checkpoint.