A1 — Sleep Tracker Paper Prototyping

Tiffany Lan
4 min readJan 10, 2018

--

Paper prototyping a paired sleep tracker application (HCDE 451)

Watch the video demo!

Introduction

Starting off winter quarter with HCDE 451 (UX Prototyping), we were tasked with coming up with an idea for a paired application between a smart watch and mobile device and creating a paper prototype, a low-fidelity 2D rendition. I decided to create a paired app that would sync data about a user’s sleep patterns. I began by jotting down ideas about what I though the app would accomplish, sketching out UI/GUI ideas, and studying similar existing apps like Apple’s Health app and Sleep Cycle. Below is a snapshot of the ideation process.

Notes & Sketches

Design

The purpose of the paired smart watch and mobile Sleep Tracker app is to track how much sleep, including nap times, the user is getting on a weekly basis based on day-to-day tracking. The smart watch app records sleep time and senses movement changes (ie: tossing and turning, getting up temporarily, etc). The mobile app uses the data collected from the smart watch to visualize patterns. Ultimately, these visualizations would help users to understand their sleep schedule and hopefully make better decisions.

Prototype

For this activity, low-fidelity 2D paper prototypes were used. I purposely constructed the paper prototypes to be larger in size than real life to bring attention to minute interactions and help inform usability problems.

Smart Watch
To begin, the user can scroll left and right on their smart watch between two options: sleep and nap. Selecting “sleep” would begin tracking the amount of sleep. Conversely, selecting “nap” would be the equivalent of a setting a timer to wake you up after certain intervals. These certain intervals would allow the nap option to work as a power nap tool. The user selects the option by tapping the large check area in the bottom thirds of the watch.

Above: Sleep/Nap Options | Below: Respective Timing Feature

Since a user may accidentally select an option, I wanted to implement a cancel/back feature. However, since there are unconscious movements involved during sleep time, I did not want the feature to be accessed unnoticed or too easily. Thus, I decided to have the cancel/back feature accessed by double tapping or a succession of two rapid taps. I used a consistent message (“Double Tap to Stop” ) whenever applicable.

“Double Tap to Stop”

Mobile Device
The mobile device app displays a graphic visualization based on the users’ sleep data. For simplicity’s sake, in this prototype, I limited the visualization to weekly comparisons. However, if I were to go forward, I would consider ways to map the data daily, weekly, monthly, and maybe yearly. As an extra feature, I would also like for the mobile app to give helpful insights and reminders.

Sleep Visualization by Week

Evaluation

To evaluate the prototype, I had one other person test the prototype. After usability testing, I made some iterations based on the feedback. Next, I got a classmate to help test the revised version. In both tests, I gave a basic overview of the paired watch and device’s purpose and their task— play through the prototypes as if these were real devices they were using and think aloud. I also received critiques from my classmates in class.

Paper Prototype Usability Test
In-class critiques on paper prototype

Analysis

In summary, here are some notes from the tests and critique of what worked well, what was confusing, and what features would improve the experience:

What worked well…

  • Big buttons on the bottom thirds
  • Clean, minimalistic design
  • Scroll/next features on smart watch and mobile device
  • Double Tap was not too distracting
  • Asking “Are you ready to wake up?”

What was confusing…

  • Before Revision: Does the default display of “18 seconds” mean the timer is counting up or down? (Note: Confusion due to non-interactive parts. This was changed in the video demo.)
  • Before Revision: What is the “Double Tap” is stopping?
  • Before Revision: After I finished, it says “time recorded”. What time? What does the time do or where is it recorded?
  • Before Revision: “Are you awake now?” is a strange question. Try “Are you reading to wake up?”
  • There’s no cancel/back button after selecting “nap”.

What features would make this idea more successful…

  • Track sleep cycle like deep sleep
  • Add detection of when awake/asleep to avoid user input
  • Use haptic feedback when the user wakes up
  • Allow user to add target sleep times

Conclusion— Effectiveness of Design

Overall, the UI of the prototypes were simple and intuitive for the tester to understand how to proceed and get where they want. However, the prototype suffered the most from wording. Although the UI was clean and intuitive, often the tester did not understand what the message was implying. This confusion caused me to realize that messages are part of good design just as much as UI; while messages should be concise, they should be just as user-friendly and informative.

--

--