UX Prototyping Techniques | Paper Prototyping

Scenario

You are working at a design strategy consultancy and you have been asked by management to come up with some new concepts for wearable tech products. Your team is given the challenge of a system that combines a smart watch and a smart phone, and asked to develop a product concept that involves synchronization of data between the two smart devices.

Design

Recipe apps like Yummly provide users with access to thousands of recipes on their mobile devices. These apps provide an ingredient list and step-by-step instructions for each recipe so that beginners can recreate the dish at home. I was inspired by these recipe apps for this design challenge.

Functionality

My design concept is Rita Recipes, an app that syncs saved recipes between the user’s smartphone and smart watch. Users browse and save recipes on their smartphone. If they want to use one of their saved recipes, they can sync the recipe to their smart watch. Once the smart watch has received the recipe, it will divide the recipe into several screens so that users can follow the recipe step-by-step without being overwhelmed by the entire recipe.

Rationale

I came up with Rita Recipes out of personal experience with cooking. I use recipe apps to find and save recipes so that I can use them in the future. When I want to use one of these recipes, I would open it up on my phone and follow the instructions step-by-step. Most of my recipes use meat, oil, and other sticky substances so I have to wash my hands frequently before I refer back to my phone for the next steps. This can become tedious and time-consuming, especially since I have to unlock my phone each time. Smart watches are more convenient because they are worn on a wrist and do not need to be unlocked after a period of inactivity.

Conceptual Sketches for Rita Recipes

Prototype

The UIs were sketched onto printer paper, which was very flimsy. I created device frames made of cardstock and sheet protectors so that usability test participants can hold or wear the devices without crinkling the UIs. Interestingly, the frames resemble the bezels on smartphones and smart watches while the sheet protectors simulated the glass screen look.

  • Printer paper
  • Sheet protectors
  • Double-sided tape
  • Colored pens
  • Rubber band

Phone Component of Rita Recipes

When users open Rita Recipes on their smartphone, they will see the “Browse Recipes” section of the app. The app displays random recipes but users can use the search bar to find other recipes. Recipes can be saved (or unsaved) by tapping on the bookmark icons.

UIs for the Phone Component of Rita Recipes

Watch Component of Rita Recipes

The smart watch displays an alert when users send a recipe to the watch. The alert allows users to follow the received recipe, change to a saved recipe, or close the alert and not follow any recipe. When users select a recipe to follow, the app will show the ingredient list and instructions in a series of screens. On screens with instructions, there is a progress indicator (ex: “1 of 4”) to inform users of which step they are on. Users navigate between screens by swiping left or right. Once users finish the last step, they would tap on the “Done” button to close the app.

UIs for the Watch Component of Rita Recipes

Evaluation

I conducted a quick, informal usability test to evaluate my initial paper prototype. The participant was a 20-year-old male with limited cooking knowledge and skills. After the test, I asked some classmates for their feedback on the prototype. Based on the feedback, I created a revised paper prototype. I did another test on the revised prototype with a 22-year-old male with some cooking experience. For both usability tests, I provided the participants with a brief overview of Rita Recipes and the following tasks:

  • Open this recipe on the smart watch and follow the recipe to completion
Usability Test on the Revised Paper Prototype

Analysis

I did not make any revisions to the phone component of the initial prototype since the first test participant and my classmates did not have any issues with it. However, there were several issues with the watch component of the prototype:

  • It is unclear how to navigate between screens. The participant said that if he did not see the screens attached to the strip of cardstock, he would have no idea how to navigate the watch’s interface. He did not know if he should swipe or tap.
  • People thought that it would be better if the watch could read the recipe to users because users might have a hard time reading the screens if there is a lot of text. Voice activation would free users’ hands and keep their watch clean.
Revised Watch Component of Rita Recipes
  • Actionable elements (ex: search bars and buttons) were self-evident
  • Prototypes simulate real devices with the frames and sheet protector screens
  • Splitting of functionality to two devices. The phone component is to browse, save, and follow recipes while the watch component is to follow recipes more conveniently.

Conclusion

This week I got to experiment with paper prototyping and learned how to use this technique effectively. With common office supplies, I was able to explore and test a design concept without having to code. Through the critique and usability tests, I identified what went well and what needed improvement with the paper prototypes. These takeaways helped make the design more effective.