Image-To-Image
Customizing AI Fashion Models Based On User-Uploaded Images
As a product designer at Huhu AI, an AI virtual try-on company, I researched, designed, and delivered a key product feature leveraging the Flux Realism model, successfully securing a $600K business deal due to its rapid delivery.
ROLE
Product Designer
Prompt Engineer
TEAM
1 Product Manager (Co-Founder)
1 Front-End Engineer
2 Back-End Engineers
1 AIGC Scientist
DURATION
Oct 2024 (2 Weeks)
WHAT I DID
AI Model Research
Usability Testing
Prompt Engineering
Prompt Template
Wireframing
Prototyping
Design Review Workshop
CONTEXT
Huhu AI is a platform to create custom AI models and generate try-on images.
There are two parts of the service: creating AI models with user-selected traits (e.g., gender, race, age) and generating try-on images. The company targets fast fashion companies aiming to save costs on traditional fashion photoshoots.
Service 1: Fully Customizable AI models
Service 2: AI Try-on Images
PROBLEM
Text prompts are insufficient in creating the AI fashion models our clients envision.
Initially, the AI model creation feature was basic: users could select from predefined attributes via dropdown menus, and the system would generate an image based on those selections. However, this approach didn’t address a crucial need: capturing the client’s envisioned aesthetic, which is often better conveyed through images than text prompts.
NEED
We need a feature for users to upload a reference image and generate customizable outputs that match its vibe.
PROCESS
Delivering an MVP playground product to secure potential clients
The first part of the project is to build an intuitive interface to serve as a playground to demonstrate our technology during client pitches. I was the sole researcher and designer, delivering the project end-to-end.
IMPACT
The playground demo advanced 3 major clients to pilot testing with great impact.
DESIGN DECISIONS
Converting complex model capabilities into simple interfaces.
The image-to-image feature, built based on Flux Realism model, began as a Gradio demo by our AIGC scientist. Through daily interactions with the Gradio demo, I made key design decisions to convert my understanding of the model's capabilities into intuitive, user-friendly interfaces.
Guided by design principles.
For the initial launch, I aimed to deliver a straightforward and highly controllable experience. Therefore, I focused on two design principles: intuitive and frictionless.
001
Selection of Similarity Level
🤔 Finding. Users need to repeatedly modify the slider to achieve the desired outcome.
During internal usability testing, I realized that users adjusted the similarity slider 6+ times on average before settling on a result, revealing its inefficiency.
The slider wasn’t intuitive—users couldn’t easily grasp what each point represented or predict how small adjustments would impact the output, leading to uncertainty.
It also lacked precision—users found it difficult to select an exact score, often making repeated adjustments, which added unnecessary friction.
😁 Parellel Prototyping
The fixed point slider offers clear, predefined selection points. However, it’s not entirely frictionless, as users might expect it to be draggable and feel frustrated when it doesn’t behave that way.
The segmented button group provides clear options without ambiguity and seamlessly integrates with the existing design system, ensuring a smoother implementation.
🥳 Final Design. Segmented Button Group With Tooltip Explanation
Post-launch testing showed a 67% faster image generation time, confirming that a simplified interface and clearer AI behavior enhanced both UX and efficiency.
002
Prompting Experience
🤔 Finding. A good quality prompt is crucial for an ideal output, but prompting could be tricky.
A prompt like “Caucasian ethnicity” yielded 90% accuracy to generate white models, while “African American ethnicity” dropped to 10%, highlighting training data biases and the challenges of prompting.
🧐 What if I could simplify the prompting experience by guiding users with predefined options?
Instead of leaving users to guess the right words, what if I provided predefined options for common attributes like pose, gender, and background? This would significantly reduce the chances of poor results.
6 Market Research
I analyzed 6 fast fashion brands to identify common attributes users would likely want to customize.
Fine-Tuning Prompt
For commonly seen attributes, I tested different prompt variations to see which consistently produced most accurate results.
Exploring Visual
I also added visual examples to each saved attribute values, eliminating guesswork for users.
🥳 Final Design. Dropdown List With Visual Examples
The prompt for all available options were carefully fine-tuned in the back-end, relieving users from concerns about suboptimal results due to poor prompting.
This design is intuitive because visual examples eliminate guesswork, allowing users to instantly understand each option without trial and error.
It is also frictionless since by pre-prompting values, it ensures consistent, high-quality results while reducing cognitive load and speeding up decision-making.
HANDOFF & QA
Streamlined the handoff process for both
front-end and back-end to ensure fast delivery.
001
Front-End Handoff
Wireflows
I created detailed wireflows mapping all potential user behaviors across scenarios. With the product recently pivoted and no rigid design system in place, I built components as needed and provided thorough specs to ensure accurate implementation.
UI Component & Specs
002
Back-End Handoff
Keyword (Prompt) - Value Pair
On the back-end, I tracked all prompted keywords and their corresponding values in a Google Sheet, with a status field for integration. I also created a pseudocode prompt template to ensure the system generated a workable prompt for any user-selected combination.
Prompt Template Pseudocode
003
QA Facilitation
Once the design and development were complete, the product was launched internally. I facilitated the QA process, prioritizing high-impact bugs to ensure a smooth, error-free experience.
QA Doc Structure
REFLECTION
Experimentation is Key to Human-Centered AI
By diving deep into our AI model, I gained a solid understanding of its capabilities and limitations, which became the foundation for designing intuitive interfaces.
Navigating ambiguity while running prompt engineering experiments was both challenging and rewarding. By iteratively testing keywords, I uncovered patterns in the model's behavior, which informed both the design and functionality of the feature.
Efficiency Comes With Good Communication
A 2-week timeline required intense focus and adaptability. I ensured continuous alignment with the team to keep us moving efficiently.
Usability Over MVP Constraints
Even in the rush to launch, usability remained a priority from my perspective. By parallel prototyping and hosting design review, I ensured the solution worked seamlessly for users while finding practical compromises with developers.
Next Project 🌱 👉
