A sleeping app designed to help users get better sleep using the concept of sleep cycles and provide feedback on sleep tracking and insights.
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.
Individual Capstone Project at BrainStation for 10 weeks
UX Researcher, Wireframing,
UIUX Design, Prototyping, Animations
Pen & Paper, Sketch, Figma, InVision, Principle, Photoshop
Android, Galaxy Smartwatch
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,
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.
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.
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.
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.
I gathered inspiration from other sleep apps, Mobbin, Behance, Dribbble and added them to my InVision Board:
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.
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
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/
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.
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.
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.
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.
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.
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
gamify app by rewarding with badges to increase motivation and make it fun
¹ GOC, “Duration and Quality of Sleep among Canadians Aged 18 to 79”. 2017
² GOC, “Are Canadians Getting Enough Sleep?”. 2019