Veesual · 2021 - 2022 · Freelance
Designer l'essayage virtuel
J'ai conçu le parcours utilisateur du Virtual Try-On en binôme avec le CTO. Ensemble, on a traduit les contraintes de l'IA générative en choix de design.
Rôle
Product Designer freelance
Périmètre
UX, IA générative
Plateformes
Widget web embarqué
Outils
Figma, prototypage
Le défi
L'IA générative de Veesual génère des images d'essayage en 2 à 4 secondes. L'utilisateur ne doit jamais percevoir cette attente. Le widget doit s'intégrer sur n'importe quel site e-commerce. Et 90% des acheteurs découvrent le Virtual Try-On pour la première fois.
L'intégration du widget
Le Virtual Try-On s'intègre directement dans la fiche produit, sans redirection. Un panel latéral préserve la navigation du site e-commerce tout en offrant l'expérience d'essayage.
Le widget Mix & Match tel qu'il tourne en production : navigation par catégorie, changement de pièce directement sur le mannequin, et panier détaillé par article.
Le flow utilisateur
5 étapes, de la fiche produit à l'achat. Chaque étape validée avec le CTO pour la faisabilité technique.
Fiche
produit
Choix
modèle
Génération
IA
Résultat
+ looks
Ajout
panier
La même logique sur mobile : comparer deux mannequins côte à côte avant de choisir, sans perdre la sélection d'articles en cours.
Masquer la latence
Le CTO m'a donné accès aux données du modèle avant la génération, et à deux signaux de progression (50% et 90%). J'ai conçu trois états visuels qui s'enchaînent pour que l'attente paraisse naturelle.
Skeleton
Silhouette aux bonnes proportions
Progression
Barre calée sur signaux réels
Résultat
CTA immédiat
Concevoir pour l'IA générative
Designer pour un modèle génératif n'a rien à voir avec designer pour une API classique. Le résultat n'est jamais deux fois le même, et l'interface doit absorber cette incertitude sans avoir l'air cassée.
Gérer l'incertitude du modèle
Certaines générations sortent en dessous du niveau attendu. Avec le CTO, on a défini les états de repli, entre nouvelle tentative automatique et message explicite, pour qu'un rendu raté ne bloque jamais le parcours.
Accepter la variabilité des rendus
Deux générations du même vêtement sur le même mannequin ne sont jamais parfaitement identiques. Plutôt que de viser un pixel-perfect impossible, on a fixé avec l'équipe produit les critères d'un rendu "acceptable".
Traduire les contraintes du modèle en règles d'interface
Poses supportées, résolution, temps d'inférence qui varie selon la charge. On en parlait chaque jour avec l'équipe ML, et je les traduisais en règles d'affichage simples côté utilisateur.
Dialoguer avec l'équipe ML au quotidien
Le CTO m'a donné accès aux signaux de progression du modèle avant la fin de la génération. Les trois états montrés plus haut en découlent, et on n'y serait pas arrivés sans ces échanges quotidiens.
Choix de design
Chaque choix s'est fait en binôme avec le CTO, souvent en partant d'une contrainte technique.
Skeleton plutôt que spinner
Le CTO pouvait exposer les dimensions du modèle avant la génération. J'en ai fait un placeholder à la bonne taille. En A/B test, la vitesse perçue a progressé de 40%.
Révéler la complexité au bon moment
La composition de looks n'apparaît qu'après un premier essayage réussi. Le système pré-charge le catalogue en arrière-plan.
Panel latéral plutôt que modale
Le SDK fonctionne en iframe isolée. Le widget s'ouvre à côté du contenu, la navigation reste intacte.
Trois variables pour s'adapter à tout
Trois réglages (couleur, arrondi, typo) suffisent à intégrer 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 travaillé avec Romain sur une mission UX UI pour une expérience e-commerce full page. Romain s'est rendu disponible pour rendre un travail de qualité."
Maxime Patte
CEO · Veesual