IN4MATX 131: Human Computer Interaction
Assignment #6 Sketching and Prototyping

Introduction

This assignment will introduce three sketch ideas that reasonably address the requirement and convert the design approach to an interactive prototype in Figma.

Persona

Sketch #1

I concentrate on discussing the issue of inefficient use of bake ware and equipment in most online baking tutorials in my first sketch. In my previous assignment #5 contextual inquiries and interviews, I learned that most baking tutorials are written for the oven. Most people do not have the kitchenware provided as an alternative to the oven; therefore, users who regularly search for baking tutorials when trying a new baking recipe cannot find and use proper bake wares. I created this design that allows the users to easily search for an alternative baking tutorial that does not require a traditional oven and read them in a clear and intuitive way. After users are navigated to the recipe’s search tool, a list of different bake ware was presented to them so they could find tutorials related to their needs. Users could start their search by entering the keyword and confirming the desired bake ware. A list of baking tutorials is presented to users; each result contains the recipe’s name, image, brief description, baking time, form of the recipe, and rating. Users could choose any recipe they found appealing. On the recipe homepage, the text is organized into different sections that are easy to follow. With the text’s different font sizes and the paragraph’s consistent indentation, each step can stand out and raise users’ interest. The recipe will further present the ingredients list clearly with precise quantities for every ingredient. This sketch highlights the fundamentals of designing a recipe in a clean and minimalistic way and allowing users to use the bake ware properly, which would make it easier for the people who are new to baking to follow and decreases the chance of error.

Interactive Prototype

Screenshot:

Interactive Elements:

The interactive elements in this prototype are as the following:
The check boxes in the filter page and the ingredient page are interactive because users can click them. They allow users to refine the bake wares and check the ingredients that are readily available.
The back button on the top left of each page is interactive because users can click it. It takes users back to their previous page.
The confirm button on the top right of the filter page is interactive because users can click it. It helps the user to verify the bake wares that are ready and find tutorials related to their needs.
The buttons beneath the status bar and the recipe’s name are interactive because users can click on them. After clicking the buttons, it will change between the Ingredient List view and the Direction view.
The search results are interactive because the user can click on them. Clicking on any search result will send users to the recipe listed.

What Users Can Accomplish with Your Design