Capstone Project: SleepyHead

A sleeping app designed to help users get better sleep using the concept of sleep cycles and provide feedback on sleep tracking and insights.

Problem Space

I was personally interested in the effects of not getting enough sleep as a student juggling work and school. Young adults are not getting enough sleep, and this is impacting their health. Lack of sleep would affect their energy and capacity to perform tasks throughout the day. Long term effects could lead to issues like insomnia, obesity, depression, etc. My goal is to help people get quality sleep and improve their sleeping routine to achieve a healthier lifestyle.

Project
Individual Capstone Project at BrainStation for 10 weeks

My Role
UX Researcher, Wireframing, 
UIUX Design, Prototyping, Animations

Tools
Pen & Paper, Sketch, Figma, InVision, Principle, Photoshop

Platform
Android, Galaxy Smartwatch

Strategizing & Research

To tackle on with this problem, I followed the design process of 
Research → Synthesis → Ideation → Prototype.

I first created a value proposition canvas to identify the user's pains and gains and see what kind of products or services the user might expect. 

I conducted secondary research and found that
18-64 year olds averaged 7.12 hours of sleep instead of 7-9 hours¹
1 in 2 adults have trouble going to sleep or staying asleep²
36.3% who get insufficient sleep have chronic stress²

To focus on how users were having trouble with sleep and the effects of that, I came up with the question,                                                                                    

How might we optimize the user's quality of sleep for them to feel energized for the next day?

User Research

I conducted four interviews with the following requirements: Living in Canada, 18-40 years old, Employed or in School. This was done via online video calls to observe their thoughts on the topic of sleep and how it affects them when they don’t get enough sleep or good sleep.

My research goals were to find what is making users feel sleepy, why can’t they get good sleep, why they feel tired after sleeping, and what we could do to help alleviate these problems so they wake up feeling well rested instead. I took insightful quotes or findings from the interviews and grouped them into the user's Pains, Behaviours, and Motivations. I grouped them into 6 themes with one insight statement each.

From these 6 themes, I chose to focus on these 3 to help start formulating my solution for the users. 

Project Hypothesis Statement:
I believe helping people get better quality sleep at night for adults will help them achieve better results in being productive throughout the day. I will know this is true when the statistics in the app show that users are getting enough sleep and their mood is also improved.

Creating Personas

After synthesizing the raw data from the user research and focussing on the themes, I created a Primary Persona, Jasmine Wong who is a software developer suffering from lack of sleep which is affecting her work. And a Secondary Persona, Brian Lee who is a university student and lack of sleep is affecting his grades. 

Experience Map and User Stories

I focused my project on my Primary Persona, Jasmine Wong, and created an experience map to visualize the problems and frustrations that she might have when trying to get sleep. I wanted to know what might she be doing and thinking as she's preparing to go to sleep, her efforts to try and sleep, and the outcome of getting a bad night's sleep. By creating an experience map, I could see where she feels happy and starting to get upset, which helped me to be able to start thinking of opportunities to help alleviate those frustrations.

To define possible app features and functionalities, I created 30 user stories and grouped them into similar categories or epics. I chose to focus on the epic, Tracking - being able to track information when the user is sleeping and using that information to help her get better sleep as a result.

Task Flow

To help Jasmine get better sleep, I thought that it would be best to help fix her sleeping schedule by using sleep cycles to help her choose the optimal times for her to wake up in order to feel well rested for the day.

Using the epic about Tracking, I created this task flow diagram to show how Jasmine could use the app to track her progress:

1. Asks how she's feeling for the day and provides a survey for her upon using the app.
2. She can choose what time she will wake up (based on sleep cycles) by inputting what time she will sleep. 

Ideation, Sketching

I gathered inspiration from other sleep apps, Mobbin, Behance, Dribbble and added them to my InVision Board: 
https://projects.invisionapp.com/boards/HD3ZHYA4W9X/

Here are some initial sketches of the task flow. I also included several designs for showing statistics, results of tracking sleep duration, and what setting the alarm clock could look like.

Wireframes, Prototypes and User Testing

I designed my first set of wireframes on Sketch and interviewed five users with my prototype using Invision. In addition to the core task flow, I added some extra pages such as Records (shows her progress), Activities (Ex. stretching activities to help them feel relaxed and ready for bed), and Achievements (badges they can earn for successful completion).

