Designed a mobile app for fun.

Everyone's quest for better sleep

button-down-black

2017, RESEARCH / UX DESIGN / VISUAL DESIGN / USER TESTING

2017, RESEARCH / UX DESIGN / VISUAL DESIGN / USER TESTING

Sleeptune

Sleeptune

Sleeptune is a mobile app that uses data from your digital wristband to help improve your quality of sleep.

I pursued this UX/UI project in 1 week to practice my design methodology: identifying user pain points, conducting market research, defining information architecture, sketching, laying out user flows, wireframing, and ultimately piecing together an effective sleep tracking app through iterative prototyping and user testing.

Sleeptune is an app on your mobile device used in combination with a digital wristband to help you improve your quality of sleep.

I pursued this UX/UI project in 1 week to practice my design approach: from identifying user pain points, to conducting market research, defining information architecture, ideation of functionality, sketching, laying out user flows, wireframing, and ultimately piecing together a great sleep tracking app through reiterative prototyping and user testing.

sleeptune-mockup-1

Problem Space

To many who are trying to stay afloat in their university studies or manage their busy schedules while building the early stages of their careers, sleep can often become the sacrifice. Sleep is imperative for cognitive and physical functions. Over time, lack of sleep can lead to long-term health disorders, reduced memory and focus, and impaired physical ability. With quality sleep, people can improve not only their health, but their life satisfaction and emotional stability. This is a goal I want to help busy people achieve.

Problem Statement

How might we improve the quality of sleep for those with busy schedules?

User Research

In order to identify the pain points for potential users, I interviewed 7 people. I collected information regarding their sleep patterns, exhaustion levels, knowledge of sleep, current sleep strategies, and motivations for quality sleep. I grouped the responses by pattern and created the archetypical model below. The user persona served as a starting point to begin the user-centered design process.

During user interviews, needs were raised by an interviewee: "I want to know how many hours of REM and deep sleep I need, what I can do before bed to get better sleep, and know the amount of time I need to sleep a day in general for optimal rest."

User Research

In order to identify the pain points for potential users, I interviewed 7 people. I collected information regarding their sleep patterns, exhaustion levels, knowledge of sleep, current sleep strategies, and motivations for quality sleep. I grouped the responses by pattern and created the archetypical model below. The user persona served as a starting point to begin and understand the user-centered design process.

During user interviews, needs were raised by an interviewee: "I want to know how many hours of REM and deep sleep I need, what I can do before bed to get better sleep, and know the amount of time I need to sleep a day in general for optimal rest."

sleeptune-persona

Market Research

Sleep tracker apps and watches use an accelerometer, a device built into smartphones that senses movement. The data generated from movement is used in an algorithm to estimate sleep time and quality. The sensitivity of the accelerometer and algorithms greatly affect accuracy. Some products include sensors to detect skin and room temperate to help determine stages of sleep. However, apps that only use an accelerometer cannot accurately measure sleep stages, because it only monitors movement and there isn't much variation of movement between stages. Bed partners, children or pets can affect the movement and noise detected by apps that require your phone to be placed next to you in bed (Sleep Health Foundation).

I continued my market research by investigating the most widely used sleep apps and why they became so popular. I studied their functionalities, as well as analyzed their capabilities and interfaces to identify areas of improvement. 

sleeptune-market

Sleep Cycle uses the iPhone's accelerometer to record sleeping habits to track sleep quality over time. It uses sleep cycle theory to wake up the user at just the right time to ensure optimal rest. Users set a window of time (e.g. 30 minute stretch) instead of a traditional pinpointed alarm time, and the alarm rings when the app judges that sleep movement is just right (Tom's Guide).

Fitbit device can record the duration of users' sleep and set a silent alarm; track light, deep, and REM sleep to understand sleep quality; and work towards a consistent routine and receive reminders to help users  stay on track. If not already owned, the sleep tracker product must be purchased separately, and they range from watches and wristbands to clip-on devices (Fitbit).

Given the existing offerings, my goal was to design an app that combines the best of these functionalities and incorporate additional value-add features. I wanted to enhance the user experience, improve the user interface, and simplify the app while incorporating more data.

Key Features

