BetterSleep – Sleep Phases Redesign
User-centered design and AI usage are turning confusing charts into actionable sleep insights.
ROLE
Product Designer
TIMELINE
~2 months
COLLABORATION
PM, developers, designers
PRODUCT CONTEXT
Sleep tracking in BetterSleep
BetterSleep is a sleep and wellness app that helps people fall asleep and build better sleep habits.
The app can track a user’s sleep and show the results the next morning, including sleep time, recordings, a sleep score, and sleep phases. Sleep Insights helps users understand this data and find useful content in the BetterSleep library.
Unclear sleep phases
Users could not explain what REM, Light, or Deep sleep meant.
No next step
When users saw a difficult night, they did not know what to do with the information.
The Problem
The Sleep Phases graph sat between the sleep summary and recordings. Sleep Phases should have helped users understand why their night was good or bad. Instead, many users skipped this section and went straight to their recordings.
Research findings
Confusing graph
The line size and shape did not match the actual duration of each phase.
Hard to read
Small labels and legends made the screen difficult to scan and read.
RESEARCH
What users needed
I used usability testing, heat maps, and competitor reviews to understand why users were not using Sleep Phases.
Competitor review: examples of how other products explain sleep patterns and interruptions.
Key gaps
No clear main insight: users had to work out the whole graph by themselves.
No explanation of what was normal or why a phase mattered.
No direct connection between an identified issue and helpful BetterSleep content.
Design direction
Focus on the main
Show one important sleep issue first instead of giving every data point the same focus.
Hierarchy
Show a simple summary first, then an explanation, then a clear next step.
The graph's clarity
Make the size of each graph section match its duration.
Accessibility
Make labels and text accessible and easy to read.
EARLY IDEAS
Turning research into a first concept
I started with quick paper sketches. This helped me share ideas with the product manager before creating detailed screens.
Early paper concepts explore phase explanation, navigation, recommendations, and a duration-based graph.
Ideas tested
01.
A clear entry point from the Tracker summary into a dedicated Sleep Phases experience.
03.
Recommendations tied to the issue identified in the user’s night.
02.
Separate explanations for Awake, REM, Light, and Deep sleep, with a phase switcher.
04.
A bar graph where the size of each phase matched its real duration.
FIRST VERSION
AI explanations and content suggestions
I kept the old graph for the first version and focused on adding more value to the Sleep Phases experience. Using the OpenAI API, we generated personalized explanations of each sleep phase, what its duration could mean for the user, and which content from the BetterSleep library could help improve their sleep.
First version: the old graph connected to a new Sleep Phases page with explanations and content.
What I designed
01.
On the new page, users could switch between phases and see what each phase meant.
03.
AI suggested stories, meditations, and sounds from the BetterSleep library that could help with the user’s sleep issue.
02.
AI created a short explanation based on the user’s sleep-phase results.
04.
The selected phase was highlighted on the graph to connect the explanation with the nightly timeline.
One-page pattern for every phase
Each page used the same simple structure: show the phase on the graph, explain the result with AI, then suggest BetterSleep content that could help.
What still needed work
The entry point was too small and easy to miss.
The old graph still did not show duration well, and its labels were too small.
ITERATION 2
Making Sleep Phases easier to find
In the next version, I made the entry point easier to see. I also designed a ‘typical range’ bar that graphically explains the normal range and what the user was comparing it to.
Iteration 2: tooltip, stronger content, and a ‘typical range’ comparison.
What we tested
A first-use tooltip directed attention to the Sleep Phases entry point.
A ‘typical range’ bar compared the user with a normal range.
Refined explanations, content suggestions, and key insights.
Why it changed again
The main sleep issue was still hard to see, the line graph did not show duration well, and the labels were still too small. Testing also showed that the typical-range bar confused users, so I removed it.