sleep-stages.png

sleep stages

sleep-stages.png
 

____
sleep stages.

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

 
stages-info.png

USER EDUCATION

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-detailz.png

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.

 
 
 

 

____
process.

 

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. 

 

IMG_0485.JPG
 
 
 A matrix was done in conjunction with the word cloud to help uncover words and possible directions, while helping join some themes together that were closely related.

A matrix was done in conjunction with the word cloud to help uncover words and possible directions, while helping join some themes together that were closely related.

 

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. 

Screen Shot 2018-01-25 at 3.59.07 PM.png