Sleep eazy — Sleep tracking app design from 0 to hi-fi in 7 days 💤

Otti Yerbury
Bootcamp
Published in
11 min readJan 9, 2023

TLDR; Sleep tracking app with a focus on simplicity and information display, check out the final prototype for this project here.

The brief

Design a sleep-tracking app for a non-profit health and wellness client.

The main goal of our fictitious client was high and prolonged use over time, also users must be able to create a profile, set goals and track, edit and share their progress. Other must-haves include empathy states and GDPR compliance.

For this project, I had the pleasure of working with Mia P, we chose sleep tracking. It is worth noting at this stage that users' self-reporting was the only tracking information input we had available to us for this project — not smart watches worn to bed automatically uploading night-long audio recordings or heart-rate data during the night.

The sleep industry

We started with some context for our app.

The global sleep industry is currently worth $432b and is forecast to reach $585b by 2024 (Statista, 2022). Sleep industry here means anything relating to sleep — from pillows to sleeping pills and a growing sleep tech area. Interest in sleep health has increased in recent years as people’s understanding of the importance of sleep, and the negative impacts of poor sleep on health, has increased.

Competition

As part of our secondary research, we found other popular apps already in the sleep wellness genre. The three that stood out were Headspace, Calm and Sleep cycle. Whilst the first two have sleep-related features, Sleep cycle focuses on sleep only. Here’s a summary of their target areas and the features they offer users to improve these areas.

Empathize

After an intensive morning’s work, we had completed a lean UX canvas, researched the industry and looked at the competition. These formed the basis of our survey which we shared far and wide — we soon had 50 responses and counting!

Survey

Our survey gathered 55 responses in total over three days. We gauged current attitudes towards sleep health and learned about factors that users want to track. Everyone surveyed was aware that sleep impacted their health and the majority wanted to improve their sleep and reported feeling that they were not getting the right amount of sleep. Our app is needed!

We also learned the main factors impacting sleep were stress levels, screen usage and exercise.

Interviews

With now three pieces of foundational material (lean UX canvas, industry/competitor research and survey results) we began interviewing five potential users — making a point to interview people with and without self-reported sleep issues. We were keen to hear how people that do sleep well and achieve top-quality slumber may still be in need of sleep tracking. Our questions were influenced by our survey findings.

The main interview findings had some key, common themes;

  • Although the majority were concerned with improving their sleep duration, two interviewees who already slept well were most interested in improving their quality of sleep so that they could sleep less in order to do more in their day. This sentiment was summed up in the following quote, “Outside of the things I have to do, there are so many things I want to do”.
  • Users were keen to track environmental and behavioural factors in their day that may impact their sleep quality. The main factors mentioned were exercise, alcohol, caffeine and evening routines however there was a clear leader — screen time. This correlated with the survey findings.
    Like many of us living in an era defined by stroking glass, each of our users shared that screen time was something they knew they needed to reduce but, as yet, couldn’t quantify a direct impact on their sleep.
    78% of our survey respondents agreed screen time was a factor they would like to track, second only to stress coming in at 80%.
  • Regarding health tracking apps that interviewees already used, they included Apple Health, Google fit and Sleep cycles. The complaint from the first two apps was that they were not specialised enough in the area of sleep, and for the latter, sleep cycles, the issue was that it was overly complex.
    When asked what would help them maintain long-term use of a tracking app, our interviewees were united in favouring simplicity and speed of use, with a general feeling that a complex, overly detailed and time-consuming app would not motivate ongoing use.

Our interviews were summarised in an affinity diagram and after dot voting, the final subjects to explore were as follows;

App info

  • Positive reinforcement, fun
  • Simplicity
  • Different things that motivate people to use the app

Tracking

  • Sleep duration
  • A selection of sleep impact factors (eg. screen time)
  • Routines/bedtime rituals

Define

User persona — meet Tired Tristan

Our user persona was loosely based on our interviewee profiles. Tired Tristan is….

  • Busy & fatigued — He works hard but poor sleep means he is not performing at the highest level at work and through his day generally, which he finds frustrating!
  • Health-conscious — He is generally health-conscious, trying to eat ‘well’ and exercise regularly.
  • Sleep concerned — For all his healthful habits, he is aware that he is not sleeping as well as he could be because he wakes up tired. He knows enough to know that sleep is important but doesn't know where to start in terms of tracking it to recognise positive changes.
  • Confused about his habits —He has theories about what could be influencing his sleep but has never tracked them so doesn’t know which changes to make. Fatigue and confusion continue.
  • Quick and easefull interactions — He spends a lot of time staring at screens for work and is seeking a simple and quick experience. Many of our users mentioned that this would improve the likelihood of them using the app long-term.

User journey

Tired Tristan's user journey is outlined below (click to expand).

User journey — click to expand and enjoy the detail!

The key moments of this journey are as follows;

  1. Fatigue means he can’t perform during the day — which he finds frustrating.
  2. He does find an app specific to his needs and feels relief and hope.
  3. However, he actually finds the app overly complicated and is frustrated that it doesn’t show what is actually impacting his sleep — annoyed he deletes the app and is back to square one.

Define

Final problem statement

Using our research as a foundation, and refereeing to our project kick-off Lean UX canvas and client brief, we discussed our problem statement and settled on;

Time and energy poor millennials need to find a way to understand how their lifestyle choices impact their sleep because they want to improve their overall health and energy levels.

From this commenced rapid idea generation with the crazy 8 activity.

