Sleep Stages allows users to track their light, deep, and REM sleep in order to better understand their sleep quality. I worked with a product designer, a product manager, software and QA engineers, marketing, customer support,R&D, and a panel of sleep experts on this project.
My role: visual/interaction design, data visualization, user research
The visual breakdown of the sleep stages hypnogram allows the user to see the amount of time spent in each stage as well as some education about that stage. This visualization allowed us to utilize remnants of the existing Fitbit sleep graph, something that our users historically understood, as a tool to give clarity to the industry standard hypnogram.
sleep stages | detail page
Here the user can compare their last night of sleep with their own personal average or with the percentages recommended by our sleep experts along with their usual sleep details like their sleep schedule and goal.
01. visual design workshop
Before visual exploration began, I led a visual design workshop with some designers, the sleep team engineers, and the R&D members focused on sleep stages.
The goal of this exercise was to:
A. find out what we wanted sleep stages to look and feel like
B. to involve everyone who would be working on the development of this feature. It was important to include the team as early as possible.
02. visual language exploration
Once we had some attributes that we wanted to explore I started developing 3 styles that embodied them. For presentations I referred to each style referencing a musical artist: Rick Astley, Daft Punk, and Zee Avi. This helped people connect to the style references in a more immediate way. (all mentions of "classic" or "familiar" are in reference to the old Fitbit sleep look)
03. data viz exploration
After we decided to pursue the direction of "Daft" it was time to explore data visualization on a more serious level. We explored a good deal of non-conventional ideas to try to simplify the information as much as possible, but ultimately decided that accuracy and being true to what people would see in a sleep lab was more important.
03. data viz exploration (CONT.)
I started a phase in my exploration that I lovingly called "making friends with hypnograms". This was essentially me just manipulating and exploring with the standard hypnogram through shape, color, and small visual elements to make it seem less daunting. A big factor in this was using real data and knowing how smooth we could make it while still having an accurate graph.
**Shout out to the engineers on my team who built the crap out of this thing and executed it BEAUTIFULLY.