AI agent desktop application to accelerate visual design process
Role
Product Designer
Timeline
September - December 2024
Team
Individual
Responsbility
Visual Ideation, Prototyping, Usability Testing, Visual Design
Mission
Reimagining content stylizing for visual designers using AI agents to accelerate their design process in their design application.
Problem
Visual designers spend a lot of time working inefficiently because design tools are complex and difficult to learn.
Opportunity
How might we accelerate visual designers’ design process in their design application using AI agents?
AI agents are helping people accelerate their workflow such as inputting field forms, writing code, and generating songs.
Creativeflow is a desktop application that designers open to access their design applications for accelerated workflow.
I’ll be using Wix as an example for the AI agent to accelerate the design process.
Initial concept
My initial concept enables designers to prompt the AI agent to design a style within a design application.
Initial usability testing
Designers thought checkmarks were interactive when they were intended to signify progress.
Added visual indicator
Integrated a progress bar for clear visual indication to signify progress.
After testing, designers did not find steps to be important information.
Enhanced information hierarchy
Added a dropdown feature to hide steps.
Used color to highlight important details, like user prompt and time left.
Challenge
Sidebar is pulling user's attention away from the actual design results.
HMW
How might we integrate the AI agent into the design canvas so that users can focus more on the design canvas?
Integration in design canvas
Most direct CTA towards the container. However, CTA button positions were always changing.
There were discoverability issues.
Prompt as a fixed position
The modal is a fixed position so that designers are always able to prompt a task without any discoverability issues.
Challenge
Users found the color to be distracting from the design canvas, so I explored ways to tone the color down.
Exploring visual language
The curved lines with dark theme did not align with the design application’s brand.
Muted gray tones
The intent of minimizing color is to prevent the modal from distracting the designer from the actual design output by the AI agent.
Mission
Accelerate visual designers’ process in their design applications using AI agents.
Feature highlights
Modal enables designers to stylize content for the AI agent to perform.
AI agent cursor shows the exact tasks being performed for transparency.
Categories for designers to access other design applications.
User flow #1 - Stylizing section
User flow #2 - Viewing recent tasks
User flow #3 - Error handling
User flow #4 - Changing applications
What I’ve learned
Importance of feedback and iterations to improve both the visual and interaction design.
If I had more time
Consult with engineers on the technical feasibility of accessing design applications.
