Sleep Tracking App
By: Egor Smirnov
Tags: Sleep, Design, Watch, Tracking, App

Sleep Tracking App — Main Banner

The author has been creating this project for 4 months, redrawing and rethinking the design 4 times from scratch.

Following the news about Apple’s sleep tracking app, I started to create my own concept that would reflect the vision of the app. While working on the design, I studied an abundance of scientific articles, given below. Information on the factors that affect sleep is provided from the sources: Sleep Research Society, Oxford Academic, SleepFoundation.org, and others. I wrote scripts in JavaScript to create realistic heart rate data and sleep stages. The “Sleep Tracking App” project is an indicator of the author’s principles and approaches. Begin.

Main Screen

🔎 Main screen anatomy

Sleep Tracking App — Main Screen Anatomy

1st and 2nd elements

In the center of the main screen of the application is an alarm clock that displays the next time the user wakes up. Above it flaunts a “ruler” — a time scale on which the nearest minutes are marked concerning a user-defined smart alarm interval. The default interval is 30 minutes, i.e. the watch with the help of sensors will wake up a person at the optimal time for waking up with a margin of ± 15 minutes. For example, if the alarm is set at 12:30, it will ring at the optimal time from 12:15 to 12:45. To determine which mode is set, look at the roulette wheel. If one number is highlighted (for example, 30), then the “normal” alarm clock mode is set, if highlighted (for example, 15 and 45), and 30 remains in the shadow, the smart alarm clock mode is preparing to work wonders.

3rd element

Sleep Tracking App — Smart Button functions

The third interface element, “Smart Button” changes concerning factors: time, user preferences, schedule of the day, etc. The smart button learns as the user uses the Sleep app, interacts with the watch, and adds new accessories to the Home app. The button does not leave its place but changes the action recommended to the user, so it cannot be lost. Not only the smart button but also the entire application is all about convenience and maximum utility.

Force Touch menu on the main screen

Sleep Tracking App — Force Touch on the main screen

Force Touch in watchOS 6* — not only provides the ability to toggle a setting or item styles but also is a way to navigate. The technology becomes familiar in everyday use of the watch, so “pressing hard” becomes an intuitive action. A strong press on the main screen of the “Sleep” application opens a menu of three items: “Set Wake Up Time”, “Switch To Smart Mode” (if smart is set - “… To Normal Mode”), and “App settings”.

— for this version of the operating system, the design was worked out, because the work began even before the release of the 7th version

📅 Set Wake Up Schedule

Sleep Tracking App — Setting Up “Wake Up Time Schedule”

When you tap on “Set Wake Up Time”, a list of alarms opens. The user immediately sees the time and schedule according to which the alarm will ring. The instructions above show how easy it is to create a new alarm and select its schedule. I’ll talk about the schedule of the alarm later, but it is important to remember that alarms could be set both for repetition and one actuation. The items “Tomorrow”, “On weekends”, “On weekdays”, etc. will help you choose the desired schedule quickly and without stress. To eliminate confusion, alarms can’t be created with the same schedules, but they can override each other. For example, a user sets an alarm “for 9:45 on weekends” and then sets an alarm for “next Saturday at 7:00”. The alarm will ring at 9.45 the following Sunday, exactly like every subsequent weekend, but next Saturday at 7:00.

Select days in Wake Up Schedule

Sleep Tracking App — Selecting days in “Schedule Setting Up”

When setting the alarm schedule, the user has access to the “On selected days” item. It took more than one headache to create an understandable principle for setting alarms 🤯, this function is an example of correctly and progressively solved problems. Small circles represent each of the days of the week, when pressed, the circles turn on or off. Once the desired days are selected, just scroll down the Digital Crown or swipe your finger across the screen to tap “Save”. Some users will go into a stupor after choosing days if you don’t tell them where the button is. Part of the “Save” button sticks out from the bottom of the screen to hint not too intrusively: “it’s not over.”

Set Wake Up Time

Sleep Tracking App — Setting Up “Wake Up Time”

Setting the alarm clock is no less intuitive. After tapping on an existing alarm clock or creating a new one with the “Add” button, you need to select the field with the clock. Apple designed the basic number entry element for the Apple Watch display with attention to detail. The Digital Crown is precise, so it is easy to set the desired hour or minute, the setting of which is switched by pressing the corresponding container.

