Pomodoro Clock
How to boost retention?
I recently worked on a small freelance project on an hourly basis. It was my first time tracking time and reporting progress, and I realized I couldn’t focus for more than
20 minutes.
To fix this, I did some research and asked friends, most suggested trying the Pomodoro clock. But I wanted to make it fun, so I decided to create my own.
Tap to play
How the Clock Works
A Pomodoro clock has two main parts: a static minute dial and a moving seconds dial. Its operation is simple, you rotate the front dial to set the desired time (up to 60 minutes), and when it reaches zero, an alarm sounds. In essence, it has three functions: the set time, the current countdown, and the movement of time until completion.
Design and development
I started with sketches and collected visual references, then built the UI in Figma. To make it more engaging, I added a character with quotes for the start/stop notes, using a free asset and tweaking it to match the style. Finally, I brought everything into Rive to set up the animations. I broke the design into smaller animations, created them, connected them with listeners and conditions in the state machine, and tested them to see it come to life.