When it comes to working design professionals who have some experience with AI image and video generation tools, they need an easier way to come up with text prompts that result in the images and videos they want without having to spend time fine tuning their writing.

The first step I took in order to gather research and determine the framework for this project was running two workshops with my fellow students. I had never run a workshop before and learned a lot from the process.

For the first workshop I ran, I split participants into two groups, image generation and video generation, and asked them to write down and draw out features they would want in their tools. With the first group I realized that having so many respondents gave me a lot of data to sort through, which turned out to be very informative but also very time consuming.

With the second workshop, I had participants work in small teams to come up with and draw out an interface for either an AI image or video generator. The results I got from these groups were detailed and informative, but I had made a mistake when giving instructions and forgot to ask them to provide annotations for their illustrations, something I plan to do when running workshops in the future.

Test Results

• Many of the responses alluded to extra controls that dictated the style or effects of the generated result.
• One of the more surprising outcomes was that people really wanted a way to organize their results and be able to sort them into folders and workspaces dependent on the project.
• One very insightful respondent said that they wanted a way to create recurring characters and backgrounds that could easily be referenced without having to re-sort image seed numbers.

I generated a list of possible features for my design and, with the help of my instructor, ran through a MSCW Prioritization exercise to help me further refine and focus my design.

As I began the process of wireframing, it became clear to me that the biggest problem I would have to solve would be that of the prompt builder menu. One feature I came up with during this process was to implement a preview window, which could be used to control angles, effects, lighting, and other variables, so that users would have greater control over the end results they were generating.

Keeping user needs in mind, I found myself struggling to solve the primary interface my users would interact with. Here are a few of the iterations I went through while solving the problem. While reviewing the design with some of my classmates, I had something of an epiphany. Because my tool aimed to be so robust, my design needed to be geared towards more experienced and professional users rather than users who are dabbling and generating images and videos for fun or personal use.

In order to not take up too much space on the screen, I transformed my menu into a series of drop down menus. Inside each of the drop downs I included as many options as I could, because in order to meet user needs, having all options available to them made more sense than forcing them to have to know and search for the variable they wanted, which would be counterproductive to my mission of designing a tool that makes writing prompts easier as well as teaches users syntax and methodology for writing their own prompts.

I used Figma Variable to determine a design system for Bons.ai using a series of primitive variables to dictate colors within the brand as well as number variables which determined a system for spacing as well as for corner radiuses. I then developed a series of tokens which referenced the primitives and how they could be used for things like backgrounds, buttons, and text, in both light and dark mode.

The only thing I was not able to apply my variables to were the gradients used throughout Bons.ai. I would have liked to create primitive and token variables for my gradients, but currently Figma does not support gradients in their variables.

I was quickly able to convert my wireframes into a high fidelity version and apply my design system to it. Something I plan to change in future versions of this product is the sizing of text as well as icons. I would like to come up with a system of icons that match the tool descriptions so that the menu can be collapsed even further.

In order to better evaluate my product, I performed a SWOT analysis of perceived strengths, weaknesses, opportunities, and threats.

• Strengths – this is a very robust tool, containing unique features that are only just beginning to see implementation in a few AI tools. Additionally, having a system for organizing projects into folders similar to Pinterest or Figma is a feature that is currently not in many existing tools.
• Weaknesses – the menu is not as intuitive as I would have liked. In its current state, the interface feels a bit unwieldy which will make it difficult for novice users to learn. Also, I may have been too ambitious with designing a tool that generates both images as well as videos because currently there are not many existing products that do both.
• Opportunities – towards the end of this project I discovered Ideogram, one of the newer AI image generators. I really like their interface, especially their "Prompt Magic" feature which rewrites an inputted prompt into one that produces better, more dynamic results. If I had seen their interface earlier, I would have liked to incorporate many of their features into my design.
• Threats – With so many AI tools popping up these days, there is no end to the number of competitors in an ever growing and saturated market. With that in mind, it is also hard to determine if there is even a market for a tool designed with working professionals and experts in mind.

This was a really big project. Upon reflection I see how much of the problem I solved without realizing that I had already solved it. Through my research, workshops, and analysis I was able to make the tool that I set out to create fairly quickly, but I kept thinking that I was missing something. Had I realized this earlier I could have spent more time fine tuning the features as well as applying more polish to the overall look and feel of the final product.