Portfolio de Noah Rognon

Developpeur passionne qui transforme vos idees en experiences elegantes.

Développement Web / UX Design

TaVue

Le configurateur de lunettes sur mesure, pensé pour l’élégance et l’expérience utilisateur

Visuel principal du projet TaVue

Contexte & Problématique

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

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.

Aperçu indisponible

Étape 02

Conception UX/UI : wireframes, parcours utilisateur, intégration de nudges marketing et réflexion sur la hiérarchie des choix.

Aperçu indisponible

Étape 03

Création du SVG modulaire : découpage du visuel en zones modifiables (monture, branches, verres, gravure).

Aperçu indisponible

Étape 04

Développement du configurateur : gestion des interactions en JavaScript, mise à jour dynamique du SVG et synchronisation avec la base de données.

Aperçu indisponible

Étape 05

Connexion à la base de données : enregistrement des configurations, qu’elles soient sauvegardées ou commandées.

Aperçu indisponible

Résultat final

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.

Desktop
Capture desktop indisponible
Mobile
Capture mobile indisponible

Stack technologique

Stack technologique

Astro

Framework

Tailwind CSS

Style

JavaScript

Langage

PocketBase

Backend

Figma

Design

Netlify

Déploiement

Impact & Bilan

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.

Envie de construire votre prochain projet ?

Discutons de vos besoins, explorons vos idées et donnons vie à une expérience incomparable.

Envoyez-moi un message

Informations de contact

Reseaux sociaux

Suivez-moi pour decouvrir mes derniers projets et creations !