Behavioral Health Browser Extension

Role
Multimodal Interaction Designer
Timeline
3 weeks
Type
Solo hackathon
Tools
Figma, Cursor, Google Cloud Run
Role
Multimodal Interaction Designer
Timeline
3 weeks
Type
Solo hackathon
Tools
Figma, Cursor, Google Cloud Run

TL;DR

Problem
The 20-20-20 rule prevents eye strain, but people in deep focus tune out break reminders.
Approach
Set three design requirements from optometry and HCI research, then tested an early build with 2 users.
Solution
A Chrome extension that interrupts deep focus with a spoken, AI-generated knock-knock joke and a break prompt.

01.Exploring why existing break reminders fail people in deep focus

This project began with a recurring headache. Like many designers, I'd lose track of time in deep focus until eye strain set in, and passive reminders were easy to ignore.

The standard prevention is the 20-20-20 rule, yet digital reminders often fail. In the zone, my brain filtered notifications out until the strain was physical. A reminder has to be hard to ignore, but what makes it so also prevents adoption.

How might we use AI to support timely breaks for people in deep focus, so they protect their eye health and wellbeing while working with screens?

02.Setting three design requirements & testing an early build

To create a break reminder people wouldn't tune out, it had to cut through deep focus without feeling intrusive, so I set three design requirements from American Optometric Association guidance and HCI research and tested an early build with two potential users.

Design requirements

Design requirements: the theory, the human behavior it describes and the requirement it sets
TheoryHuman behaviorDesign requirement
01 Digital eye strainDeep focus makes screen time hard to trackPrompt a 20-20-20 break every 20 minutes
02 Stimulus salienceVisual banners fade into the background during focused workPair voice with visuals to break through focus
03 Perceived intrusivenessReminders that feel intrusive get turned offLet people set tone and timing, and keep AI on-device

Navigating the uncanny valley with voice AI

Insight
  • V1's calm “Mindful” persona for breathing cues felt fake to users, likely due to the uncanny valley: an artificial voice trying to sound human feels off when it is almost, but not quite, human.
Design response
  • I leaned into the absurdity of an artificial voice and used humor, and both users found it more comfortable and engaging.
Audio comparison: empathetic vs. humor-based intervention. Listen for how the humor forces an attention shift compared to the original tone.

03.Creating a Chrome extension that interrupts tunnel focus with a joke

To support timely breaks while keeping people in control, I built a Chrome extension that interrupts tunnel focus with a spoken, AI-generated knock-knock joke and a visually salient UI.

The break reminder over a research paper in Chrome: a 20-second countdown, a knock-knock joke and a Remind me in 5 minutes button

Designing user controls for flexibility

First-time user setup
Spoken reminders, voice controls and language
Stop time and longer breaks
Session settings
Ongoing settings, any time

04.Limitations of this design

User burden. Users must update their session windows if plans change. Forget before an unscheduled meeting and the reminder interrupts it.

No contextual fallback. If they forget to adjust the settings, the reminder still goes off during a live presentation or deep focus. The system doesn't understand what the person is doing at that time.

Tone mismatch. AI can't understand social cues. A robotic joke under pressure is irritating, so people may stop using it.