Mobile Sleep Tracking App for Android

Case Study

This image has an empty alt attribute; its file name is 0*T2sGxgeiOpb8I4Me
Zzzloth: A mobile sleep tracking app

The vast growth of advancements in Technology has pushed more and more people to incorporate them into their daily life. An industry that has faced a significant disruption due to this is the health and wellness industry. As smartphones are now much more than a phone and wearable technologies reinforce their use, healthcare-related mobile apps are becoming rapidly popular. Healthcare companies and wellness organizations one by one, adapt to this change and try to provide a variety of health-related services to the users of smartphones, tablets, or PCs.


Team: 2 UX/UI Designers
Duration: 4 weeks
Goal: Design a native Android App that tracks sleep quality and provides sleep cycles analysis
Target Users: Users with sleep Issues, Users familiar with health/wellness apps that are curious about their sleep habits
Tools: Figma, Balsamiq
Deliverables: User Research, Information Architecture, Interaction Design, Visual Design, Prototype


The National Wellness Institute is an organization founded in 1977. It offers certification and training for wellness professionals, providing them with frameworks and tools that they can use to help clients achieve their wellness goals.

Even though NWI has numerous years of experience in the wellness field, its program has been slow to catch up with technology. They have seen a substantial drop in memberships and want to find a way to add value to their members.

To do this they have decided to focus on two things:

  1. Create a set of digital wellness tools for Wellness coaches
  2. Update their image — create a new visual system that reflects their innovative and refreshed approach to wellness.


Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle.

We were assigned to conduct user research to understand people’s relationship with mental, physical, and emotional well-being in order to develop a tool that will drive them to action.

The National Wellness Institute wanted us to reimagine how people can adopt and maintain a routine that enhances their well-being.

  • The tool could be focused in any category that relates to personal wellbeing, such as (but not limited to): exercise and fitness, eating/diet, meditation, time management, etc.
  • The only requirement is that it tracks the user’s progress and pushes them to commit to a healthier lifestyle.
  • The UI should reflect a fresh, updated image


The design should be focused on an MVP, as the app was not supposed to solve all of the wellness issues people have.

Users need to be able to set up their profile to include important information relevant to their goals
Users need to be able to set goals and track their progress
Users need to be able to share their stats with their wellness coaches

Nice to Have:
Educational component: find a way for users to stay informed throughout the process and understand why they are doing these things, and how it will affect their well-being.


Initially, we needed to do some market research so that we can identify which would be our direct and indirect competitors. We collected the most used sleep tracking apps like Sleep Cycle, Sleep++, Sleep Score, and Snore Lab, but also apps that track multiple health data like MiFit and Fitbit. After conducting Feature and Brand Analysis, we were ready to do the market positioning of our app. It seems that most apps related to sleep habits offer just one feature and that is mainly tracking sleep.
Our goal would be to design an app that would provide help to the users so that they can analyze their sleep and improve their sleep habits.

This image has an empty alt attribute; its file name is 0*l-dYI9J1YcapGPcc


Our next step was to do user research and we decided to do it with a survey and user interviews. We prepared for the Survey by working on a Lean Survey Canvas which helped us find the right questions for the target audience.

This image has an empty alt attribute; its file name is 0*KL4DWv6I7s4g1WyZ
Lean Survey Canvas

We sent the survey to people that have used at least once a health/wellness app so that they can give us useful feedback based on their experience. That way we would be able to better understand possible struggles or, challenges and find opportunities to help them with our app.

Out of 32 responders, the majority had downloaded 2–5 health tracking apps, and most of them did so because they were curious to learn more about their sleep patterns. Also, most of them were currently using 1–2 health apps and almost all of them would be interested in sharing the health app data with their health providers, which was a useful insight for us and we would consider it for our designs.

This image has an empty alt attribute; its file name is 0*Ltl6lH06dBUz6dxe

The survey gave us useful insights but we needed to get deeper into the users’ minds, so we proceeded to User interviews. We focused on 3 Users that were facing sleep disorders and tried to understand what kind of struggles they are facing with their daily routine and their sleep cycle. For them, the main reason to start using a sleep tracking app would be to handle their sleep disorders. However, when they use a health tracking app they usually lose their motivation really soon and quit or forget the app.

This image has an empty alt attribute; its file name is 0*CVUIia9YlWqPtm3d

Based on our User Research we could identify the user that our sleep tracking app would help. Our User Persona was Jeanine. Jeanine is a busy nature lover that wants to understand her sleep patterns but needs to have personalized sleep data to have a more realistic picture of her sleep cycles. She gets frustrated when she has started using a new app that is too complicated and she finds the apps’ reminder notifications passive-aggressive.

