Étape 01
Analyse du besoin et définition du concept : identification des attentes utilisateurs, étude de l’existant et définition des objectifs du configurateur.
Portfolio de Noah Rognon
Developpeur passionne qui transforme vos idees en experiences elegantes.
Le configurateur de lunettes sur mesure, pensé pour l’élégance et l’expérience utilisateur
Contexte & Problématique
Dans un contexte où la personnalisation des produits devient un critère central dans l’acte d’achat en ligne, le secteur de l’optique reste encore largement dominé par des expériences standardisées et peu immersives. Les utilisateurs ont souvent du mal à se projeter dans un produit pourtant très personnel, comme une paire de lunettes, et les interfaces proposées manquent de clarté, de fluidité et de pédagogie.
L’objectif de ce projet était donc de concevoir une plateforme permettant à l’utilisateur de personnaliser entièrement sa paire de lunettes en ligne, tout en conservant une expérience simple, élégante et rassurante. Le défi principal consistait à allier une interface esthétique à une logique technique solide, capable de gérer des configurations complexes et leur enregistrement en base de données.
85
des utilisateurs déclarent vouloir visualiser précisément leur produit avant achat
70
des acheteurs abandonnent lorsqu’un configurateur est trop complexe
Solution proposée
TaVue est une plateforme de personnalisation de lunettes qui repose sur un configurateur interactif basé sur un SVG dynamique. Chaque choix de l’utilisateur (forme, couleur, matériaux, gravure) modifie visuellement le produit en temps réel. Le projet intègre également une logique de sauvegarde des configurations, qu’elles soient finalisées ou non, afin de suivre le parcours utilisateur et d’améliorer l’expérience globale.
Processus de création
Le projet TaVue a été conçu selon une approche méthodique, allant de la réflexion UX jusqu’à l’implémentation technique du configurateur. Chaque étape a été pensée pour garantir une expérience fluide, cohérente et réaliste du point de vue utilisateur comme technique.
Étape 01
Analyse du besoin et définition du concept : identification des attentes utilisateurs, étude de l’existant et définition des objectifs du configurateur.
Étape 02
Conception UX/UI : wireframes, parcours utilisateur, intégration de nudges marketing et réflexion sur la hiérarchie des choix.
Étape 03
Création du SVG modulaire : découpage du visuel en zones modifiables (monture, branches, verres, gravure).
Étape 04
Développement du configurateur : gestion des interactions en JavaScript, mise à jour dynamique du SVG et synchronisation avec la base de données.
Étape 05
Connexion à la base de données : enregistrement des configurations, qu’elles soient sauvegardées ou commandées.
Résultat final
Une expérience prête à être déployée, pensée pour livrer rapidement de la valeur tout en conservant performance et cohérence de marque.
Stack technologique
Astro
Framework
Tailwind CSS
Style
JavaScript
Langage
PocketBase
Backend
Figma
Design
Netlify
Déploiement
Impact & Bilan
Ce que j’ai appris
Concevoir un configurateur interactif basé sur un SVG dynamique
Structurer une base de données orientée produit et personnalisation
Allier UX, marketing et développement dans un même projet
Anticiper les contraintes techniques dès la phase de conception
Ce que je referais autrement
Intégrer plus tôt des tests utilisateurs
Prévoir une version mobile dès les premières maquettes
Optimiser encore davantage la gestion des performances SVG
“Ce projet m’a permis de repousser mes limites en développement web et de mieux comprendre les enjeux réels d’un produit interactif orienté utilisateur.”
1
Semaine de dévelopement
6
Technologies maîtrisées
40
Heures de développement
92%
De performance
// Chaque projet est une nouvelle opportunité d'innover.
Discutons de vos besoins, explorons vos idées et donnons vie à une expérience incomparable.