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 Java Script 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
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
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
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
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
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
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
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
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".
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
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.
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
🔖 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
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
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
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 👉
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
Each card reflects a factor that affects the user's sleep. Cards are generated based on data received from Apple Watch, iPhone, and Home Kit devices. Each card contains a percentage that indicates the influence of this factor on the quality of sleep. The text below indicates the changes in the respective units. Green is for positive factors, orange is for negative, i.e. decreased sleep quality.
🔎 Card anatomy
More about cards
The cards are practical, capable of displaying all the necessary information regarding the relevant factors in a small rectangle. It is also important to show a physical quantity - a system of measurements that is familiar and understandable to a person, so that the user can more easily correct a negative factor or further improve a positive one. The card in the example above reads 💬 like this: "Loud noise degraded the quality of sleep by about 8%, while the noise during sleep is 5 dB louder than in the previous week."
Tap on the card opens a description of the factor affecting sleep. People don't even think about some of these factors, but they are important. The icon with a blurry copy of it behind matches the factor and the text with a large enough font size is easy to read on the watch screen. It will be helpful for the user to take the time to learn much more about sleep 🎓. Information is collected from scientific articles, sources related to the project will be given at the end of the article.
"Summary" page in real life
Previous sleep
Content
Swiping to the right on the home screen gives you access to the Previous Sleep button. After tapping on this button, a page with a detailed report on the previous sleep will open. The page starts with a graph showing the sleep periods in each stage, below there is a block with information about the time, date of sleep, and some details of information collection. The next block is sleep quality, which contains the start and end times of sleep. Below this block, there is a button that opens a Heart Rate report ❤️. The button contains information about the average heart rate during sleep and the start and end time of measurements. The last item on the page is a list of factors that affect sleep quality. You can read in detail about the design and mechanics of the cards in the previous paragraph.
🔎 Graph anatomy
Graph description
The graph displays the user's sleep stages and changes in these stages during sleep. The small screen size creates a challenge - to make the graph informative and pleasing to the eye, and thanks to the competent solution to this problem, the graph looks amazing. There are no unnecessary elements in the graph, the large font size allows you to see the timeline, and the names of the sleep stages are distinguishable thanks to the Retina display and excellent readability of the font. The user should not be afraid 😱 that sleep does not start from the first stage ("REM sleep"). This stage is the last and the easiest one, but sleep begins with the first stage of slow-wave sleep. The circles represent areas where sleep has not been recorded, in other words - "wakefulness".
"Previous sleep" page on Apple Watch screen
Digression
The "Previous Sleep" page contains familiar cards that look great. Before we talk about the reports compiled from the heart data, let us pause for the thoughts of the author 🤔.
It is important to understand that design and technology go together. I am sure that thanks to a large number of sensors in Apple Watch, iPhone, and Home Kit devices, such reports are realizable. Why, then, hasn't Apple added so much sleep information in an already released app? This happens when you release a complex application. During testing, it is not possible to collect as much data for training neural networks and more accurate data analysis as required. After the release of the application with a limited number of functions, you can buy time, collect the necessary data anonymously and securely 🔒 from watches around the world and add cool, tested, and accurate new features. I believe this is what Apple's sleep tracking app is waiting for. This project is primarily a reflection and progress report on my UI / UX design skill.
Hear Rate report 🫀
The instruction in the image above is an algorithm for opening a report compiled from heart rate data during sleep. On the "Previous sleep" page, you need to scroll to the "Heart Rate" block and tap on the card. The report contains a heart rate graph, average heart rate, maximum, and minimum heart rate. Additional information is available by scrolling through the report, the design of which follows the design of the "Pulse" application. The heart rate graph is readable due to contrasting colors, watchOS system fonts, and the high-resolution display of your Apple Watch ⌚️. Heart rate during sleep changes from stage to stage, therefore, for better control over the state of health, it will be useful for each user to see detailed information about the heart rate.
A small digression with a big meaning ⚠️
Design is always situated inside the borders. Small screen size, a limited number of characters, predefined set of colors. This is the complexity of its creation and its beauty. Interfaces should be intuitive, among other things. Not only the "Previous sleep" page, but the app itself looks holistic and concise. The use of elements of a single style, the ability to combine beauty and functionality are tools that must be used regularly. After all, thanks to them, the application feels like a self-evident thing, the design is not striking, as if it disappears. Users perform actions by pressing buttons without looking because they know "where to press there" and where it will lead. A really cool, time-tested, and balanced app design is a design that raises no questions. Users just want to achieve the desired result. They may not even notice some of the features, original approaches, and this is cool because it means that the design is made "for centuries" 🛠.
Force Touch menu on the sleep graph
If you press hard on the sleep graph, a menu with 1 item will open. The purpose of this menu is to make it possible to open a detailed report compiled by sleep stages since there is no need to focus on this function. This report can be useful for a doctor 👩⚕️, or if the user is interested in learning more about his sleep, but is not so important in the daily use of the application.
Sleep stages report 🛏
The report consists of cards, each of which, when pressed, opens a page with a numbered list of time intervals of the user's stay in the sleep phase corresponding to the pressed card. In the list, you can also see the duration of each interval (so that users do not have to count for themselves, "c" means "care"). The cards display the total sleep time in each of the stages, the number of intervals, and for sleep stages with one interval - the intervals themselves. The implemented look of these lists and cards is the best way to explore sleep stages in detail. Dot 🥇
Sleep stages report in real life
Author's thoughts 🙋♂️
I don't like that developers are afraid of smartwatch screens. You need to work 2, 3 times more to fit the most important, necessary information beautifully and concisely, while not causing inconvenience in using the application. You have to give up a lot, for one "yes!" you have to say "no." a thousand times, but it has to be done. Content comes to the fore on a small screen like on no other device. Every pixel counts, so think, explore, try, but don't give up. I believe that the apps on the watch should not be inferior in appearance to the apps on other types of devices. The "Sleep Tracking App" project aims to not only prove it but also give some thought to other designers. Without fiction, without the concepts of super-mega-tech watches 10.0, you can create a cool application. There are all the necessary tools for this.
Appendix to the project 📦
Sleep graph and sleep stages
The sleep stages report to be realistic, it was necessary to study in detail the sequence of these stages in healthy sleep, then write a special algorithm that generates time intervals for each stage of sleep based on the time of the beginning and end of sleep, the sequence of stages and the total time spent in each stage.
Studied articles 🧑🔬
Additional feature
The choice of the wake-up schedule is not limited to the smart items "Tomorrow" or "On weekends". A useful feature is the ability to set a schedule based on events, reminders, and other things integrated with the Sleep Tracking App. In the example above a proposal to select a schedule for the "Ksyusha's birthday" alarm clock is presented. Such an alarm will be offered on the eve of the birthday.
That's all for now 🎬
A multi-month adventure
Author links:
© egsmrnv:
Others cannot use this work for any purpose without explicit permission.
