Fliption is a project that streamlines the AI-driven model content creation process, making it more intuitive and significantly improving user experience.

Fliption is a project that streamlines the AI-driven model content creation process, making it more intuitive and significantly improving user experience.

Fliption is a project that streamlines the AI-driven model content creation process, making it more intuitive and significantly improving user experience.

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

E-commerce / Beauty Brands

E-commerce / Beauty Brands

E-commerce / Beauty Brands

Produce and sell product

Outsource

Outsource

marketing/
ad agencies

marketing/
ad agencies

marketing/
ad agencies

creative direction

Production Studios

Production Studios

Production Studios

content creation

TARGET USER

  1. Production companies

  2. Marketing/AD agencies and creatives

  3. 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.

  1. 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.

  1. 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.

  1. 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
  1. Pre-Production Is Time-Consuming and Users Seek Efficiency at Scale

  1. There Is Low Trust in AI-Generated Results

  1. The First Impression Fails to Communicate Product Value

  1. Users Need Clear Functional Guidance

  1. Inconsistent UI Elements Disrupt User Expectations

Goals

Business Goals

Boost business inquiries by meeting the needs of production and creative teams

Design Goals

  1. Build trust for first-time users through clarity and relevant visual examples

  1. Create an intuitive and frictionless experience that drives engagement

  1. Highlight features tailored to target user needs

  1. 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

2024 / Design Lead / UXUI, Branding / Productivity

2022

Minimail

An email summary app that leverages generative AI to transform how you interact with your inbox

2024 / Design Lead / UXUI, Branding / Productivity

2022

Minimail

An email summary app that leverages generative AI to transform how you interact with your inbox

2024 / Design Lead / UXUI, Branding / Productivity

2022

Minimail

An email summary app that leverages generative AI to transform how you interact with your inbox

2024 / Design Lead / UXUI, Branding / Productivity

2022

Minimail

An email summary app that leverages generative AI to transform how you interact with your inbox

2022 / Product Design LEad / UXUI / Education

2022

Availy

Optimizing fragmented user flows into a seamless platform, creating a more engaging and motivating learning experience

2022 / Product Design LEad / UXUI / Education

2022

Availy

Optimizing fragmented user flows into a seamless platform, creating a more engaging and motivating learning experience

2022 / Product Design LEad / UXUI / Education

2022

Availy

Optimizing fragmented user flows into a seamless platform, creating a more engaging and motivating learning experience

2022 / Product Design LEad / UXUI / Education

2022

Availy

Optimizing fragmented user flows into a seamless platform, creating a more engaging and motivating learning experience

2023 / UXUI, Branding / Desktop / Education

2022

Tutor Oriel

Redesigning a tutoring platform with streamlined onboarding, a refined brand identity, and an intuitive tutor-matching experience for students

2023 / UXUI, Branding / Desktop / Education

2022

Tutor Oriel

Redesigning a tutoring platform with streamlined onboarding, a refined brand identity, and an intuitive tutor-matching experience for students

2023 / UXUI, Branding / Desktop / Education

2022

Tutor Oriel

Redesigning a tutoring platform with streamlined onboarding, a refined brand identity, and an intuitive tutor-matching experience for students

2023 / UXUI, Branding / Desktop / Education

2022

Tutor Oriel

Redesigning a tutoring platform with streamlined onboarding, a refined brand identity, and an intuitive tutor-matching experience for students

2024 / HTML, CSS, JS / Web Development

2022

Text to Interface

Texts and curated materials were translated into interactive web interfaces, developed using HTML, CSS, and JavaScript

2024 / HTML, CSS, JS / Web Development

2022

Text to Interface

Texts and curated materials were translated into interactive web interfaces, developed using HTML, CSS, and JavaScript

2024 / HTML, CSS, JS / Web Development

2022

Text to Interface

Texts and curated materials were translated into interactive web interfaces, developed using HTML, CSS, and JavaScript

2024 / HTML, CSS, JS / Web Development

2022

Text to Interface

Texts and curated materials were translated into interactive web interfaces, developed using HTML, CSS, and JavaScript