Building the best sleep tracking interface.
We believe displaying sleep data on a watch face is the best way to quickly understand sleep habits. This will also translate well when building for WearOS & iWatch.
4 stages of sleep:
Knowing sleep patterns can help with better sleep:
Below is the detailed journey ending at the current design.
Looking for feedback in the comments section.
Starting with what we believe to be currently the best interface.
Fitbit sleep tracking:
Clearly shows the various sleeping stages throughout the night.
Google provided a tutorial for this interface:
Source code:
Final UI:
This was difficult to build and did not produce the desired results.
Having some tutorials from K Apps
His tutorial for Android Jetpack Compose Watch:
Source:
Combining the sleep depth chart with the watch gave us:
Display 4 stages (light to heavy) in sequence along the watch face.
This is OK but need to add the start / end points with connections.
Adding white dots at the start of a sleep stage and blue dots at the end with a line connecting the two.
Reading the sleep watch (for demo each hour is a different stage):
- 10pm — stage 1 — light sleep
- 11pm — stage 2— sleep
- 12am — stage 1 — light sleep
- 1am — stage 2— sleep
- 2am — stage 3— deep sleep
- 3am — stage 4 — REM
- 4am — stage 3 — deep sleep
- 5am — stage 2— sleep
- 7am —stage 3 — Wake
This is great, one can easily see the stage of sleep throughout the night! The sleep goal is to have as much dark green around the outside of the watch face as possible.
But it’s a little scattered … hard to read …
Android Jetpack Compose Pie Chart
Having another tutorial from our man K APP for a pie chart.
Source
Adding the two produces …
Thinking about lots of different sleep segments …
Changing colors and adding the sleep and wake time produces the final product.
The blue dot is the sleep time (11pm). The yellow dot is the awake time (7am). Each sleep segment on the watch face shows the sleep level. Clicking on any sections provides more info.
Quickly see the sleep pattern. The darker the color the deeper the sleep (deepest sleep from 1am to 3am). One can even compare different nights.
Getting sleep data
We do not collect / transmit / alter any personal data but simply (with user permission) read it.
Google Health Connect
Apple HealthKit
Next is to design the UI/UX for workout data.