The users were provided with the scenario as someone who hasn't been getting a lot of sleep. I gave each of them five tasks to do to see if they had any trouble accomplishing them, and then followed it up with questions about their experience in the end.

Overall, everyone liked the flow of the app and the tasks were straightforward to accomplish. They were all able to go through the core task of going through the daily questions and picking a time to wake up through sleep cycles. They all liked the idea of having the app in dark mode for ease on the eyes. And users who had prior experience with sleeping apps were able to understand the app's process more.

With the feedback in mind, I implemented changes and created a second prototype with another five users to test. They were also able to finish the core tasks in the second prototype. On the third prototype, I scaled back on some screens such as implementing the Achievements and Activities as features I would like in the future in order to focus on just the main task flow.

Here are some screen revisions I did based on feedback from the two user interviews including the Hi-fi so you can see the progress clearly.

Home Screen - Includes the dates completed and uncompleted for the Daily Check In Qs and user can select Calculate Sleep Time right away

Daily Check In Qs - Changed the way answers were given to make it more visual and fun for users to choose instead of only selecting radial buttons, and added pagination 

Sleep Tracking Records - Provided records of the user's sleep and report for Today based on their sleep from previous night and their answers from Daily Check In. Users can also select Week to check their records as graphs to see any progress as they use the app day to day

Branding

I decided on the name, SleepyHead and use dark, analogous and monochromatic colours. Based on my user interviews, I knew that dark colours would be best for my app since they will be using this close to bedtime and I didn't want to strain their eyes with bright colours. I also chose to use Roboto as my typeface with the below sizes based on Material Design since I am designing this as an Android app. 

You can take a look at my Moodboard: https://projects.invisionapp.com/boards/JE3ZSCD3SXW/

Illustrations

I drew some playful illustrations on Sketch to help make my app appear more friendly and fun to users like Jasmine. I also drew the different moon emotions for the Daily Check In questions as a more visual way to ask the user to select how they feel rather than just selecting words.  

Hi-fi Prototype

Finally, I was able to take the inspirations, branding and previous iterations to complete my Hi-fi on Sketch and prototyping on Figma.

You can try  SleepyHead yourself or follow along Jasmine's journey where she goes onto the app after a tiring day of not enough sleep.

Jasmine's routine: 

1. Answers the Daily Check In questions which she hasn't completed yet.

2. Sets a wake up time and selects the time recommended based on sleep cycles.

3. She can also check her Records to see her progress using the app so far for today and the week.

4. When she is ready for bed, she starts the app to track her sleep.

Marketing Website

Additionally, I created a responsive marketing website for desktop and mobile view. If Jasmine was looking for new sleeping apps to try out, this is what SleepyHead would look like if she searches on her desktop/android device.

You can check out the full content by clicking on the images below. 

Desktop View

Mobile View

Smart Watch Application

I also looked at another platform, smartwatches, which would be useful when integrated with my app. 

I can imagine Jasmine wearing a smartwatch as she sleeps. This would help measure her sleeping patterns more accurately as it will match her movements. She could also set her sleep and wake up times on the watch instead of her phone. This could help her to stop using her phone before sleeping and get into the habit of setting an alarm and then going straight to bed. 

Reflections

This project taught me a lot about what a UX designer has to do in terms of researching, writing, user interviews, ideating and designing. As a one man team, there were many hurdles and struggles to complete the project (especially during this COVID-19 pandemic), but I feel very proud of what I have accomplished.

Key Takeaways:

Sketch More 
to help develop concepts and visualize solutions to the problem instead of going straight away to a solution

Test early and Test often
to gather feedback ASAP and repeat design and iteration process with more user interviews

Stay on scope and focus on MVP 
so that you aren't bombarded with trying to do "everything" and make sure the core task or MVP is viable 

Considerations for the Future:

Provide more tracking insights
so users can see progress and visually see how sleep affects them

Add different activities
such as exercises to help users feel relaxed, sleep hygiene tips or soothing music for sleeping

Add Achievements 
gamify app by rewarding with badges to increase motivation and make it fun

References
¹ GOC, “Duration and Quality of Sleep among Canadians Aged 18 to 79”. 2017
² GOC, “Are Canadians Getting Enough Sleep?”. 2019