Decode

Een AI-decoder voor contracten van achteraf betalen in het VK, die toont wat de checkout nooit hardop zegt — van begin tot eind ontworpen, van onderzoek tot 115 hi-fi-schermen, en door mij gebouwd als live PWA

Rol
Product · UX/UI · Design system · Onderzoek · Front-end
Disciplines
Product DesignUX/UI DesignDesign systemUX-onderzoekFrontend
Kort
  • Probleem — een actieve gebruiker van achteraf betalen in het VK doet 2,6 aankopen per maand en leent daarover samen £168, en de checkout spreekt het woord “credit” nooit hardop uit
  • Inzicht — mijn eigen premisse brak: 89% van de gebruikers vindt het overzicht houden makkelijk. De job is niet “het overzicht houden”, maar “niet verrast worden door een afschrijving”
  • Oplossing — één getal voor de echte kostprijs, berekend door code en niet door AI, de valkuilen, een ja/nee over het kredietdossier, en elk cijfer leidt met één tik naar zijn regel — daarna houdt Radar de afschrijvingen in het oog. Onderzoek, product, UX, het design system en de build lagen bij mij
  • Resultaat — live, vóór de lancering: 280 commits, 677 backend-tests, 86 auditbevindingen in één dag opgelost; een gemodereerde test met vijf mensen is de volgende stap

Een scanner voor de papieren die je al getekend hebt

Decode leest een Brits contract voor achteraf betalen, een factuur of een brief waar je van schrikt, en geeft drie dingen terug: één getal voor wat het echt kost, de valkuilen in de kleine lettertjes, en een regel waarop je tikt om te zien waar dat getal precies vandaan komt. Eerst de iPhone, eerst het VK, en geen koppeling met de bank: het document is de input.

De metafoor bepaalt de interface. Een contract is machineleesbaar voor iedereen behalve voor wie het tekent, dus gaat Decode aan de kant van de machine staan en geeft het haar lezing terug aan jou. Het product spreekt in monospace, citeert de bronregel en toont zijn rekenwerk: een zichtbare verwerkingspipeline in plaats van een spinner, en “Calculated, not AI” bij alles wat een formule heeft berekend.

Het product in één zin, in zijn eigen stem

De metafoor: de machine leest het voor jou

Het rekenwerk, zichtbaar: stappen in plaats van een spinner

Achteraf betalen is klein, frequent en stil

De gemiddelde actieve gebruiker van achteraf betalen in het VK doet 2,6 aankopen per maand en leent daarover samen £168, volgens de transactiedata van de FCA bij de drie grootste aanbieders. Citizens Advice stelde vast dat 89% van de webwinkels het kredietkarakter van het aanbod in de kleine lettertjes laat, en dat één op de tien kopers die achteraf betalen al een incassobureau achter zich aan kreeg. De FCA begint de markt te reguleren op 15 juli 2026.

De kloof zit niet in het rekenwerk, maar in het feit dat de checkout nooit hardop “credit” zegt, en dat een gemiste betaling zes jaar op een kredietdossier kan blijven staan.

Het probleem, met de bonnetjes erbij: elk cijfer draagt zijn bron op de kaart

Mijn eigen data brak mijn premisse

De eerste hypothese zei dat mensen het overzicht over hun afbetalingen verliezen. De eigen enquête van de FCA zegt op segmentniveau het omgekeerde: 89% van de gebruikers van achteraf betalen vindt het overzicht houden makkelijk, 86% in de groep van 18–24 jaar, en 67% betaalt via domiciliëring. Een product dat zich aanprijst als “helpt je het overzicht te houden” zou al op het eerste scherm in discussie gaan met zijn gebruiker.

Ik hield beide cijfers op dezelfde pagina in plaats van het ongemakkelijke te schrappen, en ging zoeken waar de pijn echt zit: bij zware gebruikers. Bij mensen met £500 of meer aan openstaande schuld zakt “makkelijk” naar 77–78%, en de FCA beschrijft zelf het risico dat je over verschillende aanbieders heen de draad kwijtraakt, om daarna geen gebundeld overzicht te verplichten. Dus veranderde de job van “herinner me aan de datum” naar “laat me niet verrassen door een afschrijving”: wat er van de rekening gaat, op welke dag, van welke kaart, bij aanbieders die elkaar nooit zien. De decode werd de ingang; het portfolio en Radar werden het product.

Dezelfde regel gold voor mijn eigen teksten: toen ik de FCA-paragraaf herlas, zag ik dat ik £168 had omschreven als “op elk moment verschuldigd”. Het is geleend per maand, en de landing werd dezelfde dag gecorrigeerd.

