Designing a smart clock is kind of the perfect blend of what I have always wanted to do: design simple, minimal interfaces with the utility and specificity of a physical product that just kind of exists until you need to think about it. So, when my developer friend Sasikanth asked me if I wanted to design one for a Flutter developer challenge, I was all in. I've always been really into those old, vintage flip alarm clocks where the numbers would flip to keep time and I thought this would be a cool opportunity to design a digital version with an emphasis on motion.
The initial prototype was very, very straightfoward and I didn't stray too far from its roots in the end. I would later get rid of the pieces on the edges of the screen, as they were too abstract to fully realize the metaphor of the flip clock. The motion of the clock feels calm and airy, while the typeface, Space Grotesk, has a soft but serious look to it that seemed appropriate for something like a clock that has such a dynamic relationship with a person.
After the initial prototype, we explored different information that would be aligned with what a clock stood for, and decided we could try adding some weather information to the clock face. Above is a set of icons I designed for it, and below is an example of the weather conditions in the clock face.
Finally, we had a clock face design that we were happy with. After designing for the 24–hour clock first, I had to find a way to choreograph the double–digit hour transitions in the 12–hour clock so that there wasn't a zero annoyingly stacked to the left of the other digits most of the day.
Lastly, I designed a light theme so we could implement a night/day transition. The clock transition was made, however, we could only implement a toggle for people to switch between the two in their system settings.
After all this, motion specs were created in an attempt to make implementing the motion designs easier. Below is the spec for the transition between hours 9 and 10 in the 12–hour clock.