This image has an empty alt attribute; its file name is 0*DrQxS7g_1n5SJcYR

We needed to discover Jeanine’s struggles by following her journey when she starts using a new sleep tracking app.
In her User Journey, Jeanine wakes up and once more realizes that she woke up tired. She decided to further investigate that so she downloads a sleep tracking app. For the next two weeks, she is very happy to find every day the data of her last night’s sleep, however, it is hard for her to understand what all this means.
The days go by and a month after downloading the app Jeanine realizes that she had forgotten to check the app for more than 10 days. She tries to start using the app again but she can’t remember how it works and seems too complicated for her. Disappointed she exits the app and since she keeps waking up tired she decides to visit her doctor.

This image has an empty alt attribute; its file name is 0*JfhPM4VNTcQUMXrA
User Journey Map

It was necessary to detect what kind of Jobs to Be Done our app could be hired to do so that we could make the right design decisions. By conducting a Value Propositions Canvas we analyzed the pains of the products that can do the needed jobs as well as their pain relievers and also the gain creators and gains generated by those jobs.

This image has an empty alt attribute; its file name is 0*bLsbfIENd4Y_MxGx
Value Propositions Canvas

We decided to focus our design on three main Jobs To Be Done:

This image has an empty alt attribute; its file name is 0*liAmVZmXOkK15Z8Z

Our following steps were to brainstorm on the features that our sleep tracking app would have and we used a MoSCoW map to prioritize them. It was difficult for us to let go of some features but for the MVP we decided to focus on the ones that could serve the Jobs To Be Done and that would bring the most value with the least complexity.

This image has an empty alt attribute; its file name is 1*5_ejjtt_m8hDw9sNe_Hk7w.png
MoSCoW map

Data visualization, goals setting, heartbeat data, chatting with the doctor, exporting data reports, and notification tips were some of the features we would base our MVP on. The app would help the user to monitor their sleep so that they can be aware of their sleeping habits and improve their sleep quality.

This image has an empty alt attribute; its file name is 1*vllvgTf5Aro9elG_s7CD8w.png


By testing our Concept Sketches we finalized Jeanine’s Happy Flow after using the sleep tracking app for one week.

After waking up, Jeanine would open the app (which is also connected to her smartwatch) and she would see a Welcome screen informing her about the progress of her goal and suggesting her to her daily Journaling. Then she would go to the Journaling screen where she could add info about her last night’s sleep. Then she would move on to the Main Screen where she would find the summary of her Sleep Data so she will decide to find more details about Last night’s sleep and she will navigate to the dedicated screen. To have a more coherent picture of her sleep, she will seek the KPIs of Last Week’s sleep and she will share the data report with her doctor through the dedicated chatting screen, from where she will also send them a clarifying question about her sleep cycle.

This image has an empty alt attribute; its file name is 1*9tjreQ27FfzzWHc1vVxbzA.png
Jeanine’s Happy Path User Flow


We started giving life to our ideas by incorporating the user flow in a Lo-Fi Prototype for an Android sleep tracking mobile app.

This image has an empty alt attribute; its file name is 0*djuK4qud6xcOvN5t
Lo-Fi Screens

Then we started working on the first iteration of the app’s Mid-Fi Prototype which we also tested with 5 Users. The Usability Testing process provided us with very important insights and helped us understand what kind of struggles the users were facing while navigating through the prototype. Based on their feedback we adjusted some features and generated the second iteration of the Mid-Fi prototype.

According to 3 users, the Journaling screen didn’t feel intuitive or personal and they would prefer doing their sleep journaling on a screen that resembles a diary more realistically. So we decided to improve the screen by making it more personal and inviting. The chatbot dialog with the checkboxes was replaced by interactive mood buttons that Jeanine would use to document her waking mood, while should could add customized moods and write down her feelings and ideas.

This image has an empty alt attribute; its file name is 0*1Jw5j3kWIw2qrFls

Although 4 users found the app organized and clean 3 of them, expressed the need to see the sleep KPIs on the main screen in a more structured way. For them, the screen seemed overcrowded and hard to read. That is why in the second iteration we improved the data visualization by giving a better summary of the data of Last Night, Last Week, and Last Month. Jeanine could navigate to the screen quickly inspect her sleep summary(Deep- Light Sleep, Time Awake for each night, or Average Sleep for each week or month) and if needed she could click on the details button and navigate to the page with the complete documentation.