Bewijs dat moeilijk te vervalsen is

64 onderzoeksrapporten en 19 teardowns van analoge producten, en een strategiereset op 31 augustus, uitgevoerd als twaalf parallelle onderzoeksagents op primaire bronnen. Vier segmenten kregen een score op zeven gewogen criteria, en “onbedoelde leners”, gebruikers van achteraf betalen van 18–25 jaar, wonnen met 4,25. Vijftien jobs, functioneel, emotioneel, sociaal en aangrenzend, zijn elk gekoppeld aan de flow die ze beantwoordt; twaalf daarvan dragen een feature en één of twee metrics, onder een North Star van documenten die tot “beslissing genomen” komen.

Het bewijs komt uit bronnen die moeilijk te vervalsen zijn: een dertigtal letterlijke één-sterrecensies van vijf concurrenten, gecodeerd op thema en ernst, zodat elke mislukking van een concurrent een van mijn vereisten werd, en een pre-mortem die zes vereisten opschreef alsof het product al gefaald had. De interviewgids, in het formaat van de Mom Test en het JTBD-switchinterview, voor zes tot acht mensen, ligt klaar voor de volgende ronde.

Het Segment & JTBD-bord: elke jobkaart noemt de flow die haar beantwoordt

Zes fases, één ommekeer

Vier tabs, één centrale actie

Home, Radar, Scan, Vault, Settings. Scan is geen bestemming: het opent de opname-sheet bovenop de tab waar je op dat moment staat. Elk scherm heeft een weg erin en een weg eruit, en elke lege staat heeft een Scan-actie.

Elk scherm heeft een weg erin en een weg eruit; geen verweesde schermen

De kernloop is vastleggen, je cijfers nakijken, resultaat, bewaren en volgen, Radar. Op de tweede stap ben ik het meest trots: een scherm dat toegeeft dat een foto verkeerd gelezen kan worden. Elke uitgelezen waarde staat naast de regel waar ze vandaan komt, bewerkbaar, nog voor er één berekening draait. Op het resultaat komt één getal eerst, de echte kostprijs, dan het antwoord over het kredietdossier, dan de valkuilen; onschuldige voorwaarden klappen samen tot “6 terms look standard”.

Vastleggen, en dan de cijfers nakijken voor er gerekend wordt

Eerst één getal; één tik om te bewaren en te volgen

Radar: wat er van de rekening gaat, wanneer, van welke kaart, over aanbieders heen

Vertrouwen is een navigatielus, geen belofte in de tekst: tik op een cijfer en je landt op de exacte regel in je document, gemarkeerd, met “Report a mismatch” eronder. En er was één grens die ik niet kon oversteken. In het VK is iemand zeggen welke schuld hij eerst moet afbetalen gereguleerd schuldadvies, dus is die grens in het product zelf getrokken: Ask legt uit wat je document zegt, en vragen van iemand in financiële nood gaan naar StepChange en MoneyHelper, met “the choice is yours” op de kaart.

Afdwingen in plaats van discipline

Wireframes en hi-fi zijn één bestand in twee modi, dus is herkleuren een moduswissel en geen herschildering van 115 schermen. Spacing, radii, typografie en kleur zijn op de masters aan variabelen gekoppeld: een audit op 7 september telde 19.740 koppelingen en 0 onopgeloste, dus kan een waarde buiten de schaal nergens vandaan komen.

De hoofdflow in Wireframe-modus. Dezelfde schermen, omgeschakeld naar de blauwe modus, zijn de hi-fi

Zwart-wit kwam eerst. Zonder palet in de wireframefase moest elke status, van de ernst van een valkuil tot het antwoord over het kredietdossier en de zekerheid van de extractie, leesbaar zijn via tekst, icoon en gewicht; kleur kwam later en kan alleen versterken. Eén lettertype draagt alles: Geist Mono, voor cijfers, herkomstlabels en lopende tekst. Op het toestel vond een audit één lettertype, twee gewichten en negen groottes, allemaal op de schaal.

De componentenbibliotheek als objecten

Mono waar de machine spreekt

Eén blauw, dat aan de randen in pixels oplost

Streamline Sharp-iconen, 508 keer gebruikt op 112 schermen

De set van zes — @, kalender, bel, raket, documenten en envelop, elk opgebouwd uit £-, €- en $-tekens, in een lus op de blauwe schermen van de app

Elk scherm heeft een referentie