Young adults and adults generally need 7 to 9 hours of sleep a night. However, there are many more factors that contribute to quality of sleep aside from quantity. Through my research on the quality of sleep, I identified the key features that I wanted Sleeptune to include.

sleeptune-diagram

Figure reformatted from Six Steps to Sleep

  1. Choose Sleep Type: Users can choose to start either a full sleep or power nap session. Sleeptune will assess the user's sleep stage and choose the optimal moment to wake the user with a psychoacoustic alarm.
  2. Set Your Routine: Sleep quality can be improved when people wake up and sleep at the same time every day. Users can set their goals for these two times and they will be used as benchmarks against actual sleep times.
  3. Measure Progress: Users can track sleep quality progress by inputting how they feel on a "Groggy" to "Energized" slider every morning.
  4. Track Sleep Debt: Studies show that "short-term sleep loss can be reversed when people make up hours of sleep lost" (Harvard Women's Health Watch). Sleeptune will record sleep debt hours and notify the user when their sleep deprivation nears 20 hours, which can become long-term sleep deprivation.
  5. Identify Disturbances: Studies show that disturbances can detract from deep sleep even if people do not wake up from them, such as traffic noises, sunlight, or night critters.
  6. Show Stages of Sleep: Post-sleep analysis will compare overall sleep quality against the current average or ideal night of sleep. This information will be used for analyzing trends, generating  recommendations, and flagging any risks.
  7. Early Diagnosis: There are many common and preventable sleep disorders. Delayed sleep phase syndrome (DSPS) can be diagnosed based on symptom descriptions and sleep logs. Sleeptune can act as a sleep log and use analytics to discover any concerning patterns to the user.

Sketching

I considered the most effective way to visualize each metric to provide the most valuable analysis to the user. I decided on a mental framework that structured the information as current ("Home"), past ("Trends"), and future ("Create Sleep Cycle"). 

sleeptune-sketch-1
sleeptune-sketch-2

User Flows

Though the user flows are not particularly complex for this app, nor do most of the functionalities follow a chronological process with decision-making steps, I laid out the user flows by bottom navigation categories. I included an onboarding flow that users will see when they open Sleeptune for the first time.

sleeptune-userflows

Style Guide

I created a style guide to direct my creative process for UI design. I decided to focus on a blue palette, as I associate blue with calmness and nighttime. My vision for a user's first impression of Sleeptune was simplicity and intuitiveness. 

sleeptune-styleguide

Wireframing

Bringing all the parts together, I used my style guide as visual design guidance and my sketches as a basis for user experience design. I adjusted the design as necessary as I added details into my high-fidelity wireframes. I kept in mind the design goals I set out to achieve: create a platform that combines the best of sleep tracking functionalities; improve upon the user experience and user interface; and simplify the app while incorporating more information than other apps.

sleeptune-clay
sleeptune-onboarding
sleeptune-home
sleeptune-trends
sleeptune-sleepcycle
sleeptune-other

Prototyping

I created a prototype and conducted some usability testing to collect feedback for iteration. I used InVision App to create an interactive representation of the product with my wireframes, embedded below.

Usability & User Testing

Due to the nature of this project, I simplified the usability testing process for the purpose of iterating my wireframes to improve usability. I shared my prototype with 5 people to collect general feedback on my prototype and assess their understanding of the product.

The feedback I collected was largely focused on subpar readability, lack of help documentation, convoluted copy, and information design issues. I learned a lot about visualizing data in a way that provides value to the user. I converted the y-axis for the "Progress" graph into percentages based on sleep debt on a scale of 1-20 hours; sleep stages by closeness to the ideal duration in each stage; and progress by the slider scale. 

sleeptune-testing-6
sleeptune-testing-7
sleeptune-testing-1
sleeptune-testing-2
sleeptune-testing-3
sleeptune-testing-4
sleeptune-testing-5

Iteration

The artifacts shown in this case study were re-created a year after the project was completed. I revisited this project to improve UX issues, refine UI components, and elevate the overall look and feel of the app. I gave particular attention to the testing feedback, iOS Human Interface Guidelines, and Material Design.

sleeptune-markup
sleeptune-mockup-2

next project

EPOCH