Team Members: Scarlett Wu, Jennifer Wu, Connie Kim
Recipe Assistant is a web application that also utilizes a voice user interface. In the web application, the user is able to view recipes that have been added to the database on the home page. The user can add a recipe by clicking on a button from the home page. The user then would input the recipe title, image that would be uploaded or URL provided, ingredients, and steps on how to make the recipe. Once the recipe has been submitted, the home page will display the recipe among the rest of the recipes. You can choose “View ingredients” to see the needed ingredients and “View Recipe” to see the image, ingredients, and instructions for the selected recipe. The VUI portion allows the user to choose which recipe out of the recipes within the database that the user wants read out loud, and the Recipe Assistant will then read out the ingredients and steps. The default behavior is that the user reads the ingredients and after the list is read, it will lead into the directions. The user also has the option to jump straight to the steps. The steps would be read out sequentially. In both cases, Alexa can start over from the beginning, read the next and previous step, and “exit” (with the command “main menu” or “cancel”) back to the main dialog, where the user can select another recipe.
Recipe Assistant Sample Scenarios
1) Alice, a beginner, wants to make a smoothie after having saved some of the recipes. She asks the skill about what she can say and finds that she wants to make a smoothie. After running through the list of ingredients, she realizes that this isn’t exactly the smoothie she wanted. She wants to make a strawberry smoothie, so she cancels the current mode to go back to the main menu to make the strawberry smoothie. A variety of an utterance is shown here in the more conversational form of “let’s make a strawberry smoothie.” Alice follows the list of ingredients and the steps afterward to completion. Throughout such an interaction, Alice generally follows the utterances Alexa provides but shortens some such as “next” and “previous.”
2) Bob has used the voice skill many times and wants to jump to a specific recipe because he’s preparing dinner. He first decides to make something quick, like lemonade, but switches to the dinner’s main course. He already has the ingredients so he wants to jump to the directions. He knows the shortcut to this is saying “directions,” not limited to “read recipe.” Bob goes through the instructions; he sometimes uses full sentences, such as “what was the last step”, but Bob wants to double check, so he will say “start over.” Ultimately, Bob knows the directions and wants to exit the skill on his own terms, so he says, “Go back to main menu” (an alternative to saying “cancel” or “main menu”) and tells Alexa “goodbye” as his way of cancelling.
My role for this project is focusing on how to make the website looks nice. I collaborated with Scarlett to come out some basic ideas on the website layout. With ideas in mind, I worked on css for all the pages. In addition to that, I also explore multiple fonts and colors. I ended up choosing Fjalla One and Roboto as the Typography and using #ff4431 as color.