Decode

Un décodeur IA pour les contrats de paiement différé britanniques, qui montre ce que la page de paiement ne dit jamais à voix haute — conçu de bout en bout, de la recherche à 115 écrans hi-fi, et développé par moi-même sous forme de PWA en production

Rôle
Produit · UX/UI · Design system · Recherche · Front-end
Disciplines
Product DesignUX/UI DesignDesign systemRecherche UXFrontend
En bref
  • Problème — au Royaume-Uni, un utilisateur actif du paiement différé fait 2,6 achats par mois et emprunte 168 £ au total pour ces achats, et la page de paiement ne prononce jamais le mot « crédit »
  • Insight — ma propre prémisse s’est effondrée : 89 % des utilisateurs disent qu’il est facile de suivre leurs échéances. Le besoin n’est pas « suivre », c’est « ne pas se faire surprendre par un prélèvement »
  • Solution — un seul chiffre de coût réel, calculé par le code et non par l’IA, les pièges, un oui/non sur le dossier de crédit, chaque chiffre relié d’un toucher à sa ligne source — puis Radar surveille les prélèvements. J’ai porté la recherche, le produit, l’UX, le design system et le développement
  • Résultat — en production, avant lancement : 280 commits, 677 tests backend, 86 constats d’audit corrigés en une journée ; un test modéré avec cinq personnes est la prochaine étape

Un scanner pour les papiers que vous avez déjà signés

Decode lit un contrat de paiement différé britannique, une facture ou une lettre qui fait peur, et rend trois choses : un chiffre pour ce que cela coûte vraiment, les pièges écrits en petits caractères, et une ligne à toucher pour voir exactement d’où vient ce chiffre. L’iPhone d’abord, le Royaume-Uni d’abord, et aucune connexion bancaire : le document est la seule entrée.

La métaphore dicte l’interface. Un contrat est lisible par une machine pour tout le monde, sauf pour la personne qui le signe ; Decode se place donc du côté de la machine et rend sa lecture au signataire. Le produit parle en monospace, cite la ligne source et montre ses calculs : un pipeline de traitement visible au lieu d’un spinner, et « Calculated, not AI » sur tout ce qu’une formule a produit.

Le produit en une phrase, dans sa propre voix

La métaphore : la machine lit à votre place

Les calculs, montrés : des étapes au lieu d’un spinner

Le paiement différé : de petits montants, souvent, sans bruit

Au Royaume-Uni, l’utilisateur actif moyen du paiement différé fait 2,6 achats par mois et emprunte 168 £ au total pour ces achats, d’après les données de transactions que la FCA a obtenues des trois plus grands acteurs. Citizens Advice a constaté que 89 % des sites marchands relèguent la nature de crédit de l’offre aux petits caractères, et qu’un acheteur sur dix passé par le paiement différé a déjà été relancé par une société de recouvrement. La FCA commence à réguler ce marché le 15 juillet 2026.

Le problème n’est pas le calcul. C’est que la page de paiement ne prononce jamais le mot « crédit », et qu’un paiement manqué peut rester six ans dans un dossier de crédit.

Le problème, pièces à l’appui : chaque chiffre porte sa source sur la carte

Mes propres données ont démenti ma prémisse

La première hypothèse disait que les gens perdent le fil de leurs échéances. L’enquête de la FCA elle-même dit le contraire à l’échelle du segment : 89 % des utilisateurs du paiement différé trouvent facile de suivre leurs échéances, 86 % chez les 18–24 ans, et 67 % paient par prélèvement automatique. Un produit présenté comme « on vous aide à suivre » contredirait son utilisateur dès le premier écran.

J’ai gardé les deux chiffres sur la même page au lieu d’écarter celui qui dérangeait, et je suis allée chercher où la douleur se trouve vraiment : chez les gros utilisateurs. Parmi les personnes qui doivent 500 £ ou plus, « facile » tombe à 77–78 %, et la FCA décrit elle-même le risque de perdre le fil d’un prêteur à l’autre, avant de renoncer à imposer une vue consolidée. Le besoin est donc passé de « rappelle-moi la date » à « qu’aucun prélèvement ne me prenne de court » : ce qui quitte le compte, quel jour, depuis quelle carte, chez des prestataires qui ne se voient jamais entre eux. Le décodage est devenu la porte d’entrée ; le portefeuille de contrats et Radar sont devenus le produit.

La même règle s’est appliquée à mes propres textes : en relisant le paragraphe de la FCA, j’ai découvert que j’avais présenté les 168 £ comme un montant « dû à un instant donné ». C’est un montant emprunté par mois, et la landing a été corrigée le jour même.

Des preuves difficiles à truquer

