I built an opinionated productivity timer because the usual ones were boring

Live version

Check it out here and let me know what you think. What works? What could be better?

Why did I build this?

I use timers very frequently because I like to work in time-bound intervals. I also prefer to have some music in the background. There are a lot of timers out there but not a lot of them are enjoyable to use. Plus, they don't have inbuilt music. So I decided to build one.

Key decisions

Capping the timer at 99:59

Two reasons for this. Firstly, it emphasises on setting shorter intervals. Secondly, it ensures the UI remains clean and easy to read.

Having a shader gradient background

The slow moving gradient makes the timer visually interesting and complements the passage of time. Thank you to Yongmin Ruucm and Seungmee Lee at shadergradient.co for creating this.‍

Adding audio cues

Adding sounds for actions like 'play' and 'reset' makes the timer accessible and also adds a touch of delight to the interaction.

Some of my favorite design details

Learnings and takeaways

One step at a time

As a designer stepping into development, I initially felt overwhelmed by the technical challenges. Breaking tasks into manageable pieces turned out to be a game-changer. I learned that eventually you’ll figure everything out.

Building for myself felt empowering

Being able to convert my own design into a fully functioning product felt great. The feeling only got better when I saw my friends use it in their own lives.

A rigid process can sometimes slow you down

Early on, I felt stuck trying to finalise every detail of the design before moving to development. But when I allowed myself to shift back and forth between designing and developing, new ideas naturally emerged.

Feedback is precious when working solo

Since I worked alone on this project, I often got lost in my own ideas. Feedback from my friends helped me refine some features and scrap ideas that weren’t working.