Bubble Over

A soundless calendar event alarm system

A calmer way to never miss a meeting. Gentle visual reminders that are subtle when you have time, but become impossible to ignore as the clock runs down.

Product

Project Overview

Client: Self-launched App
Project Type: Product Design, UX/UI
Tools: Claude Code
My Role: End-to-end Designer
Time: 2 Weeks
Status: Launched, in testing

CONTEXT

PROBLEM

PROCESS

ROADBLOCK

LAUNCHED

CONTEXT

A Visual Alarm Without Sound

An alarm system that gets you to your meeting on time. Bubble Over connects to your calendars and launches bubbles for each scheduled event. Through four timed intervals, they increase in intensity the closer you get to your meeting and become impossible to ignore.

PROBLEM

Why Still Use Traditional Alarms?

Traditional alarms and alerts are the go-to tools for reminders. We've accepted them as the best option, but are they really?

Alarms need to be manually set and are stressful to constantly hear.

Small notifications are easy to overlook.

People are overloaded with meetings and can accidentally miss one.

Urgency is a tedious manual setting for alarms. They do not automatically adapt.

PROCESS

AI as a Tool

For this project I completed the end-to-end process within Claude Code.

1

Research

I drew inspiration from individuals with hearing impairments or ADHD, resulting in a solution that benefits everyone, the ˝curb-cut effect˛.

2

Plan

Using Claude Codeˇs plan mode, I mapped out how to design and successfully launch the product.

3

Design/Prototype

With that foundation, I built in Claude Code and refined the UX/UI with prompts.

4

Launch/Test

By week 2, I launched a final product and put it in front of user testers for feedback.

ROADBLOCK

Design Judgment Forms a Strong Prompt

In my prototyping phase, I identified a key problem that could ruin the usability of my app.

The intensity of bubbles generated at the five- and one-minute intervals was causing significant lag.

I tweaked the obvious fixes first: quantity, size, and animation.

Every fix targeted the symptom, but none fixed it.

˝Why are simple graphics causing so much stress on the system?"

I analyzed how Claude had built the graphics and identified the real issue.

Claude had over-built each bubble with several layers, clipping masks, and gradients.

My experience in illustration made the unnecessarily bloated file obvious.

This time, I instructed Claude on how to construct each bubble. The look was similar, the file was much smaller, and the lag was gone.

LAUNCHED

Designed, Built, and Launched

Measuring Success

Shipped solo in 2 weeks

Currently being tested by real users

Designed completely within Claude Code

Reflection

This was my first vibe-coded project that I launched, and it wasnˇt the traditional product design process. Using AI bypassed some of the typical flow, but there are some things I would consider changing:

1

Pay closer attention to how AI is building
the features.

2

Bring wireframes back into the process

AI gave me polished screens fast, but I landed on a solid answer without exploring the alternatives. I never got to ask 'what about a layout like this?'

3

Work within the target coding language faster

Refining within HTML and converting into Swift was more of a setback than it was helpful. I spent days fixing what broke in translation.