Configurateurs Easy
J'ai condensé l'ADN du configurateur 3D principal en trois expériences ultra ciblées. Objectif : permettre aux utilisateurs de créer un meuble standard en moins d'une minute, tout en gardant la personnalisation au maximum.
Configurateurs
3 Projets
Easy
Meuble en
Temps réel
viewer 3D
UX
Ultra-Guidée
Intéractive
Contexte
Le configurateur historique est un monstre de précision mais pas toujours adapté aux demandes récurrentes.
J'ai commencé par expérimenter sur le caisson simple, puis sur des meubles plus complexes comme escaliers et vidéo-projecteurs.
J'ai pour chaque configurateur visé une expérience ultra guidée : étape par étape, canvas minimaliste, champs intelligents et viewer qui change en temps réel.
- Scope 3 configurateurs
- Temps cible < 60s
- Stack Svelte + TS + package interne
Interfaces extrêmement guidées : on avance pas à pas dans les étapes : dimensions, matériaux, options, etc. tout en gardant le viewer 3D à jour.
Résultat : l'utilisateur ne peut avancer qu'après avoir validé chaque étape et a fait son meuble en moins de 1 minute. Parfait pour les clients non techniques ou sur mobile.
Cette façon de faire a été pensée avec le Designer de l'équipe, qui a été impliqué dans le processus de conception.
focus sur les configurateurs
- Canvas interactif pour tracer les dimensions à la main
- Interface étape par étape réutilisée sur les autres configurateurs
- Preview 3D rafraîchie à chaque étape
- Algorithme confort qui calcule marches & hauteurs idéales : pas de prises de tête côté client
- Canvas très précis pour différents paramètres (nez des marches, revêtement, etc)
- Propositions de palettes de matériaux
- Assemblage complexe : espace pour écran à l'arrière
- Tablette coulissante pour vidéo-projecteur
- Emplacements pour enceintes configurables
- Intégration dans un workflow Prestashop via token unique de client
innovations clés
Dessin vectoriel dynamique pour régler les dimensions et autres paramètres sans formulaire indigeste.
Visualisation du meuble texturé avec mise à jour temps réel.
Pensée étape par étape, on prend la main du client jusqu'à la page de paiement :)
Impact & apprentissages
- Simplifier l'expérience utilisateur.
- Construire des algorithmes métiers (indice confort, auto-dimensionnement des colonnes).
- Designer des interfaces canvas + 3D cohérentes.
- Livrer des outils modulaires faciles à décliner.
Technos utilisées
Framework: Svelte + TypeScript
Visualisation: Canvas + Viewer 3D
Compétences: UX, Algorithmie & modèles de données des meubles
L'expérience utilisateur
1. Vue Canvas
Visualisation 2D technique de l'escalier. Le dessin utilise les mêmes fonctions que le configurateur réel pour garantir la précision.
2. Dimensions
Ajustement de la largeur et hauteur. Le système recalcule automatiquement le nombre de marches selon la loi de Blondel (2H + G = 60-64cm).
3. Hauteur de base
Ajout d'une hauteur de socle pour surélever la première marche. Utile pour s'adapter à des contraintes architecturales spécifiques.
4. Marches asymétriques
Personnalisation des largeurs de marche haute et basse. Permet de créer des escaliers avec des marches de départ et d'arrivée plus larges.
Images à venir
Les captures de l'interface seront ajoutées dès que possible pour montrer le flow complet.