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.

The Process

Usability isn't a huge problem for something as simple as this timer. The design process instead focused on finding aesthetically interesting ways of displaying time with more than just a number. While there was plenty of room for visual experimentation, there were functional requirements to be met. The design had to be flexible enough to cover different work periods and to let a work session go over time. After initial paper sketches, a variety of the ideas were mocked up digitally. During this process, I was making drawings that often involved a dot for every second of 25-30 minutes. I did some experimenting with Adobe Illustrator's JavaScript drawing api to make arranging 1,500 dots more efficient.

Some initial concepts

initial design concept
initial design concept

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.

initial design concept
initial design concept
initial design concept
initial design concept
initial design concept
initial design concept

The UI

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.

initial form design
final form design

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

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.

History

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.

The Code

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.

View the code on Github

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.

Try the demo app