115 hi-fi-schermen, met fouten, bevestigingen, lege en gedeeltelijke staten die al in de wireframefase getekend zijn in plaats van achteraf toegevoegd. Nadat de design lead zei dat sommige schermen niet bij hun referenties pasten, controleerde ik elke rij met het oog en vond ik er 64 van de 115 fout: een sheet gekoppeld aan een volledig scherm, een modal aan een pagina, een donkere camera aan een licht formulier. Ik bouwde de selectie opnieuw op in een vaste volgorde, container, thema, beeld en pas dan de similariteitsscore, en eindigde met 52 schermreferenties en elementreferenties die tot op het element zijn bijgesneden, waarvan er 442 door de review kwamen. Daarna gingen de twee spacingregels van de lead naar 167 kaarten en 40 stacks, elke wijziging vastgelegd zodat ze terug te draaien is.

Staten zijn geen bijzaak

De paywall behandelt Apples richtlijn 3.1.2 als bouwvereiste: een zichtbaar geselecteerd abonnement in plaats van een trialschakelaar die al aanstaat, een tijdlijn van de proefperiode, “Billed by Apple”, opzeggen in twee tikken. Wekelijkse prijzen leveren in de categorie het meest op, en ik heb ze afgewezen: 55,4% van de opzeggingen van een proefperiode van drie dagen gebeurt op dag 0.

De ethische paywall is de concurrerende

De wireframeset als object, gerenderd in Cinema 4D

Een live app, geen prototype

De app is een PWA in React 18, Vite en TypeScript op een backend in Express en Postgres, in één Docker-image op mijn eigen server. Vastleggen met camera, foto, screenshot of pdf; je cijfers nakijken; het resultaat; Ask over je eigen document; Radar met herinneringen via webpush; een Vault met accounts en export. 118 routes; op een laptop staat ze in een iPhone-frame. De backend heeft 677 tests, waaronder vijandige suites voor inloggen, push en de Vault, en er liep een security-audit tegen de live container.

Eerlijkheid zit in de code, niet in de tekst. De AI, Gemini, leest documenten op de gratis tier alleen als de server expliciet op synthetische documenten is ingesteld. Lukt de controle in het FCA-register niet, dan toont de app “unchecked”, nooit een nep-“authorised”. De privacytekst zegt wat de gratis tier echt doet, en Pro wordt niet verkocht voor het bestaat: early access is gratis, Pro kost later £4,99 per maand.

app.trydecode.app — live preview
Live demo
app.trydecode.app
Openen

Live — probeer het

De landing, trydecode.app, is een 3D-kamer met een CRT-televisie waar je in vliegt, een vel papier dat in een iPhone wordt ingevoerd, als een printer die achteruit werkt, een teardown in een terminal, en een 404 waarop dezelfde monitor weigert de pagina te tonen. Umami telt bezoeken zonder cookies; Clarity neemt pas op na “allow”.

Het eerste scherm: een kamer, een televisie, een schakelaar voor beweging

De informatie stond altijd al in het document

Regel per regel, elk cijfer met de pagina waar het vandaan komt

De 404 staat in dezelfde kamer: de monitor van de landingspagina, met een draaiende globe als nul

Vier audits, van het Figma-bestand tot een echte iPhone

Op 25 en 26 september lichtte ik de webapp door met de methodes van NN/g: heuristieken, een cognitive walkthrough van 17 taken en de mobiele checklist, in Chromium en WebKit. Dat leverde 86 problemen op, waarvan 6 catastrofaal. Het ergste: op vier plekken stonden verzonnen feiten als de waarheid over het eigen document van de gebruiker. Alles werd op 26 september opgelost, behalve twee die ik bewust aanvaardde.

Daarna een echte iPhone: de geïnstalleerde app op iOS 27, geïnspecteerd via USB. Die vond wat geen emulator laat zien. iOS 27 maakt de weergave van een geïnstalleerde webapp 59 pt te kort en maakt de header onder de notch wazig; de fix werd op de telefoon gecontroleerd. Een visuele audit op hetzelfde toestel las de berekende stijlen van 7.356 elementen op 122 schermen en mat het contrast tegen de echte achtergrond: 0 kleuren buiten het palet, 0 tekst onder AA, en 31 bevindingen die nog openstaan.

Volgende stap: een gemodereerde test met vijf mensen uit het doelsegment.

Wat design niet dicht krijgt

Het woordmerk DECODE is in het VK geregistreerd in klasse 9, dus de naam heeft een toevoeging of een beeldmerk nodig voor er geld naar het merk gaat. De FCA-perimeter heeft voor de lancering een review door een jurist nodig, hoe zorgvuldig ik de richtlijnen ook las. Pushherinneringen op een geïnstalleerde iPhone zijn nog niet geverifieerd, en de 31 visuele bevindingen zijn de volgende ronde.

Bedankt voor het scrollen

Bronnen

Volgend project
Frondia