Sleep Tracker

Personal Project Design / Development 2018
The Brief

Above/ Visualizing an ugly CSV export to identify trends

My son, Austin has never slept well — to the point where we began tracking his sleep just to make sure he was getting the bare minimum to survive. That kid really hated sleep.

There are a bunch of baby apps that let you track time — but none of them visualized your input in a useful way. At best you're shown a list of start and end times… not good for spotting patterns!

Fortunately the app my wife was using allowed you to generate a CSV of your records. So like any sleep deprived dad, I set to work on building a tool to help us get a better look at the patterns and averages forming over time. Because what else do you do when you’re up at 3am?

Visualizing Time

Making sense of time is somewhat of a passion — numbers and time have never really meant much to me, so I set out to create a better “picture” of each day without the need for timestamps.

The design was simple enough — the day is book-ended by blocks of nighttime, and interspersed with naps. Each awake and asleep period could be hovered for more information, average wake and sleep times were plotted, and trends such as whether a nap was good or bad was marked.

Above/ Hovering each chunk produces more information. Below/ Average wake and sleep times are shown in a popover

And what side project is complete without gratuitous use of animation? Everything from popovers, animations and modals was created using seriously suspicious CSS animation and a whole bunch of pseudo elements. The kind of stuff you could never get away with in your day job.

It actually worked!

Shockingly, the app was able to identify some trends that our tired human eyes had missed. It was able to identify what times produced the most ideal naps, and what bedtimes led to the fullest nights. Above all else, it also showed that things were indeed improving, albeit slowly.

Position
Tired Dad
Date
2018
Skills
Visual design
HTML & CSS
Dropbox API
Javascript
PHP