brktm

Hey there!

I'm here to remind you to take regular breaks.

I'll pipe up again in 1 min.

Min:

Set a time and confirm for a future notification.
Default time is set to 1 minute for easier testing purposes.
Manually display the notification, or view notification after muting, using the brktm icon.

The Project

I built brktm to explore how AI could speed up design and prototype development in a low-code workflow while strengthening my UX writing and microcopy practice.

The concept is a minimal break reminder that emphasizes clear, friendly copy and simple controls.

I handled research, design, prototyping, and testing end to end, with ChatGPT supporting ideation and implementation.

Research

I conducted competitor analysis among a number of similar break-taking extensions and applications. Examples below:

BreakTimer

Focus

Timer25

Forest

To summarize my findings:

• There are many applications/extensions available to help people take regular breaks, often focused around practices such as the 25-minute Pomodoro technique.
• However, only some of them had the level of flexibility and minimalism I was looking for.
• And in those, there were improvements that could be made to voice and microcopy to drive connection and engagement.

Based on my analysis, I concluded that a minimal, flexible user interface with a well thought out voice and good content design would be a good direction for this project.

Voice and Content Design

I created the following voice chart to help design my copy:

I also designed a conversation flow map to show how the content would guide users in using the app:

The above represents an iterated version of the conversation flow and microcopy, based on feedback from several participants.

The app would consist of a simple notification, that pops up at regular intervals to remind users to take a break.

Users can choose to:

• confirm the notification, which closes it and restarts the interval timer.
• edit the interval of their breaks, in minutes.
• mute the notifications, which causes the application to stop sending notifications.

Brainstorming with AI

I began to explore how AI, and ChatGPT in particular, could be used in the design process. One way was to brainstorm copy ideas with my chosen voice parameters (friendly, casual, brief).

I had already designed most of the functional microcopy, but I also wanted to add encouragement copy for users taking breaks.

The results did need to be edited and reviewed to ensure they fit the voice and use case, but I was able to efficiently generate concise, engaging quotes for the app. A random quote is printed every time the notification pops up.

I also explored using AI to help generate color theme ideas.

I used PaletteScry, one of my own applications, to see what the colors looked like together.

Being a more subjective task, this required more guidance and trial-and-error, and I had ChatGPT generate color combinations several times. It gave me a good basis to work from, and I eventually chose a blues-heavy palette for the application.

Sketches to Wireframes

Prototyping with AI

ChatGPT is capable of generating code based on natural language instructions. There is discussion that generated code is often inelegant and occasionally outright incorrect or non-functional.

I used Webflow's Figma to Webflow Plugin to convert wireframes into a Webflow page, then iterated with ChatGPT prompts and code output.

Then I went to ChatGPT and began giving it instructions for how I wanted the elements to behave, and asked it to write Javascript/jQuery code that I could use in Webflow's custom code fields. For example:

This was a process that involved a significant amount of back and forth, editing and reviewing, and trial and error, but I was eventually able to generate a code base that gave me a functioning, testable prototype based on my designs.

Using ChatGPT to help me create this prototype was an interesting process, and I still needed to leverage some of my previous engineering knowledge to get it working. However, it was still significantly more efficient than coding an application like this from scratch, as I could quickly set up a framework that I could make tweaks and edits to as necessary.

Usability Testing and Final Changes

I conducted usability tests with randomly selected participants on the major interactions (confirm, edit time, and mute), and asked for feedback on intuitiveness and tone.

To summarize:

• Time edit field updated for clarity and positioning based on visual feedback.
• Removed exact next-notification text to reduce confusion and inaccuracy over time.
• Added an extra close control after observing user expectations.
• Minor copy updates in the tooltips.

Link Back Up to Prototype

In the fully developed version, the notification would drop down from the top right corner and the icon would behave like an extension icon.

Final Thoughts

I found this an enjoyable project and was happy to leverage UX writing and microcopy skills while exploring AI tools in the design and development process.

AI improved speed, but human judgment remained essential for quality, clarity, and product decisions.

The project reinforced my goal of bridging design and engineering with traditional, low-code, and AI tools.

Next.js Port Notes

As part of moving this portfolio into Next.js, I recreated the brktm demo as a reusable React client component.

AI was used in this update to accelerate implementation and iteration during the React conversion, styling refinements, and content parity checks while preserving intended behavior and presentation.