Overview
Fliption is a generative AI solution that creates model content without physical models, studios, or photographers. The new Virtual Try-On feature allows users to upload clothing images and generate them onto virtual models.
The first goal was to launch a Virtual Try-On test page to validate market demand and generate business inquiries. Following this, we redesigned Fliption 1.0, which was initially built without designer involvement, addressing UX friction points. Fliption 2.0 will integrate the refined Virtual Try-On experience.
MY ROLE
As the Product Design Lead, I conducted user interviews and a competitive analysis to clarify market needs. After designing and testing the Virtual Try-On test page, I analyzed user feedback and engagement metrics for iterative improvements.
I also conducted a UX audit of Fliption 1.0, prioritized improvements with the MoSCoW framework. To enhance efficiency and consistency, I proposed and led the development of the Fliption Design System with a front-end engineer
Role
Product Design LEAD
TEAM
1 product Designer
1 product manager
3 Engineers
Responsibilities
User Research
Product redesign
Prototyping
User Testing
Design System
Tool used
Figma
Lottie
Timeline
Oct, 2024 - Jan, 2025
Impact
in user
drop-off rate
-10.6%
Virtual Try-on
Test Page
In business
inquiries
+40%
Virtual Try-on
Test Page
in frontend development efficiency
+30%
Design System
Project Background
Rebuilt the User Experience from the Ground Up as the First Designer
Fliption 1.0 offered Face Swap, Model Generate, and Image Edit features powered by generative AI. Before I joined, the product was designed without a designer, using only the TailwindCSS framework.
As the first designer on the team, my initial task was to design a test page for the new Virtual Try-On feature and iterate on it based on user feedback. The goal was to validate market demand and generate business interest.
However, through a UX audit and usability testing, I identified critical UX issues. To address this, I proposed a full redesign, which ultimately expanded the project into a complete overhaul of Fliption 2.0.
1.0
Virtual
Try-On
Test Page
2.0
Target User
Focused on businesses producing or planning model content in the fashion and cosmetics industries
Produce and sell product
creative direction
content creation
TARGET USER
Production companies
Marketing/AD agencies and creatives
Small business owners in online marketplaces
Research
USEr Interviews
Identified Pre-Production as the most impactful area
Based on interviews, pre-production was identified as the most resource-intensive phase. Users mentioned spending hours verifying shipments for 200+ products, coordinating teams, and preparing for shoots. In particular, reviewing large volumes of model photos and getting brand approvals often leads to retakes, further extending timelines. Many have yet to fully leverage AI solutions.
Ux audit & usability testing
Found several UX issues: unclear functionality, inconsistent UI, and weak user engagement.
Confusing Feature
Lack of guidance made it difficult for users to understand what each feature did. Screen layouts didn’t clearly communicate what actions or next steps should be taken.
Inconsistent and Unprioritized UI
All buttons were styled as primary buttons regardless of their importance, making it hard to distinguish hierarchy. The overall UI lacked visual consistency.
Weak First Impression
The home screen didn’t explain what Fliption does. It presented a sequence of similar example images, which made the experience feel repetitive and uninspiring.
Mega Insights
Pre-Production Is Time-Consuming and Users Seek Efficiency at Scale
There Is Low Trust in AI-Generated Results
The First Impression Fails to Communicate Product Value
Users Need Clear Functional Guidance
Inconsistent UI Elements Disrupt User Expectations
Goals
Business Goals
Boost business inquiries by meeting the needs of production and creative teams
Design Goals
Build trust for first-time users through clarity and relevant visual examples
Create an intuitive and frictionless experience that drives engagement
Highlight features tailored to target user needs
Create a scalable, reusable UI system to support future growth
Problem statement
How might we reduce complexity in model content creation by providing an AI-powered solution that is trusted by first-time users?
Design Solution
User Persona
"I spend too much time on shoot preparation and follow-ups. It takes forever!"
Hi, I’m Oliver Ramos, a creative studio owner based in Queens, New York.
I work with various fashion and beauty brands to shoot model content for their campaigns.
I’m always looking for ways to streamline the pre-production process. I’m curious if AI could help reduce the time and effort it takes to get from planning to shoot-ready.
Virtual Try-On Test Page
"This tool lets me virtually dress models with AI? Interesting!"
Oliver was introduced to a new AI-powered tool by a co-founder and decided to try Fliption’s Virtual Try-On test page.
A fullscreen animation instantly caught his attention and clearly demonstrated how the feature works
Since he didn’t have any properly prepared images on hand, he used the provided sample images to test the feature.
Thanks to clearly designed icons and visual cues, the interface felt intuitive, and he could easily follow the flow without confusion.
Impressed by the results, he became interested in using the service for future client projects and left his contact information.
Home Screen
"Let’s see what else Fliption can do.
Oh, their features look promising."
After a positive first impression with Virtual Try-On, Oliver explored the rest of the Fliption website to learn more about its features.
The interactive feature preview helped him quickly understand what Fliption offers.
Scrolling further, the rich visual examples gave him a clear sense of how each feature works and how they might fit into his own production workflow.
Face Swap
"Wow, I can replace multiple model faces at once! This is exactly what I need."
Image
Oliver uploaded several model photos he could no longer use due to expired contracts.
The system accurately detected all faces, increasing his trust in the tool.
The layout clearly communicated that selecting one target face would apply it across all detected faces.
In addition to Fliption’s preset model faces, he discovered he could either generate new faces using the Face Generation option or upload other model faces to use as targets.
Video
When uploading a video clip with multiple models, Fliption successfully detected each face.
The interface made it intuitive to match each detected face individually and skip any faces he didn’t want to swap.
History
“It’s so easy to keep track of my past projects. Everything’s organized.”
After several successful runs with Fliption, Oliver had already created multiple projects.
The results were clearly grouped by feature, and each project listed the assets used, making it easy to review at a glance.
On each project’s detail page, a well-structured overview at the top helped him quickly recall what the project was about.
Design System
Enhancing UI Consistency with a Tailored Design System
Storybook
Built a custom design system based on TailwindCSS, referencing MaterialUI as a supplementary resource
Collaborated with a front-end developer to select frequently reused components and documented them in Storybook
Design Process
Virtual Try-On Test Page
High Drop-Off Rates in the First Two Pages Impacted User Engagement
Before iteration
Virtual Try-On Test Page 5-step Funnel
After iteration
Virtual Try-On Test Page 5-step Funnel
drop-off point 1 - Home Screen
10-second animation was too long
40% user drop-off on the home screen
Showcased larger images and played multiple short (3–4 second) animations
Reduced home screen drop-off by 10%
drop-off point 2 - Upload Image
Upload guidelines on the right side were often overlooked
32% drop-off on the upload page
Offered sample images so users could try the feature first
Displayed upload guidelines via a pre-upload pop-up
Decreased upload-page drop-off by 8%
Face Swap
Unclear Face Matching UI and Overly Complex Options Led to User Confusion
Image
Fliption 1.0
Multiple steps on one screen
(efficient but confusing for first-time users)Face matching process lacked clarity
Too many primary buttons
Face Options (Virtual Face, Upload Face) and Favorite mixed together in one tabs, making navigation confusing
Face Generate button often confused with Face Swap button
Fliption 2.0
Split the process into two steps for clearer navigation
Provided sample images for quick testing
Made face matching more intuitive
Organized button hierarchy
Reorganized filters to make them more visible
Included Face Generation in the Face Options tab for better clarity
Video
Fliption 1.0
Multiple steps on one screen
Hard to see which target faces were already selected
Fliption 2.0
Clearly showed that unselected faces remain unchanged
Helped users avoid confusion when one target face is matched to detected faces
Home
A Dull Home Screen Made It Difficult to Quickly Understand Key Features
Fliption 1.0
Monotonous use cases focused mostly on the model’s upper body
Unclear which features generated each result
Fliption 2.0
Added animations to introduce Fliption’s available features
Used an Explore section to show how each feature creates sample outputs
Switched to a sidebar navigation for future feature expansion.
History
Users Struggled to Track Generated Content and Processing Status
Fliption 1.0
No indication of remaining processing time
Required users to open each result’s details to see which content was used
Fliption 2.0
Provided estimated processing time
Gave a brief overview of the content used for each project
Summarized key features and sources at the top of every project page
Reflection & Growth
Key Learnings
Data-Driven Decisions Enable Rapid Iteration
Leveraging user engagement data helped quickly identify pain points.
Fast iterations and user testing were critical for refining the experience efficiently.
Reducing Complexity and Building User Trust in AI
Refining face-matching UI reduced ambiguity and increased user confidence.
Providing sample images lowered barriers to AI services and improved user trust.
Scalable UI Enables Long-Term Growth
Establishing a design system increased frontend development efficiency by 30%.
Referencing TailwindCSS significantly reduced time spent on typography and color selection.
Other Projects