We distilled our ideas into a Moscow matrix, and the final key features are shown here.

Everyone that we interviewed expressed their unwillingness to share their sleep goals/achievements/progress with other app users. This included friends and strangers. With this in mind, we removed the sharing functionality even though it was referenced in the original client brief.

These features were ordered into a user flow, showing Tired Tristan’s path through that app on first sign-up and then his options as an existing user from the dashboard.

Prototype

Lo-fi sketches, user testing and refinement were our next steps.

During the creation of the lo-fi sketches, we separated the onboarding questions onto individual screens for simplicity so as to not overwhelm the user on their first foray into the app. One design concept we talked about involved using sliders, similar to those founding Instagram stories, to gauge people’s answers. The benefits were that they were rapid and simple to use.

From user testing, we updated a few elements, including adding arrows to show users how to use the interactive slider bars and moving the settings into the bottom RH of the menu bar.

A selection of our final lo-fis. See the slider bars on the second screen, now with arrows.

Mid-fis were our next step. After testing these we actually got rid of the slider bars in the onboarding questions to answer y/n questions as users still weren’t intuitively using them — even with arrows to show how they functioned.

Selection of our mid-fi screens.

On reflection, the slider concept was just confusing users. We changed the binary sliders to more familiar checkboxes. The sliders did, however, live on in the questions where users were choosing from a range of information eg. entering how many hours of sleep they got. We also used slider-style infographics to report the user's sleep progress/tracking data on the dashboard. Users testing our mid-fi thought these reporting bars, designed to convey not collect information, had some kind of interactive features and incorrectly thought that they had to manipulate them to enter their tracking data.

These bars were redesigned so, instead of featuring the circles on the bars they had flat lines showing the different measurements. In the following tests users said they understood the dashboard bars not to be interactive — Success!

Mid-fi dashboard, showing the updated reporting bars and the original track symbol which was replaced.

In the first version of the mid-fi a ‘+’ symbol was used to communicate adding information to the daily check-in however, during testing users reported thinking this was to edit the different tracking factors (eg. add alcohol intake or screen time to the dashboard). This confusion led us to replace it with a graphic wave line which was much better understood in subsequent tests.

With our mid-fis designed, tested and refined we moved on to the visuals of the app.

Brand design

We dove right into the brand design, choosing to start with developing our moldboard before distilling our keywords or looking into the completion to limit subconscious design choices from the competition.

The final moodboard

The keywords we chose from our new mood board were; Cosy, comforting, simple and nocturnal. We tested our mood board with users and, by using some of their words, settled on the final visual brand values as;

Relaxing
Mellow
Warming
Nocturnal
Restful

The main themes from a visual competitors analysis were the use of clean sans serif fonts, gradients and a scientific/modern feel. All had stayed simple in their design choices.

Visual competitors analysis — Sans serif fonts and gradients.

With a solid understanding of the user, key brand values and competition we developed our visual identity.

Style Tile

The single-weight PP Pier Sans was chosen for the heading one font, matched with a very similar Red Hat Display for the other headings and body text (in varying weights). We chose two similar fonts instead of one font to add a subtle sense of hierarchy.

Calming blue and sunset orange were chosen as our main brand colours as they were present in our mood board and complementary to our visual brand values. These colours were made into gradients which had a slight grain overlay, the goal of which was to create texture and move away from the overly polished visuals of our competitors.

These all combined, with some simple graphics, to form our logo. WE pulled our brand name out of thin air, however — since completing this project we found out there is, in fact, a sleep app called Sleep Easy which we were not aware of at the time of naming!

We were then ready to transform our mid-fi into a fully functional, branded and beautiful hi-fi prototype.

Lo-fi to mid-fi and finally, hi-fi design.

Hi-fi

I invite you to explore our hi-fi for yourself here.

I encourage you to view our prototype via the link to get the best experience and see our animations for yourself!

Welcome and initial sleep goal setting
Selecting sleep impact factors as part of initial sign-up flow
First track screens after goal selection
Dashboard of a long-time user, daily track, account edit and settings screens

Test

When presented with the final app as part of the final desirability tests, key themes shared by users were that they found the app, ‘Clear, useable and calming’. They were also visibly delighted by the unexpected animations we used throughout the app.

Empty states

Our prototype features empty states, helping guide the user seamlessly along the happy path.

Next steps

The next steps for this app development would be to add educational content including informational videos and short reads/podcasts on the subject of sleep and its impacts on health. Another logical development would be to add features that support users in falling asleep — podcasts, bedtime reminders and peaceful sound recordings. Finally, using data from our survey, there is definitely scope for a wider tranche of impact factors to track eg. stress levels, sugar intake and outdoor time.

Limitations and learnings

With this project we found ourselves limited by the lack of opportunity to connect a tracking device (eg. smartwatch) to the app. This was something mentioned in user interviews as a favourable option as it is more accurate than self-reporting and can happen automatically. We also would have liked to have more insight into the topic but, despite contacting various doctors, we were unable to interview a specialist on the subject of sleep.

The main learning was that simplicity is of paramount importance for repeated use of the app and also that flexibility in goal-setting apps is important as different users’ health values are so varied. Finally, users love unexpected animations — it was very rewarding during the desirability testing of the final hi-fi to see users' delight at our work!

Many thanks for taking the time to read about this project, was a great challenge and a pleasure to work with Mia Pia. I hope you enjoyed reading this article as much as I enjoyed designing it, I would love to hear your thoughts below — would you use Sleep Eazy?

--

--