Two modes

- “Switch To Smart Mode” (if smart is set — “… To Normal Mode”).

The second item from the Force Touch menu on the main screen switches modes, and the smart ruler will remind you which mode is set.

App settings

Sleep Tracking App — Settings screen

You can go to the App settings through the Force Touch Menu by pressing firmly on the main screen. A neat list with colorful and visually recognizable icons helps you quickly select the option you want.

App settings — in detail

Notifications

Sleep Tracking App — Settings — Notifications

The user will see 2 notifications: before sleep and a little later after getting up, for example, while walking around the apartment. The first one notifies 5 minutes before the bedtime of the wake-up time and silencing calls and notifications. The second — reports on the quality and duration of sleep. This notification will be sent after the start of an activity, i.e. walking, climbing, etc., which is recorded using the sensors of Apple Watch, iPhone, and Home Kit devices.

Notifications display the minimum amount of information so as not to distract the user from the day. Each notification has one button that suits better for a specific situation. Before bedtime — “Reset Wake Up Time”, after waking up — “View Full Report”.

Sleep Tracking App — Before Bedtime Notification

The author’s approach can already be traced through every screen of the application. Every button is in the right place, every element is justified. It’s hard to keep the line between obsession and timely informing the user. For this reason, notifications are customizable in the app.

Shortcuts

Sleep Tracking App — Shortcuts

A shortcut is a quick way to get one or more tasks done with your apps. The Shortcuts app lets you create your own shortcuts with multiple steps. These steps can engage applications, search for information, save data, and more. Using the Shortcuts application, users can create their own quick commands by combining actions in sequence. Some commands are available to launch and use from your Apple Watch.

(source https://support.apple.com/guide/shortcuts/welcome/ios)

It would be cool if the watch could execute a shortcut at the moment of going to bed or waking up: open or close the curtains, turn off the lights, put on music — a relaxing album or a track that charges you for the whole day. The application can do this, just select the desired section in the settings menu (“Before going to bed” / “After waking up”) and select the desired command among the created ones. ✨

Smart Mode Gap

Sleep Tracking App — Smart Mode Gap

🔖 Let’s remember the mechanics of work: The default interval is 30 minutes, i.e. the watch with the help of sensors will wake up a person at the optimal time for climbing with a margin of ± 15 minutes. For example, if the alarm is set at 12:30, it will ring at the optimal time from 12:15 to 12:45.

The interval is adjustable in two steps. The user taps the Smart Mode Gap button in the application settings and encounters a familiar input element, turns the Digital Crown, selects the desired interval, and taps Save. The mini ruler on the right will show how this affects wake up minutes relative to 30 minutes. For an interval of 40 minutes, the numbers will be 10 and 50.

Wake Up Melody

Sleep Tracking App — Wake Up Melody

Users select the melody they like in the corresponding settings item 🎶. Each melody is played by tapping on the name, and then wakes up the user in the morning. Did you notice something? 🤫

Alarm screen

🔎 Alarm screen anatomy

Sleep Tracking App — Alarm Screen Anatomy

Description

We talked about the main screen of the application, pressed harder to go to the Force Touch menu, and went through the items and sub-items in detail. It’s time to look at the main thing in the sleep tracking application — an alarm clock ⏰. The alarm screen is discreet and concise: contrasting clocks, a button to snooze the alarm after 9 minutes, and a button to stop the alarm. If the user taps “Stop”, then sleep tracking stops.

Go deeper

Sleep Tracking App — Alarm Screen in real life

This is how an easy-to-read alarm clock looks on Apple Watch. Users stop the alarm by pressing at the very bottom of the screen, and pressing the Digital Crown will snooze the alarm by 9 minutes (duplicates the function of the “Snooze” button) 💤. The alarm clock design resembles the design of the home screen alarm clock. These are the details that differentiate a 4-month project with a ton of experience from an empty wrapper made for likes.

Summary

Swipe right 👉

Sleep Tracking App — Long screen

When the user swipes to the right on the main screen of the app, a laconic and “seasoned” page opens, which contains: a button with some information about the previous dream (which opens a detailed report), blocks with the average time and quality of sleep for a week, cards with factors that affected sleep for a week with information about the impact. We understand the possibility of swiping from two points — page controls.

Cards