Mobile sleep tracking flow examples

Sleep tracking flow examples

Step 1 · 0:15
See the flow
Noxogy Sleep Tracker
Top navigation bar, central time display, central activation button, and three bottom cards for history and settings.
Step 2 · 0:21
See the flow
Noxogy Sleep Tracker
Top header with app name and time, central active monitoring indicator, and three bottom cards for settings and history.
Step 3 · 0:31
See the flow
Noxogy Sleep Tracker
Top header with time and status, central circular interactive button with waveform, and three bottom cards for secondary navigation.

Step 1 · 3:48
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, central instructional text, central illustration, bottom primary action button, and secondary text link.
Step 2 · 3:56
See the flow
SnoreLab : Record Your Snoring
The screen is vertically centered with a top control, a central status indicator, and a bottom interaction slider.
Step 3 · 4:05
See the flow
SnoreLab : Record Your Snoring
The screen is vertically centered with a top control button, a central clock and progress ring, and a bottom slide-to-action control.
Step 4 · 4:26
See the flow
SnoreLab : Record Your Snoring
Top button, central clock with progress ring, status text, and bottom slider.
Step 5 · 4:31
See the flow
SnoreLab : Record Your Snoring
A centered modal dialog sits over a background containing a timer, status text, and a bottom slider.

Step 1 · 0:49
See the flow
Noxogy Sleep Tracker
Top navigation bar, followed by a status message, a segmented control, a list of recordings, and a bottom navigation bar.
Step 2 · 0:55
See the flow
Noxogy Sleep Tracker
Header with date and navigation, followed by a status message, a tab switcher, a list of audio recordings, and a bottom navigation bar.
Step 3 · 0:58
See the flow
Noxogy Sleep Tracker
Header with date and navigation, followed by a status message, a segmented control, a list of recordings, and a bottom modal overlay.
Step 4 · 1:04
See the flow
Noxogy Sleep Tracker
Top header with date and navigation, middle content area with recording list, bottom modal overlay for sorting.
Step 5 · 1:07
See the flow
Noxogy Sleep Tracker
Top navigation bar, status message, segmented control, recording list item, central action button, and bottom action sheet.
Step 6 · 1:14
See the flow
Noxogy Sleep Tracker
Top navigation bar followed by a segmented control, a warning message, and a vertical list of data rows.
Step 7 · 1:17
See the flow
Noxogy Sleep Tracker
Top navigation bar followed by a descriptive text block, a vertical list of selectable items, and a final action button at the bottom.

Step 1 · 1:35
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, central illustration, bottom soundscape picker, and bottom navigation bar.
Step 2 · 1:37
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, large hero illustration, soundscape title, vertical scrolling selection list, bottom navigation bar.
Step 3 · 1:42
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, large hero illustration, centered label, vertical scrolling picker wheel, bottom navigation bar.
Step 4 · 1:47
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, followed by two distinct cards containing settings, and a bottom navigation bar.
Step 5 · 1:48
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, followed by two distinct cards containing settings, and informational text at the bottom, with a persistent bottom navigation bar.
Step 6 · 2:06
See the flow
SnoreLab : Record Your Snoring
Top navigation bar, central time picker, list of settings, and a centered modal overlay with a bottom navigation bar.
Step 7 · 2:08
See the flow
SnoreLab : Record Your Snoring
Top header with back button and title, followed by a time picker, then a list of settings rows, and a bottom navigation bar.