For my foray into browser extensions, our attention-deficient society inspired me to make a Pomodoro Technique timer combined with a site blocker. The concept was to make something that felt like an analog device resting on a table, the buttons evoking tactility. I chose a color palette and mocked up the front of the device in Figma, making notes on intended functionality.
To track rounds—each includes a pomodoro, or work interval, and a break—I imagined an array of LED lights that spanned the top of the device and flashed or remained lit depending on whether an interval was in progress or complete. This motif would later become the extension's icon.
I broke with tactile reality when making the reset and options buttons. Though the reset behavior was one of the last things I implemented, I'd had the idea from the beginning of incorporating a Missile Command–esque animation to communicate the gravity of wiping out your progress. To view the options I wanted the user to flip the device over and felt it would be more satisfying to push a button as opposed to, for instance, click the right side.
The back is simple, primarily showing button-controlled inputs for interval lengths.
To keep the options menu uncluttered, I introduced a flexible screen that coils into the device when not in use, pushing the concept towards retrofuturism. This led me to imagine the device being given to users by a dystopian employer or life coach, urging you to maximize your output whenever you try to visit a blacklisted site. Trying to visit a blocked site during a pomodoro presents you with some playful chastisement.
The last step was to add some sounds to the device. I used synthesis and sampling in Ableton Live to make sound effects, and played short, major-key melodic figures to act as the alarms. To hear those, download them or install the extension.