Veesual · 2021 - 2022 · Freelance
Designing the virtual try-on
I designed the Virtual Try-On user journey in tandem with the CTO. Together, we turned generative AI constraints into design decisions.
Role
Freelance Product Designer
Scope
UX, generative AI
Platforms
Embedded web widget
Tools
Figma, prototyping
The challenge
Veesual's generative AI produces try-on images in 2 to 4 seconds. The user must never perceive this wait. The widget must integrate on any e-commerce site. And 90% of shoppers discover Virtual Try-On for the first time.
Integrating the widget
Virtual Try-On integrates directly into the product page, with no redirect. A side panel preserves navigation on the e-commerce site while offering the try-on experience.
The Mix & Match widget as it runs in production: category navigation, changing an item directly on the model, and a detailed cart per item.
The user flow
5 steps, from the product page to purchase. Each step validated with the CTO for technical feasibility.
Product
page
Model
selection
AI
generation
Result
+ looks
Add to
cart
The same logic on mobile: compare two models side by side before choosing, without losing the current item selection.
Hiding the latency
The CTO gave me access to the model's data before generation, and to two progress signals (50% and 90%). I designed three visual states that flow into one another so the wait feels natural.
Skeleton
Silhouette with correct proportions
Progress
Bar synced to real signals
Result
Immediate CTA
Designing for generative AI
Designing for a generative model is nothing like designing for a classic API. The output is never twice the same, and the interface has to absorb that without looking broken.
Managing model uncertainty
Some generations come out below the expected quality. With the CTO, we defined the fallback states, between an automatic retry and an explicit message, so a bad render never blocks the journey.
Accepting render variability
Two generations of the same garment on the same model are never perfectly identical. Rather than aim for an impossible pixel-perfect result, we agreed with the product team on what an "acceptable" render looked like.
Translating model constraints into interface rules
Supported poses, resolution, inference time that shifts with load. We talked about them with the ML team every day, and I turned them into simple display rules for the user.
Talking with the ML team every day
The CTO gave me access to the model's progress signals before generation finished. The three states shown above came out of that, and we wouldn't have gotten there without talking every day.
Design choices
I made each of these choices with the CTO, often starting from a technical constraint.
Skeleton instead of a spinner
The CTO could expose the model's dimensions before generation. I turned that into a correctly sized placeholder. In A/B testing, perceived speed went up 40%.
Revealing complexity at the right moment
Look composition only appears after a first successful try-on. The system preloads the catalog in the background.
Side panel instead of a modal
The SDK runs in an isolated iframe. The widget opens alongside the content, and navigation stays intact.
Three variables to fit anywhere
Three settings (color, roundness, typography) are enough to integrate the widget on any site in 5 minutes.
Jessica
5'5" · wears M
ROBIN
1m75 · UK 12 / FR T3
IRIS
1m70 · UK 12 / FR T3
VALENTINA
1m65 · UK 10 / FR T2
Impact
-30%
Product returns
+15%
Conversion
x3
Engagement
"We worked with Romain on a UX/UI mission for a full-page e-commerce experience. Romain made himself available to deliver quality work."
Maxime Patte
CEO · Veesual