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
TEAM
Responsibilities
Tool used
Timeline
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
Before launching the new feature, we identified usability issues, inconsistencies, and unused functions
Fliption 1.0 featured Face Swap, Model Generate, and Image Edit functions powered by generative AI. Developed solely by a front-end engineer, the UX was fragmented and lacked consistency.
With the upcoming Virtual Try-On feature, which applies clothing to virtual models, our priority was to rapidly launch a test page to validate market demand and drive business interest.
Recognizing UX limitations, we planned a full redesign to enhance usability. The ultimate goal was to refine Virtual Try-On and deliver a more cohesive Fliption 2.0 with an improved user experience.
Target User
Focused on businesses producing or ideating content
Produce and sell product
creative direction
content creation
TARGET USER
Production companies
Marketing/AD agencies and creatives
Small business owners in online marketplaces
USEr Interviews
Identified Pre-Production as the most impactful area
During the pre-production stage, a significant amount of time is spent verifying shipment for 200+ products, scheduling the crew, and organizing the shoot. Many have yet to fully leverage AI solutions.
→ Fliption can reduce styling time and streamline the process.
Goals
Goal Setting Rooted in Business Value and User Insights
Business Goals
Boosting business inquiries by 30% & Gather Feedback
Design Goals
Simplify UX for First-Time AI Users
Design a streamlined experience to build trust and encourage initial adoption
Emphasize Mass Image Processing
Emphasize handling large volumes of images for pre-production
Create a Scalable UI Structure
Propose scalable layout and build a Design System
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
Virtual Try-On Test Page
Designing an Intuitive Virtual Try-On Experience
Designed animations to intuitively explain the Virtual Try-On feature
Provided sample images to allow users immediate hands-on experience in the test environment
Used icons and visual elements to clearly communicate functionalities
Face Swap
Clarifying the process of matching and swapping multiple faces
Image
Improved clarity that a selected target face automatically applies to all detected faces
Easier interaction through enhanced layout of additional face options (Virtual Face, Face Generation, Upload Face)
Enhanced the results page to clearly show the target face used for the generated output
Video
Clearly communicated that each detected face in a video must be individually matched to a target face to enable Face Swap
Enhanced the results page to clearly indicate original and target faces
Home Screen
Making the First Screen More Engaging
Introduced short animations to intuitively introduce each feature
Replaced generic use-case images with clear visuals demonstrating how each feature is used
History
Simplifying Navigation of Past Results
Enhanced the list view to clearly indicate the feature used to generate each result
Projects with multiple processed images were clearly distinguished in the list view
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
10-second animation was too long
40% user drop-off on the home screen
Upload guidelines on the right side were often overlooked
32% drop-off on the upload page
After iteration
Virtual Try-On Test Page 5-step Funnel
Showcased larger images and played multiple short (3–4 second) animations
Reduced home screen drop-off by 10%
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.