Bons.ai Logo

Bons.ai is an AI Image & Video Generation Tool

Objective

Design an AI image and video generation tool that simplifies the process for design professionals, making it easy to create prompts that deliver the exact results they need.

Results

Through in-depth research and feedback from peers and instructors, I designed a responsive, customizable web-based interface for AI image and video generation.

Final Design
Click to see screens for final design

Challenges

The biggest hurdle? Simplifying the complex, often confusing process of crafting AI prompts. By rethinking the interface with dropdown menus and intuitive tools, I eliminated the guesswork and made it easy for users to create effective prompts with confidence.

Figma Prototype window

I Created this Prototype in Figma to Demonstrate it's Functionality
Conducting Workshops

Running workshops provided clear insights and actionable data that shaped this project’s framework. In the first session, participants brainstormed features for AI tools, generating a wealth of ideas that, while time-intensive to sort through, proved invaluable. Building on that, the second workshop had small teams design interfaces for these tools, producing detailed and actionable results. A small oversight—forgetting to request annotations—taught me the importance of clear instructions, a lesson I’ll carry forward to future collaborations.

Feedback from Groups A and B

Click to see Responses from Workshop Participants
A workshop response to the question: "What would you like the interface for an AI image/video generator to look like?" A workshop response to the question: "What would you like the interface for an AI image/video generator to look like?"

Placeholder Header to talk about Affinity Maps

Workshop Results --> Affinity Map

Test Results Informed the Final Design

  • Inovative new controls that allow users to modify art styles and lighting in the final product.
  • To organize their results and be able to sort them into folders and workspaces dependent on the project.
  • A way to create recurring characters and backgrounds which resulted in a way to easily referenced without having to re-sort image seed numbers.
Research – MSCW

The result was a clear, focused design that prioritized user needs. Through an MSCW Prioritization exercise with my instructor, I identified must-have features like intuitive prompt generation, image upscaling, and project organization, while also planning for enhancements like video editing tools. This process sharpened the design and ensured it delivered exactly what experienced designers need.

Prototype: Wireframes

When I started wireframing, it was obvious the biggest challenge was the prompt builder menu.

My solution?

A preview window that lets users control angles, effects, lighting, and more—giving them total control over their final results.

Check out my Initial Wireframes
The Menu

I hit a roadblock designing the primary interface users would rely on. After several iterations and feedback from classmates, it clicked: this tool needed to cater to experienced professionals, not casual users. With that focus, I refined the design to meet the needs of advanced creators looking for a robust, efficient solution.

Iterations of the Meue

I condensed the menu into drop-downs to save space while keeping all options accessible. This makes the tool intuitive and efficient, helping users quickly find what they need without guesswork. The goal? Simplify prompt writing and teach users the syntax and methodology to craft their own.

Demographics

Design professionals who use AI for image and video tools need a simpler way to create text prompts that deliver the results they want—without wasting time tweaking their wording in their prompts.

Persona Based on Research and Workshop Findings
Design System

I built a scalable design system for Bons.ai using Figma Variables, starting with primitives to define colors, spacing, and corner radii. From there, I created tokens that mapped these primitives to specific UI elements like backgrounds, buttons, and text—ensuring consistency across both light and dark modes. The result? A cohesive, flexible system that streamlines design decisions and maintains brand integrity.

The only limitation? Gradients. While I wanted to include them in the variable system, Figma doesn’t currently support gradient variables. It’s a gap I’ll address as soon as the feature becomes available, ensuring even more design efficiency in the future.

Variables collected into Primitives and Tokens
High Fidelity

I transformed my wireframes into high-fidelity designs and seamlessly applied the design system, creating a polished and consistent look. My goal was to develop a cohesive icon system that aligns with tool descriptions, allowing the menu to collapse even further and streamline the user experience.

High Fidelity Prototype
SWOT Analysis

I conducted a SWOT analysis to evaluate my product’s position and identify areas for improvement. Here’s the breakdown:

  • Strengths: The tool is robust and packed with unique features that are just starting to emerge in a few AI tools. A standout strength is the project organization system, which uses a folder structure inspired by platforms like Pinterest and Figma—a feature most competitors lack. This gives users a familiar, intuitive way to manage their work.
  • Weaknesses: The menu isn’t as intuitive as I’d hoped, making the interface feel unwieldy and potentially challenging for novice users to navigate. Additionally, I may have overreached by designing a tool that generates both images and videos, as few existing products handle both effectively. This dual focus could dilute the user experience.
  • Opportunities: Discovering Ideogram late in the project revealed a goldmine of inspiration, particularly their "Prompt Magic" feature, which refines user prompts for better results. If I’d encountered it earlier, I would have integrated similar features to enhance my tool’s functionality. There’s also room to refine the interface and streamline the menu to improve usability.
  • Threats: The AI tool market is exploding, with new competitors emerging constantly. This saturation makes it difficult to stand out and raises questions about whether there’s even a market for a tool tailored to working professionals and experts. Staying competitive will require continuous innovation and a clear value proposition.

This analysis highlights the tool’s unique strengths, areas for improvement, and the challenges of standing out in a crowded market. By addressing weaknesses and leveraging opportunities, the product can evolve to better meet user needs and carve out its niche.