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.
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.
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.
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.
To navigate Rita Recipes on the smart watch, users have to swipe or tap on the interface. Ideally, users should be able to use voice commands so that they can keep their watch clean and have their hands free to cook. Since I am exploring paper prototyping as a technique for testing graphical user interfaces this week, I decided to limit navigation means on the watch to swiping and tapping. If I had more time, I would like to explore the voice-activated mode of Rita Recipes.
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.
Below is a list of materials used for the prototypes:
- 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.
The “Saved Recipes” section can be accessed through the tab bar at the bottom of the app screen. In this section, the app only shows recipes saved by the users. There is a search bar to help users search through their saved recipes.
When users tap on a recipe, they will be able to see the ingredient list and instructions. If users want to follow the recipe, they would tap on the “Send to Watch” button, which would create an alert on the smart watch.
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.
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:
- Find the avocado ice cream recipe that was already saved
- Open this recipe on the smart watch and follow the recipe to completion
Usability test participants were encouraged to think aloud. After the tests, I asked participants some questions to understand where the prototypes did well and where they needed improvement.
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:
- The UIs are attached to a strip of cardstock, allowing the participant to see the sequence of screens fully. The participant said that being able to see the sequence made him believe that swiping left would lead to the next screen.
- 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.
I revised the watch component to address the first two issues. To address the first issue, I recreated the UIs on individual pieces of paper and slid them into the watch’s frame. To switch between screens, I would remove or insert the corresponding screens instead of sliding a strip of the UIs through the frame as before. This change also ensures that only one screen at a time. To make it clearer how to navigate between screens, I drew arrows at the bottom of the screens. Swiping is still supported.
I conducted another usability test to evaluate the revised watch component. The original phone component was used for the test since I did not make any changes. The second usability test participant completed the tasks without encountering any issues with the components. Similar to the first test participant, he also suggested making the watch hands-free.
While I agree that users should be able to use voice commands to operate the watch component of Rita Recipes, I was only testing the app’s graphical user interfaces through paper prototyping. I think the voice-activated mode would have its own usability issues to deal with and I want to save that for future exploration.
In general, I received positive reactions to Rita Recipes. Both test participants said that they would use Rita Recipes with a smart watch. Below is a summary of what went well with the prototypes:
- The UIs for both components were clean and simple
- 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.
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.
Rita Recipes is a design concept that shows promise. People found the design simple, easy to use, and useful. In the future, I would like to expand on Rita Recipes and explore a voice-activated mode.