64 rapports de recherche et 19 teardowns de produits analogues, puis une remise à plat de la stratégie le 31 août, menée par douze agents de recherche en parallèle sur des sources primaires. Quatre segments ont été notés sur sept critères pondérés, et les « emprunteurs par accident », les utilisateurs du paiement différé de 18 à 25 ans, l’ont emporté avec 4,25. Quinze jobs, fonctionnels, émotionnels, sociaux et adjacents, sont chacun reliés au parcours qui y répond ; douze portent une fonctionnalité et une ou deux métriques, sous une North Star : le nombre de documents menés jusqu’à « décision prise ».

Les preuves viennent de sources difficiles à truquer : une trentaine d’avis une étoile, cités mot pour mot, chez cinq concurrents, codés par thème et par gravité pour que chaque échec d’un concurrent devienne une de mes exigences, et un pre-mortem qui a rédigé six exigences comme si le produit avait déjà échoué. Le guide d’entretien, au format Mom Test et JTBD switch pour six à huit personnes, est prêt pour la prochaine étape.

Le board Segment & JTBD : chaque carte de job nomme le parcours qui y répond

Six phases, un revirement

Quatre onglets, une action centrale

Home, Radar, Scan, Vault, Settings. Scan n’est pas une destination : il ouvre la feuille de capture par-dessus l’onglet où l’on se trouve. Chaque écran a une entrée et une sortie, et chaque état vide propose une action Scan.

Chaque écran a une entrée et une sortie ; aucun écran orphelin

La boucle principale : capture, vérification des chiffres, résultat, enregistrement et surveillance, Radar. C’est de la deuxième étape que je suis la plus fière : un écran qui admet qu’une photo peut être mal lue. Chaque valeur extraite s’affiche à côté de la ligne dont elle provient, modifiable, avant qu’un seul calcul ne tourne. Sur le résultat, un seul chiffre passe en premier, le coût réel, puis la réponse sur le dossier de crédit, puis les pièges ; les clauses sans risque se replient sous « 6 terms look standard ».

Capturer, puis vérifier les chiffres avant tout calcul

Un seul chiffre d’abord ; un toucher pour enregistrer et surveiller

Radar : ce qui quitte le compte, quand, depuis quelle carte, tous prestataires confondus

La confiance est une boucle de navigation, pas une promesse dans le texte : touchez n’importe quel chiffre et vous arrivez sur la ligne exacte de votre document, surlignée, avec « Report a mismatch » juste en dessous. Et il y avait une ligne que je ne pouvais pas franchir. Au Royaume-Uni, dire à quelqu’un quelle dette rembourser en premier relève du conseil en dettes, une activité réglementée. Le périmètre est donc tracé à l’intérieur du produit : Ask explique ce que dit votre document, et les questions de détresse renvoient vers StepChange et MoneyHelper, avec « the choice is yours » sur la carte.

La contrainte plutôt que la discipline

Les wireframes et le hi-fi forment un seul fichier en deux modes ; recolorer revient à changer de mode, pas à repeindre 115 écrans. Espacements, rayons, typographie et couleurs sont liés à des variables sur les masters : un audit du 7 septembre a compté 19 740 liaisons et 0 non résolue, si bien qu’une valeur hors échelle n’a aucun moyen d’apparaître.

Le parcours principal en mode Wireframe. Les mêmes écrans, passés en mode bleu, sont le hi-fi

Le noir et blanc est venu en premier. Sans palette pendant la phase de wireframes, chaque statut, de la gravité d’un piège à la réponse sur le dossier de crédit en passant par la fiabilité de l’extraction, devait se lire par le texte, l’icône et la graisse ; la couleur est arrivée plus tard et ne peut qu’amplifier. Une seule police porte tout : Geist Mono, pour les chiffres, les étiquettes de provenance et le texte courant. Sur l’appareil, un audit a trouvé une police, deux graisses et neuf tailles, toutes sur l’échelle.

La bibliothèque de composants, en objets

Du mono là où parle la machine

Un seul bleu, qui se dissout en pixels sur les bords

Icônes Streamline Sharp, 508 utilisations sur 112 écrans

La série de six — @, calendrier, cloche, fusée, documents et enveloppe, chacun composé de caractères £, € et $, en boucle sur les écrans bleus de l’application

Chaque écran a sa référence