This image has an empty alt attribute; its file name is 0*ZnSSGJNuvZf9qP4e

Another screen that we found opportunities to improve was the Weekly Data screen. During the Usability Testing the users shared with us that they would prefer observing all the types of sleep data holistically, and especially on the Weekly Sleep Data, it would be more convenient for them to find not only the sleep duration but also the heartbeat rates and the daily mood documentation. We understood that this would help not only the users to have a better picture of their sleep cycles but also their doctor in case they would like to share this data with them.
The optimized weekly data screen now included the daily sleep chart with the daily moods that Jeanine had selected along with her daily heartbeat rates. By scrolling down Jeanine would be able to detect her goal achievement and also find tips on how to improve her sleep cycle.

This image has an empty alt attribute; its file name is 0*6o-Sd943PMbphUeU
This image has an empty alt attribute; its file name is 0*IwBzcTxEfFBcvrHQ


Since the interaction design process was completed we moved on to the visual design. The app’s Brand Attributes would be Calm, Intuitive, Comfort and Motivation. Based on these attributes we composed a Moodboarad which we also tested with various users, and were happy to see that they would give the same attributes to the board.

This image has an empty alt attribute; its file name is 0*gJ89ap0rOgQqwAui

We decided that the app should follow the moments of the day while the user would use it and it would have both a Dark and Light mode. However, since we were designing the MVP, we used the dark mode color scheme. We wanted to help Jeanine wake up gently and also easily fall asleep at night, without any intense light from her screen. With the colors, we selected we wanted to imitate the light of dawn and sunset and also to respect the eyes of the users, by providing them an accessible interface.

This image has an empty alt attribute; its file name is 0*-BmXcnd2DLRyGa4q


The new sleep tracking app, “Zzzloth” was ready for Jeanine!

Hi-Fi Prototype of “Zzzloth” Sleep Tracking App

We took into consideration to also include the necessary Multistates as we wanted to provide to Jeanine an app that is intuitive, and that she doesn’t need to learn to use it again and again if she has paused its use for some time.

This image has an empty alt attribute; its file name is 0*C5Wlfi0HRWbRRHaw
This image has an empty alt attribute; its file name is 0*AIJjAosMItWzah7k
Hi- Fi Prototype Screens (Loading Screen, Welcome Screen, Daily Journaling Screen)
This image has an empty alt attribute; its file name is 0*vXf-8NakMxRPrjaW
Hi- Fi Prototype Screens (Main Screen with KPIs, Weekly Data Screen, Doctor Chat Screen)

As soon as the Hi-Fi Prototype was ready, we conducted a Desirability testing so to understand how the users perceive the app and what feelings it causes them.

We tested the prototype with 5 users and we were glad to see that all of them were feeling that the app is clean and comforting. For most of the users, the app felt personal and made them feel happy. Everyone expressed the desire to use it and that meant that our goal was achieved.

This image has an empty alt attribute; its file name is 0*eydxeO-3RhkoCdNg


It was very interesting to discover that when users are using a health app they want to feel that it is more personal and not like they are using a cold automated device. For them, it was crucial to feel that their sleep is automatically tracked but that they also have the opportunity to provide their own input. Only then they would feel that their data has value for their health.

As designers, it was a great reminder to discover that users with sleep issues need clean and organized info as this would cause them less stress. The fast pace routines usually affect them not only during the day but mainly right before their night sleep so it was crucial for them to have an app that would ease this disturbance.

The covid pandemic and the cultural differences were two factors that determined the type of communication the users have with their health providers. Users prefer to have asynchronous/distant contact with their doctor for sleep issues. “Zzzloth” sleep tracking app seemed to the users a convenient way to communicate with their doctor efficiently and the feeling that they have someone taking care of them when needed.

This was a very insightful project, during which I feel I grew a lot as a designer. It was obvious that having a thorough and solid User Research process, helped us to understand the user from all perspectives. This knowledge gave us the power to compose realistic assumptions and to visually design the app in the most efficient way, which our tester users also confirmed in the end.


Since it was a challenge for us to detect many users that not only have sleep issues but also have used a health tracking app, our next step would be to find more so that we can test the app with them and that have even more related conclusions.

Our project’s goal was to design an MVP, but since we both felt excited about this app and as we are curious designers, we would also like to design more screens for the rest of the features. That way we could further explore the rest of the opportunities available so that we can help people with sleep issues to improve their sleep quality more efficiently.

A big thank you to my colleague Arantja Rosalina. Working with her was a very enjoyable experience that helped me to grow personally and as a designer!