Angie Kwan





Designed a mobile app for fun.



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.


problem space.

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

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 required 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.


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."


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. Particularly for apps that require your phone to be placed next to you on bed, bed partners, children or pets can affect the movement and noise detected by the app (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 interface to identify areas of improvement. 





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). On the other hand, a Fitbit device can record the duration of their 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 them 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 features that I considered to be important. Furthermore, I aimed to develop the user experience, improve the user interface, simplify the app, and incorporate even more information.


key features.

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


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 alar

  2. Set Your Routine: Sleep quality can be improved when people wake up and sleep at the same time every day. Users will be able to 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 then becomes 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: The summary analysis will compare overall quality of sleep against an average or ideal night of sleep. This information will be used to generate recommendations and trend analysis to flag any implications.

  7. Early Diagnosis: There are many common and preventable sleep disorders, e.g. delayed sleep phase syndrome (DSPS) can be diagnosed based on description of symptoms and sleep logs. Sleeptune can act as a sleep log and use analytics to discover any patterns of concern to the user.



I began to conceptualize the key functionalities I identified above. I considered the most effective way to visualize each metric to provide the most valuable analysis to the user.

In terms of information architecture, I narrowed down navigation to one bottom bar separated by 5 primary categories. I believed a logical mental framework would be to structure the information as current ("Home"), past ("Trends"), and future ("Sleep Cycle" for creation of new sleep data). 


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 requirements, I laid out the user flows organized by bottom navigation categories. I included a flow for onboarding, when a user opens the Sleeptune for the first time.


style guide.

I compiled 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, the sky and clouds, and the night. My vision for a user's first impression of Sleeptune was simplicity and intuitiveness. 



With my user and market research in mind, I always focused on my design goals during the wireframing process: to create a platform that combines the best of sleep tracking functionalities; to improve upon the user experience and user interface; and to simplify the app, while incorporating more information than other apps.

Bringing all my components together, I used my style guide as visual design guidance and my sketches as a base for user experience design. I adjusted the design as necessary as I added the details into my high-fidelity wireframes.



Due to the nature of this project, I decided to focus on the previous steps and not pursue vigorous reiteration with prototyping and user testing to refine my product for development. However, I carried out some prototyping and user testing show the rest of the design process. I used InVision App to create an interactive prototype with the wireframes, embedded below.


usability & user testing.


I wanted to simplify the usability and user testing process. Instead of conducting user testing sessions in person, observing and taking notes on their behaviour and decision-making processes, and interacting verbally after their self-navigation through the app, I shared my prototype with 5 people and asked for feedback based on my prototype and understanding of the wireframes. Based on the feedback I received, I reiterated my wireframes to improve usability.

  1. "Y-axis overlap for sleep stages is difficult to read."
    I moved the y-axis to the left to improve clarity between the axis and gridlines.

  2. "I don't know what an ambient alarm is."
    I created sub-text to provide an explanation on the functionality.

  3. "I didn't understand the square icon until I clicked into it."
    Because I wanted to avoid adding labels to the bottom navigation, I changed the icon to a more universally recognized notification symbol.

  4. "Can there be more guidance on the checkmark?"
    I added a caption underneath the checkmark to indicate the purpose and that the message was received by the app.

  5. "I never read onboarding screens. There's too much text here."
    I condensed the blurbs by removing intermediary phrases.

  6. "The top of the graph is too faded, which makes it harder to see. It looks like there are two colors, which is confusing. I'm not sure why the top needs to be lighter."
    I kept the transparency in order to see the gridlines, but reversed the gradient fill for visibility.

  7. "What is the y-axis? How do the 3 series scale to each other? I'm not sure if it makes sense for them to be in the same graph."
    Since each series has a different metric, I avoided including a y-axis. However, I agreed this area needed improvement and clarity. I added a percentage y-axis, as each series can be converted to percentage in terms of sleep debt on a scale of 1-20 hours; sleep stages measured by closeness to the ideal duration in each stage; and progress by the slider scale. 

  8. "Read and unread notification labels are difficult to differentiate."
    I changed the font to Avenir Book for read notifications, and Avenir Heavy for unread notifications.