115 écrans hi-fi, avec les erreurs, les confirmations, les états vides et partiels dessinés dès la phase de wireframes plutôt qu’ajoutés après coup. Quand le design lead m’a signalé que certains écrans ne correspondaient pas à leurs références, j’ai vérifié chaque ligne à l’œil et j’en ai trouvé 64 sur 115 erronées : une feuille rapprochée d’un écran plein, une modale d’une page, un appareil photo sombre d’un formulaire clair. J’ai reconstruit la sélection dans un ordre fixe, conteneur, thème, image, puis seulement le score de similarité, pour aboutir à 52 références d’écran et à des références d’élément recadrées sur l’élément, dont 442 ont passé la revue. Les deux règles d’espacement du lead ont ensuite été appliquées à 167 cartes et 40 piles, chaque modification consignée pour pouvoir être annulée.

Les états ne viennent pas après coup

Le paywall traite la règle 3.1.2 d’Apple comme une exigence de développement : une formule sélectionnée bien visible au lieu d’un interrupteur d’essai activé d’avance, une frise de l’essai, « Billed by Apple », une résiliation en deux touchers. La tarification à la semaine est celle qui rapporte le plus dans la catégorie, et je l’ai écartée : 55,4 % des résiliations d’essais de trois jours ont lieu le jour 0.

Le paywall éthique est aussi le plus compétitif

Les wireframes comme objet, rendus dans Cinema 4D

Une application en production, pas un prototype

L’application est une PWA en React 18, Vite et TypeScript, sur un backend Express et Postgres, dans une seule image Docker sur mon propre serveur. Capture par l’appareil photo, depuis une photo, une capture d’écran ou un PDF ; vérification des chiffres ; le résultat ; Ask pour interroger son propre document ; Radar avec des rappels en push web ; un Vault avec comptes et export. 118 routes ; sur un ordinateur portable, l’application vit dans un cadre d’iPhone. Le backend compte 677 tests, dont des suites hostiles pour la connexion, le push et le Vault, et un audit de sécurité a été mené contre le conteneur en production.

L’honnêteté vit dans le code, pas dans le texte. L’IA, Gemini, ne lit des documents sur l’offre gratuite que si le serveur est explicitement configuré pour des documents synthétiques. Si la vérification au registre de la FCA échoue, l’écran affiche « unchecked », jamais un faux « authorised ». Le texte de confidentialité dit ce que fait réellement l’offre gratuite, et Pro n’est pas vendu avant d’exister : l’accès anticipé est gratuit, Pro coûtera 4,99 £ par mois plus tard.

app.trydecode.app — aperçu en ligne
Démo en ligne
app.trydecode.app
Ouvrir

Live — essayez

La landing, trydecode.app, est une pièce en 3D avec un téléviseur cathodique dans lequel on plonge, une feuille de papier avalée par un iPhone comme par une imprimante à l’envers, le décorticage d’un contrat dans un terminal, et une page 404 où le même écran refuse d’afficher la page. Umami compte les visites sans cookies ; Clarity n’enregistre qu’après « allow ».

Le premier écran : une pièce, un téléviseur, un interrupteur pour les animations

L’information a toujours été dans le document

Ligne par ligne, chaque chiffre avec la page dont il vient

La 404 vit dans la même pièce : le moniteur de la page d’accueil, avec un globe qui tourne en guise de zéro

Quatre audits, du fichier Figma à un vrai iPhone

Les 25 et 26 septembre, j’ai audité l’application web avec les méthodes de NN/g : évaluation heuristique, cognitive walkthrough sur 17 tâches et checklist mobile, dans Chromium et WebKit. L’audit a relevé 86 problèmes, dont 6 catastrophiques. Le pire : à quatre endroits, l’application présentait des faits inventés comme la vérité sur le propre document de l’utilisateur. Tout a été corrigé le 26 septembre, sauf deux problèmes que j’ai acceptés en connaissance de cause.

Puis un vrai iPhone : l’application installée sous iOS 27, inspectée via USB. Il a révélé ce qu’aucun émulateur ne montre. iOS 27 donne à la vue d’une web app installée 59 points de hauteur en moins et floute l’en-tête sous l’encoche ; le correctif a été vérifié sur le téléphone. Un audit visuel sur le même appareil a lu les styles calculés de 7 356 éléments sur 122 écrans et mesuré le contraste sur le fond réel : 0 couleur hors palette, 0 texte sous le niveau AA, et 31 constats encore ouverts.

Prochaine étape : un test modéré avec cinq personnes du segment cible.

Ce que le design ne peut pas régler

La marque verbale DECODE est déposée au Royaume-Uni en classe 9 : le nom a donc besoin d’un qualificatif ou d’une marque figurative avant tout investissement de marque. Le périmètre FCA doit être relu par un avocat avant le lancement, aussi attentivement que j’aie lu les lignes directrices. Les rappels push sur un iPhone avec l’application installée ne sont pas encore vérifiés, et les 31 constats visuels forment le prochain chantier.

Merci d’avoir fait défiler jusqu’ici

Sources

Projet suivant
Frondia