Le problème
Acheter une bague en ligne, c'est deviner un tour de doigt au millimètre et imaginer un bijou sur sa main à partir d'une photo sur fond blanc. Les deux doutes font renoncer, ou renvoyer.
WeeFizz Joa traite les deux dans un seul widget : la taille, mesurée à l'écran en quelques gestes, puis l'essayage de la bague sur la photo de sa propre main.
Mon rôle
Conception du parcours et de l'interface, direction artistique de l'offre et de sa landing page, développement front-end et intégration sur la fiche produit d'une boutique Shopify. Un travail en trois temps : sa taille, sa photo, au panier.
Décisions de design structurantes
Mesurer sans outil
Le widget guide la mesure du tour de doigt avec un fil, puis affiche la taille recommandée avec la taille en dessous et au-dessus, et la conversion en millimètres, en tailles US et UK. Le résultat est arrondi au-dessus pour le confort, et le dit.
L'essayage sur sa main
La cliente prend sa main en photo, le moteur pose la bague à la bonne échelle et au bon doigt. Le rendu est montré à côté de la photo d'origine pour que l'on voie ce qui a été fait. Le texte explique que la photo est traitée puis supprimée.
Une interface de joaillerie
Typographie à empattements fins, tons crème et or rose, animations lentes : l'interface emprunte les codes de la joaillerie plutôt que ceux du SaaS. Le widget doit avoir l'air d'appartenir à la boutique, pas à un outil tiers.
Le mobile d'abord
L'essayage se fait avec le téléphone à la main. Le hero de la landing page montre le widget réel sur mobile, en situation, avec les trois étapes visibles. Le parcours est testé sur un vrai appareil à chaque livraison.
Ce que j'en retiens
- Deux doutes, un seul parcours : la taille et l'apparence se résolvent ensemble.
- L'IA d'essayage n'a de valeur que si l'interface rassure sur ce qu'elle fait de la photo.
- Dans la joaillerie, la lenteur est une qualité : l'interface doit prendre son temps.
Voir weefizz.com/widgets/joa. Expertises mobilisées : UI et product design, prompt engineering et IA, front-end.
