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.
I conducted competitor analysis among a number of similar break-taking extensions and applications. Examples below:
To summarize my findings:
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.
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:
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:
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:
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.
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:
I was pleased that in general, users felt the voice of the application content was engaging and encouraging.
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.
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.