In attempting to build a prototype for this assignment, I decided to first explore the current interfaces that existed on the internet and went from there. After my research, I determined that the Cooking Voice Interface would be a more suitable design to build compared to the other topic. I wanted my design to reflect the conventional stovetop interface above the oven or on top of the stove, so I conceptualized a touchscreen UI and decided to use Figma to prototype this.
Like Chapter 6 of our Sketching User Experiences Sketchbook suggests, I considered how user’s existing mental model of how Stovetop interactions are and decided to prototype around that. Displays have existed on these interfaces for quite some time, initially being LCD screens. Since users were familiar with the display but still wanted to control the knobs for heat, I added them to the touchscreen so that they could be manipulated digitally while still helping users to understand how they are interacting with the system. In an article published by the Nielsen/Norman Group, the authors discuss the concept of ‘Natural Mapping’. Users often get confused when the arrangement of elements in the controls doesn’t reflect the arrangement of the objects they control. In my design, I considered that the circles that control the elements should be placed on the screen exactly as they appear in the real world, so that users would not have to relearn how the system works to use it, preventing errors from occurring.
Use Case – Cooking Tacos
This Prototype is navigated through the use case of making tacos. The user is presented with the inital welcome screen, where they are asked to make a command. The user asks; “Show me taco recipes”. The system returns with the top recipe and a new conversation box that shows the user the conversation history. The user then sets a timer to complete the first step using their voice. The system responds with a timer. After the timer is completed, the user requests the next step, and the system responds. When the user wants to cook, they say “Burner 3 medium”. The system knows that this is the front left burner, and turns it on to an average temperature, which is reflected in the burner on the screen. The user then requests to close the recipe and leave a note on the screen. The system has a search bar at the bottom of the screen to show the user that its listening. When the user is done cooking, they say “Burners off”, and the system responds by turning off all burners. The system takes this as the end of cooking and closes the dialog window.
Prototype
- Figma File - https://www.figma.com/design/ZuR96YcZFDNOJ8wHd3yVRf/Hankins---Stovetop-Talk?node-id=0-1&t=hwcvqn8v8L7U74XT-1
- Prototype Link - https://www.figma.com/proto/ZuR96YcZFDNOJ8wHd3yVRf/Hankins---Stovetop-Talk?node-id=8-25913&p=f&t=XTcPGtzDIqxfuHWs-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=8%3A25913&show-proto-sidebar=1
Reflection
After finishing this prototype and wrapping up this quarter, there are a couple of concepts that will stick with me from this course.
- Prototyping is an iterative process.
Starting with our initial group project, we had no idea what to expect in terms of grading and tried to the best of our ability to make a product based on the directions. When we submitted the product, we realized there were areas that we could have improved upon and areas that were not flushed out enough. Though we were initially disappointed with our shortcomings, we realized the room for growth and were able to use the feedback from our initial projects to fuel our inspiration for our next projects. - There are many different ways to prototype.
When working with the physical prototype project for this class, we encountered the same amount of confusion as many of us had only come from backgrounds of UI design and/or storyboarding and sketching. We did not know that it was possible to prototype in the form of video, like how we saw in the Apple promotional video in class. When we made our own videos to showcase our projects, we realized that it really brought it to life and helped other people to understand exactly how our product functions and what it provides. - Working in a team can vastly improve your product.
During our last group project in class, we had a lot of interfaces and interactions to design in Figma, and for one person it was really overwhelming. By combining all our skillsets and focusing on each other's strengths and helping each other learn, we were able to prototype many different interactions and make the product really seem like a complete creation, compared to any of our individual work. Part of working in a team includes user feedback as well, as it informs our designs in important ways that a single individual cannot see.