Pom Timer: A Digital Hourglass
A timer app for following a more flexible approach to the Pomodoro Technique
About the Project
Pom Timer is a side project I made to scratch two itches. The first is an issue I had with the Pomodoro Technique. This is a productivity method based on short focused periods of work, with small breaks in between. As a freelancer, I consider it an important part of my service to respond quickly to client questions. However, this can leave my time feeling very broken up. I had been trying the Pomodoro Technique as a more structured way of splitting focused work time and email time and was enjoying the general feel of it, but had a couple of concerns. The official times are 25 minutes of work, and five minutes of break. 25 minutes is a tiny increment for development work, and taking a break for five of every 30 minutes felt excessive. I wanted a more flexible timer that I didn't have to reset all the time.
The second was more of a design experiment. A timer can be incredibly simple and uninteresting. Digital clocks just have to display a few numbers. I wanted to make a pretty thing that would sit on my (computer) desktop. I drew inspiration from an hourglass, a beautiful object designed based on a physical representation of time. Below I'll walk through some of the process and the final app.
Some initial concepts
Some ideas really have to be tried in code rather than statically. This one treated dots as cloud of swarming particles that I could push around based on the elapsed time. It was an interesting direction but ultimately felt like it didn't do enough to visually represent time.
Originally I used a pretty standard form to set the session lengths. I swapped this out for what felt like a positive affirmation in interface form.
The Final App
In development, I focused on creating a soft feel with subtle animations and transitions. I wanted the timer to be gentle, not pushy.
Start a session
The app allows you to select a work period, a break period, and the number of repetitions during a session. These settings are stored in local storage to use again or adjust for the next session.
The timer includes a standard display of digits, but also a dot for each second that shifts over time as seconds tick away.
From work to break
When the timer reaches zero, a tone sounds. However, the app doesn't automatically switch to the next session. You have to press return to change state. This means if you're in a good work flow, you don't have to stop immediately. Extra dots are added as needed. When the state changes, a progress bar at the bottom tracks how much of your total session time you've used. The break state is differentiated from work with a different color.
The app tracks your work sessions and groups them by week. To provide encouragement to increase your work to break ratio, the history data is summarized by comparing the current week to the previous week and average of all weeks.
This is just a front end app, so data is stored in local storage. It's built with React. The transition between work and break states animates every dot individually. In order to smoothly animate over 1,500 elements, I used the PixiJS framework for 2D WebGL rendering. Animations with PixiJS are triggered on change of the React app's state.
The Demo App
Since I was designing for myself, there is no onboarding process for new users and I erred on the side of minimal/graceful (aka keystroke instead of button) controls. Once the timer has started, with the browser window active, pressing spacebar pauses the timer and pressing return switches from a work to break session. This should be done when the timer reaches zero and you're ready to switch. The circle in the bottom left is the menu icon.
It was also designed to sit in a small browser window in the corner of my screen, so at this point it's mostly just tested in Chrome on a Mac.