21st Century Hourglass
I budget about 20 minutes in the mornings to get ready to head out to work. I glance at my phone’s timer every so often during those 20 minutes to gauge how much time I still have. This felt vaguely suboptimal.
Unrelatedly, I recently realized something like a timer would help our kindergartner pace himself as he gets ready in the morning. I wanted to build him (and me!) something more fun than a digital display.
I ended up designing a fun and minimalistic custom electronic hourglass that uses changing colors to tell time. It’s a success so far: my son is super entertained.
I’ll describe the design process below. There’s going to be a lot of sweating of small stuff here. You’ve been warned. :)
Problems with Using Phone
The main problems with the phone UX are that:
- not always-on: need to press the unlock button to display the time.
- poor accessibility for spectacles/contacts wearers: if you sometimes spend part of your getting ready routine without spectacles (like me).
- only short-distance visibility: can’t see time from further than an arm’s length (need to unlock).
- not omnidirectional: phone display is a flat surface, so not visible from many angles.
Hardware Platform
As I said up top, I wanted something abstract, fun, and kid-friendly, so I ruled out seven-segment and similar digital displays. I didn’t want to go too crazy and use sound to indicate time. But I know kids like glowing lights. That narrowed the choice down to LEDs. I have WS2812B addressable LEDs from previous projects, so that’s what I decided to use. This looked to be a simple project, and likely to be battery operated, so I decided to use Arduino. For compactness and cost, I chose the Arduino Pro Mini.
Hardware Design Iterations
My first thought was to use a NeoPixel Stick (8 LEDs in a line) to linearly display time. Kinda like the “progress bars” on computers. As time passes, more LEDs light up.
This solves the always-on problem really well. But it’s middling for long-distance visibility, since it gets hard to tell the difference between, say, six and seven LEDs being on. Also LEDs are generally directional, so if the stick is facing away, it might be hard to figure out how many LEDs are on.
Then I realized that the LEDs I have can programmed show any color, so I could use color to convey information? For instance, like a traffic light, the progress bar’s color would change from green to amber to red as time progressed. This would make it easy to see how much time has passed even if the strip is facing away, just from reflections on nearby objects.
Which immediately made me reconsider whether we really needed 8 LEDs. Why not a single LED? And we’ll convey all information using only color. No progress bar. The single-LED design seemed to more kid-friendly than the progress bar UX.
I made a quick prototype using the Arduino Uno and breadboards. I reused a single addressable LED with long leads from another project. It sticks out from the board, making the whole thing look like a robot or flower, adding to the entertainment value.
Refining UX with Software
I wrote a short program to change the colors every 10 seconds. I changed the color sequence to be blue, red, yellow, white from color temperature scales, instead of the traffic light sequence.
I had to decide would happen when the time was up. Inspired by the hourglass, my first version simply turned off the light. This is nicely minimalist. But the problem with this approach was obvious the first time I ran the program.
Turning off the light works for an adult. But making the “timer not started” and “timer expired” states both look the same would be a problem if the user is a five-year-old. Either it’ll be hard to understand why two things that look the same are really different. Or they’ll sometimes argue with you :) that the timer didn’t really expire even if they usually understand.
Clearly the “timer expired” state should grab (even) a kid’s attention. So I made it look like like a police car’s lights. The light will continuously flash red-blue-white when the timer expires. :)
Final Hardware
After having refined the hardware and software, I soldered up a version using an Arduino Pro Mini and a prototyping board. I plan to add switches for different time periods like 20 minutes, 60 minutes etc.
Enhancements
I’m mulling over what UX enhancement I can do to indicate how much time remains with greater granularity. E.g., with 15 minute intervals, if the light is blue you don’t know if you have 10 minutes left 14 minutes left. I plan to try blinking lights during the last 20% of the interval to convey how many minutes are still left. 5 quick blinks if 5 minutes etc.
Overall, it was pretty fun to design custom hardware to solve a problem at home.
