The Project

I wanted to explore the possibilities of using ChatGPT in the design and development process, and how it could enhance the capabilities of no-code/low-code development. I also wanted to use and expand my skills in UX writing, content design and microcopy.

Hence, I created brktm - a minimalistic notification application for reminding users to take regular breaks.

I researched, designed, prototyped, and tested the application myself, and incorporated ChatGPT extensively in the process. I created the prototype for the application directly on this Webflow site, as seen above. This application is envisioned as an addition to an existing website or a browser extension.

Research

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

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 whom I ran through the conversation with.

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. Users can still access the app through the icon or extension control after it has been muted, and can unmute it from there.

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 (i.e. friendly, casual, brief).

I had already designed most of the functional microcopy, as shown in the previous conversation map, but I also wanted to add some copy to give encouragement to users taking breaks. Here, I was able to prompt ChatGPT with my chosen voice parameters, and ask it to help generate copy based on my voice. Some examples follow:

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 10-15 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 did give me a good basis to work off of, however, 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 some discussion that the code that ChatGPT generates is often inelegant, inefficient, non-best-practice compliant, and occasionally outright incorrect or non-functional.

It occurred to me, however, that even in its current state, ChatGPT could help in a limited use case - quickly generating functional, testable prototypes based on wireframe designs.

The process was this - first, I used Webflow's Figma to Webflow Plugin to convert my brktm wireframes into a Webflow page:

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.

It also gave me a running record of a natural language description of the application behavior through my prompts, which would be helpful for hand-offs.

Usability Testing and Final Changes

I conducted usability tests with a number of randomly selected participants, tasking them to go through the major interactions (i.e., confirm, edit time, and mute). I asked for their feedback as to the intuitiveness of the interface and their opinions on the voice and tone of the application.

Based on their feedback, I made the following updates to the prototype:

To summarize:

• Time edit field updated based on visual feedback that the controls were somewhat cluttered - updated for clarity and positioning.
• Content updated to remove text indicating exactly when the next notification would pop up - feedback suggested that the extra text was superfluous, and potentially confusing if the user waited a while to close the notification (which would make the text incorrect, since it shows the currently calculated time when the notification opens).
• An extra close button control added, based on observation that some users briefly moved their cursors to the top right, expecting a close control to be there.
• Minor copy updates in the tooltips.

I was pleased that in general, users felt the voice of the application content was engaging and encouraging.

‍

Prototype

Link Back Up to Prototype

In the fully developed version, the notification would drop down from the top right hand corner of the screen, and the icon would be an extension icon in the browser or otherwise placed in an out-of-the-way corner of the screen.

Final Thoughts

I found this an enjoyable project to work on, and I was happy to be able to leverage my UX writing and microcopy skills. I was also excited to explore the new field of AI tools and how they can be used in the design and development process.

Overall, I would say that while AI in its current state is definitely useful in making things like brainstorming and creating simple code frameworks more efficient, there still needs to be a human designer and developer overseeing the process. They are needed to catch errors and ambiguities, and ensure that prompts and instructions are solving the right problems.

I think it's an exciting time in both the design and development fields with these new and growing technologies, and I look forward to continuing to expand my capabilities with them.