UX Case Study En cours · Prototype V3

DAFA : De la frustration à l'interface.

Documenter le processus UX complet d'une application de simulation pré-achat tech : de la découverte du problème à la conception du prototype haute-fidélité, en toute transparence sur ce qui est fait et ce qui reste à venir.

8 mois
Durée projet
50+
Écrans Figma
99/100
PageSpeed desktop
Solo
Rôle
Figma Design System HTML / CSS / JS Bootstrap 5 Google Analytics Prototypage HF
Le produit

Votre bouclier anti-marketing.

J'aurais pu lister des compétences. J'ai préféré construire quelque chose. DAFA traduit des spécifications techniques illisibles en décisions simples et vérifiées, en appliquant la même rigueur que sur un poste X-Ray.

Vérité Technique

Comprenez ce que vous achetez au-delà des promesses marketing.

Compatibilité 100%

Certification algorithmique : vos composants fonctionnent ensemble, garanti.

Le Juste Prix

DAFA révèle la valeur réelle des composants pour éviter la "taxe marketing".

Facture Réelle

Prix produit + accessoires manquants = coût total avant l'achat, pas après.

Le système de badges DAFA

Chaque produit reçoit un score de compatibilité de 1 à 8. Pas de pourcentage, pas de jargon : une couleur, un chiffre, une décision immédiate.

1–3 Critique : système bridé ou incompatible
4–6 Standard : fonctionne, pas au plein potentiel
7–8 Optimisé : performance maximale garantie
La puissance de DAFA en un coup d'oeil

Sans DAFA. Avec DAFA.

La même télé. Deux lectures totalement différentes.

Sans DAFA · Fiche produit réelle

Samsung Neo QLED 8K QN900D 65"

1 299 € · Fnac

8K Ultra HD 120Hz QLED HDMI 2.1 48Gbps eARC Dolby Vision IQ HDR10+ Neural Quantum Processor Object Tracking Sound+

Profitez d'une résolution 8K 4x supérieure au 4K, d'un processeur Quantum Neural pour un upscaling IA de vos contenus. Compatible HDMI 2.1 48Gbps pour 4K@120fps. Dolby Atmos, Bixby & Alexa intégrés...

Compatible avec mon setup PS5 + barre de son ?
Avec DAFA · Verdict instantané

Samsung Neo QLED 8K

Analysé avec votre setup · PS5 + barre de son

5

Fonctionne, mais pas au plein potentiel

Votre câble HDMI limite la TV à 4K@60fps.
Elle peut faire 4K@120fps avec le bon câble.

Câble HDMI 2.1 requis pour 4K@120fps
PS5 compatible · eARC OK avec votre barre de son

Facture réelle

TV Samsung1 299 €
+ Câble HDMI 2.1 manquant+ 35 €
Coût réel total1 334 €
Prototype interactif · Figma V3

Prenez le contrôle.

Explorez l'interface complète de DAFA. Onboarding, scanner de specs, système de badges, alertes de compatibilité.

Flux d'onboarding
Scanner de specs
Badges 1–8
Alertes compatibilité

Maintenant que vous avez vu le résultat. Voici comment j'y suis arrivé.

Phase 1 · Découverte

Le problème naît d'une impasse personnelle.

Tout démarre d'un setup multi-appareils : PC, console, projecteur, barre de son mais un seul port HDMI 2.1 disponible. Trois mois à disséquer des fiches techniques, des forums contradictoires, des spécifications délibérément opaques avant de trouver la solution.

La conclusion n'était pas technique : l'information existait. Elle était structurée pour décourager la vérification autonome et orienter vers l'achat impulsif.

"J'ai passé 3 mois à chercher la solution. Les gens n'ont pas ce temps. J'ai décidé de créer l'outil qui fait ce travail pour eux."

Le problème structurel identifié

Les fiches techniques sont rédigées par des équipes marketing, pas par des ingénieurs. Les termes ("HDMI 2.1", "Dolby Atmos", "HDR10+") sont utilisés comme arguments de vente sans que leur compatibilité croisée ne soit jamais expliquée. L'utilisateur est placé dans une asymétrie d'information délibérée.

Signaux observés validant le problème

Forums Reddit tech : fils récurrents sur des problèmes de compatibilité HDMI, bridage inexpliqué, demandes d'aide en masse post-achat.

Avis Amazon / Fnac 2–3 étoiles : pattern identique : "fonctionne mais pas comme annoncé", "incompatible avec mon setup", "bridé vs ce que j'avais".

Requêtes Google : volume élevé sur "câble HDMI 2.1 vraiment 4K120fps", "compatible PS5 projecteur" : le problème dépasse le cas personnel.

Phase 2 · Définition

Qui est vraiment touché ?

Deux profils utilisateurs définis à partir des patterns observés et représentatifs des situations d'achat problématiques rencontrées dans les forums et retours produits.

T

Thomas, 28 ans

Gamer semi-expert · Setup en évolution constante

Il connaît les termes techniques mais n'a pas le temps de tout vérifier. Il achète vite, découvre le problème au déballage, finit sur Reddit pour comprendre.

Points de douleur

Retours fréquents Bridage post-achat Perte de temps

Ce qu'il cherche

Vérification rapide Verdict sans jargon
S

Sophie, 42 ans

Parent non-expert · Achat pour la maison ou pour offrir

