Veesual · 2021 - 2022 · Freelance
Designer l'essayage virtuel
Conception du parcours utilisateur du Virtual Try-On, en binome avec le CTO. Transformer les contraintes de l'IA generative en choix de design.
Role
Product Designer freelance
Perimetre
UX, IA generative
Plateformes
Widget web embarque
Outils
Figma, prototypage
Le defi
L'IA generative de Veesual genere des images d'essayage en 2 a 4 secondes. L'utilisateur ne doit jamais percevoir cette attente. Le widget doit s'integrer sur n'importe quel site e-commerce. Et 90% des acheteurs decouvrent le Virtual Try-On pour la premiere fois.
L'integration du widget
Le Virtual Try-On s'integre directement dans la fiche produit, sans redirection. Un panel lateral preserve la navigation du site e-commerce tout en offrant l'experience d'essayage.
Le widget Mix & Match tel qu'il tourne en production : navigation par categorie, changement de piece directement sur le mannequin, et panier detaille par article.
Le flow utilisateur
5 etapes, de la fiche produit a l'achat. Chaque etape validee avec le CTO pour la faisabilite technique.
Fiche
produit
Choix
modele
Generation
IA
Resultat
+ looks
Ajout
panier
La meme logique sur mobile : comparer deux mannequins cote a cote avant de choisir, sans perdre la selection d'articles en cours.
Masquer la latence
Le CTO m'a donne acces aux donnees du modele avant la generation, et a deux signaux de progression (50% et 90%). J'ai concu trois etats visuels qui s'enchainent pour que l'attente paraisse naturelle.
Skeleton
Silhouette aux bonnes proportions
Progression
Barre calee sur signaux reels
Resultat
CTA immediat
Concevoir pour l'IA generative
Designer pour un modele generatif ne ressemble pas a designer pour une API classique : le resultat n'est jamais garanti a l'identique, et l'interface doit absorber cette incertitude sans jamais paraitre cassee.
Gerer l'incertitude du modele
Certaines generations ressortent en dessous du seuil de qualite attendu. J'ai defini avec le CTO les etats de repli — nouvelle tentative automatique, message explicite — pour qu'un rendu imparfait ne bloque jamais le parcours.
Accepter la variabilite des rendus
Deux generations du meme vetement sur le meme mannequin ne sont jamais parfaitement identiques. Plutot que de viser un pixel-perfect impossible, j'ai fixe les criteres d'un rendu "acceptable" avec l'equipe produit.
Traduire les contraintes du modele en regles d'interface
Poses supportees, resolution, temps d'inference variable selon la charge : autant de contraintes techniques du modele que j'ai transformees en regles d'affichage simples pour l'utilisateur final.
Dialoguer avec l'equipe ML au quotidien
Acces direct aux signaux de progression du modele avant meme la fin de la generation — la base des trois etats visuels presentes plus haut. Sans ce dialogue continu avec l'equipe technique, cette solution n'aurait pas ete possible.
Choix de design
Chaque choix fait en binome avec le CTO. Une contrainte technique devenait une opportunite UX.
Skeleton plutot que spinner
Le CTO pouvait exposer les dimensions du modele avant la generation. J'en ai fait un placeholder a la bonne taille. Resultat : +40% de perception de vitesse en A/B test.
Reveler la complexite au bon moment
La composition de looks n'apparait qu'apres un premier essayage reussi. Le systeme pre-charge le catalogue en arriere-plan.
Panel lateral plutot que modale
Le SDK fonctionne en iframe isolee. Le widget s'ouvre a cote du contenu, la navigation reste intacte.
Trois variables pour s'adapter a tout
Trois reglages (couleur, arrondi, typo) suffisent a integrer le widget sur n'importe quel site en 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%
Retours produit
+15%
Conversion
x3
Engagement
"Nous avons travaille avec Romain sur une mission UX UI pour une experience e-commerce full page. Romain s'est rendu disponible pour rendre un travail de qualite."
Maxime Patte
CEO · Veesual