Elle ne maîtrise pas le vocabulaire technique. Elle se fie aux étiquettes et aux vendeurs. Elle repart avec un produit "qui ne marche pas" sans comprendre pourquoi.

Points de douleur

Specs incompréhensibles Conseil insuffisant Sentiment manipulé

Ce qu'elle cherche

Langage simple Confiance dans l'achat

Question de conception centrale

"Comment rendre une décision technique complexe aussi simple qu'un feu rouge ?"

Phase 3 · Idéation

Les décisions de conception et pourquoi.

Chaque choix structurant a une justification UX. Voici les trois décisions clés avec leur raisonnement.

Décision 1 · Lisibilité

Badges 1–8 plutôt qu'un score en pourcentage

1–3 Critique : non fonctionnel
4–6 Standard : fonctionne, pas optimal
7–8 Optimisé : performance maximale

Pourquoi ce choix

Un pourcentage (73%) n'a pas de signification intuitive. Un badge coloré + chiffre unique = décision immédiate, charge cognitive zéro. Principe du "Système 1" de Kahneman : réponse rapide sans effort d'analyse.

Décision 2 · Prévention

Simulateur d'écosystème avant le scanner produit seul

Mon setup actuel
J'ajoute : Écran 4K 144Hz
Câble HDMI actuel insuffisant

Pourquoi ce choix

Le vrai problème n'est pas le produit isolé, c'est la chaîne. Scanner un produit seul est réactif. Le simulateur d'écosystème est proactif, il réplique le raisonnement d'un technicien expert qui audite un setup complet.

Décision 3 · Transparence

Afficher le coût total d'optimisation, pas le prix produit seul

Écran annoncé349 €
+ Câble HDMI manquant+ 35 €
Coût réel384 €

Pourquoi ce choix

Le prix affiché est la source n°1 de déception post-achat. Révéler la facture complète en amont transforme DAFA en conseiller financier; c'est là que le produit sort du marché des comparateurs classiques.

Phase 4 · Architecture & Design

Structure de l'application et Design System.

Toute complexité technique doit être absorbée par l'interface, pas transférée à l'utilisateur.

Flux principal utilisateur

1
Onboarding : Ajout du setup existant (1–3 appareils)
2
Scanner : Scan ou recherche manuelle d'un produit cible
3
Analyse : Badge de compatibilité généré + alertes ciblées
4
Facture réelle : Coût total avec accessoires manquants inclus
5
Décision : Achat confirmé ou alternative proposée par l'IA

Design System (open-source, read-only)

Un Design System complet construit en parallèle du prototype pour garantir la cohérence sur 50+ écrans et accélérer les futures itérations.

Tokens de couleur : Palette sémantique (critique, standard, optimal, neutre)
Typographie : Hiérarchie à 4 niveaux, optimisée mobile-first
Composants : Badges, cards, alertes, boutons, scanner UI
Grille : 4 colonnes mobile / 12 colonnes desktop, Apple-style spacing
Phase 5 · Prototype haute-fidélité

Prototype V3 : état actuel.

Le prototype est fonctionnel, navigable, et couvre les flux principaux. Il représente l'état du projet à 8 mois de développement.

Flux d'onboarding complet : ajout de setup, navigation initiale
Écran de scanning : interface scanner + résultat avec badge
Détail produit : lecture de specs, système de badges 1–8
Simulateur d'écosystème (partiel) : ajout virtuel + alerte
Récapitulatif coût total : en cours de finalisation
Module IA personnalisé : planifié, non prototypé

Prototype interactif · Figma V3

50+
écrans Figma
V3
version actuelle

Prototype navigable disponible en haut de page.

Aperçu du prototype V3

4 écrans clés.

Les flux principaux tels qu'ils apparaissent dans Figma : coffre-fort, analyse produit, profil utilisateur, marketplace.

Écran Mon Coffre-fort — liste des équipements avec statut garantie et alertes d'expiration

Mon Coffre-fort

Garanties, factures, alertes d'expiration par équipement

Écran Check-up produit — badges 1 à 8 par composant, diagnostic de compatibilité ciblé

Check-up produit

Badges 1–8 par composant, diagnostic de compatibilité ciblé

Écran Profil utilisateur — système de grades, économies réalisées, progression

Profil & Grades

Système de progression, économies réalisées, rang utilisateur

Écran Marketplace — accessoires certifiés compatibles avec prix négociés

Marketplace intégrée

Accessoires certifiés compatibles, prix négociés

Phase 6 · Tests utilisateurs · À venir

Ce qui vient ensuite.

Le prototype est en phase de recrutement de testeurs. L'objectif : valider ou invalider les hypothèses de conception avec de vraies données comportementales.

Recrutement de testeurs

5–8 participants correspondant aux profils Thomas et Sophie. Méthode : test modéré sur prototype Figma + protocole think-aloud.

Hypothèses à tester

Le badge 1–8 est-il compris en moins de 3 secondes ? L'alerte de compatibilité est-elle perçue avant la confirmation d'achat ?

Itérations prévues

Les résultats alimenteront la V4 du prototype. Points à risque identifiés : lisibilité du scanner sur fond sombre, hiérarchie de l'écran "coût total".

Vous voulez tester le prototype ?

Votre retour a une valeur directe sur le produit final.

Devenir testeur

Si on veut aller loin,
on se bouge.

Identifier un problème. Construire. Livrer.
Sans brief, sans budget. C'est ma façon de travailler.

Proposer un stage Mon CV