ai-course.be

Un exercice de trois minutes contre la fraude par IA pour les travailleurs des organisations belges. Il évalue le geste qui arrête un clone vocal, un appel deepfake ou une fausse facture, pas la capacité à les repérer. J’ai conçu l’app dans Figma, puis construit et mis en ligne la landing page en trois langues avec Claude Code ; l’app elle-même n’est pas encore construite

Rôle
Fondatrice & designer — recherche, produit, design de l’app, design system, landing page ; construit avec Claude Code
Disciplines
Design produitRecherche UXDesign systemsMobileFront-endAccessibilité
En bref
  • Problème — En Belgique, la fraude est passée aux canaux que la sensibilisation couvre à peine : une voix familière, un appel vidéo, une facture avec une seule ligne modifiée. Trois secondes d’audio suffisent pour cloner une voix, et on repère les deepfakes à peine mieux qu’au hasard
  • Insight — La reconnaissance s’entraîne mal ; une procédure, si. S’arrêter, rappeler un numéro qu’on avait déjà, signaler — cela marche que la voix soit vraie ou non, et c’est donc ce que l’exercice évalue
  • Solution — Des séances de trois à cinq minutes sur le téléphone, une règle chacune, chaque semaine puis un mois plus tard, en néerlandais, en français et en anglais, construites autour des règles belges du conseil d’entreprise et de l’article 50 de l’AI Act
  • Résultat — 60 écrans hi-fi et un design system dans Figma, et une landing page en ligne sur ai-course.be depuis le 17 septembre. L’app n’est pas construite et aucun pilote n’a encore eu lieu. Projet personnel

Une voix que vous connaissez, qui demande un paiement

En 2025, les Belges ont perdu 93 millions € à cause du phishing, sur quelque 11 000 cas, trente pour cent de plus que l’année précédente ; les chiffres sont ceux de l’État et du secteur bancaire. La police fédérale prévient que trois secondes d’audio suffisent pour cloner une voix. La fraude qui fonctionne aujourd’hui, c’est un appel avec la voix du comptable, un directeur en appel vidéo, une facture d’un fournisseur habituel avec un nouvel IBAN.

La plupart des formations de sensibilisation apprennent encore à reconnaître : regardez le lien, cherchez la faute de frappe, regardez le visage. Face aux faux produits par l’IA, c’est un pari faible. Une méta-analyse de 56 études situe la détection humaine des deepfakes à 55,5 %, à peine mieux qu’un pile ou face, et dans une étude de l’UCL, les auditeurs ont repéré les voix clonées dans 73 % des cas, l’entraînement n’aidant « que légèrement ». ai-course part de l’autre bout : quel que soit l’aspect du faux, le bon geste est le même.

C’est un projet personnel, écrit pour le programme We Are Founders de BeCentral, dont les candidatures ont fermé le 20 septembre 2026. Je l’ai conçu et construit avec Claude Code entre le 2 et le 28 septembre.

ai-course.be — tant que l’app est en conception, la landing page est le visage public du produit

Le sujet, composé comme une affiche

Les trois chiffres de la landing page, chacun avec sa source

Évaluer le geste, pas la reconnaissance

La règle centrale tient en trois étapes : s’arrêter, vérifier sur un numéro qu’on avait déjà, signaler. L’exercice évalue laquelle le travailleur a choisie, et rien d’autre. Signaler un vrai e-mail compte comme juste, et une fausse alerte ne coûte rien, car un travailleur qui a peur de se tromper cesse de vérifier. La recherche qui m’a fait abandonner la reconnaissance a aussi fixé les limites de la promesse. Ho et al. (IEEE S&P 2025, environ 19 500 employés) n’ont trouvé aucun bénéfice net de la formation annuelle, et 1,7 point pour une formation affichée au moment du clic. Lain et al. (IEEE S&P 2022, 14 733 employés sur 15 mois) ont constaté que ce type de formation peut rendre les gens plus vulnérables, et que le signalement collectif, lui, fonctionne.

Les deux études testaient la page qui s’affiche à l’instant du clic, et toutes deux mesuraient des clics sur des e-mails. ai-course n’interrompt personne : c’est une répétition planifiée de trois à cinq minutes, une règle par séance, chaque semaine puis reprise environ un mois plus tard, sans minuteur. Dans cette littérature, les effets des rappels sont faibles, d ≈ 0,08–0,38 dans une étude portant sur 19 735 personnes de 45 ans et plus ; le pitch promet donc une procédure répétée et une trace, pas un grand effet.

L’affirmation n’a rien d’unique, et la landing page ne prétend pas le contraire. En septembre 2026, plusieurs fournisseurs disaient déjà que la vérification est la compétence qui compte. Ce que je n’ai pas trouvé, c’est un tableau de bord qui la mesure, et c’est donc la phrase de la page.

Une situation en quatre écrans : l’appel d’exercice, l’appel lui-même, quatre gestes possibles, et un débriefing qui nomme la règle au lieu de noter la personne

La même décision sur la landing page, en trois règles

Un lieu de travail belge a des règles avant d’avoir des utilisateurs

Un exercice au travail touche à la surveillance des travailleurs : le modèle de données est donc venu des conventions collectives belges avant le moindre écran. Les tentatives conservent un code de résultat et un horodatage, jamais ce qu’un travailleur a tapé ou dit (CCT 81). Une organisation de 50 personnes ou plus reçoit un modèle de note pour le conseil d’entreprise (CCT 39). Les RH voient qui a terminé, pas les réponses. L’attestation dit ce qu’elle est : « attest van deelname, geen wettelijk erkend certificaat », une attestation de participation, pas un certificat légalement reconnu.

Chaque contenu synthétique porte l’étiquette Oefening / Exercice / Exercise, ce que l’article 50 de l’AI Act demande pour les contenus générés. J’ai mis en avant l’article 50 plutôt que l’article 4 : le règlement (UE) 2026/1744 a fait de l’obligation de maîtrise de l’IA de l’article 4 une obligation de moyens, tandis que l’article 50 s’applique sans changement depuis le 2 août 2026. L’appel entrant est dessiné dans l’app, sans téléphonie ni usurpation de numéro, que le régulateur belge des télécoms encadre. Les banques, l’eID et bpost n’apparaissent que sous forme de marques fictives.

Le public a changé une fois. Le premier brief disait que les travailleurs avaient « souvent 50 ans et plus ». Le 16 septembre, j’ai abandonné cette idée : une revue systématique de 2022 n’a trouvé aucune preuve que les personnes âgées soient surreprésentées parmi les victimes de fraude en ligne, et une étude du gouvernement néerlandais de novembre 2025 montre que les moins de 34 ans cliquent plus souvent sur des liens frauduleux que les plus de 55 ans. Le produit s’adresse aux travailleurs de tout âge, et le texte d’au moins 18 px reste, parce que c’est un engagement d’accessibilité, pas une question d’âge.

Les réponses pour le conseil d’entreprise sur la landing page, empilées comme des fiches sur un bureau

Des références, des wireframes, puis 60 écrans hi-fi

L’app a suivi l’ordre que j’applique à chaque projet : d’abord les références, puis les wireframes, puis le hi-fi, le tout dans Figma. IFTTT a donné le langage visuel, noir et blanc, avec des pilules épaisses et des lettres autocollantes. Brilliant a donné la mise en page. J’ai mesuré ses écrans au lieu de deviner, et l’échelle d’espacement est sortie de ces mesures : 0, 4, 8, 16, 20, 24 et 40, avec 12 et 14 gardés comme constantes de composants. Il y a 35 wireframes et 60 écrans hi-fi en 402 × 874, du choix de la langue aux attestations, plus les états qu’on saute d’habitude : vide, chargement, erreur, hors ligne, trop de tentatives, un code qui expire après cinq essais.

L’écran de question, en wireframe et en hi-fi. Les quatre gestes sont devenus des pilules pleine largeur ; Verify et Report ont quitté la barre du bas

Home dans quatre de ses huit états : prochaine séance, premier lancement, erreur, hors ligne

Les écrans sont ensuite passés par 25 tours de vérification selon WCAG 2.2 AA et les Human Interface Guidelines d’Apple. Le texte sous le contraste AA est passé de 3 cas à 0, et le texte sous 7:1 de 5 à 0. Le texte courant fait au moins 18 px et les cibles 44–48 px, car l’exercice se lit sur un téléphone entre deux autres tâches.

Deux choses retirées de chaque écran

Chaque écran de séance se terminait autrefois par un pied de page d’aide, avec Verify et Report à un toucher. J’ai demandé à quel moment un travailleur ouvrirait une app de formation pendant qu’un fraudeur est au bout du fil, et la réponse était : jamais. Le pied de page a disparu des 58 écrans qui l’avaient. La théorie du changement, c’est la mémoire, pas la disponibilité : les trois étapes doivent être répétées jusqu’à être là sans l’app.

Report est passé dans la barre de navigation, puis a perdu son mot. « Report » se lisait comme « signaler un bug de l’app », et entrait en collision avec la troisième étape de la règle que l’exercice enseigne. Cinq présentations ont été construites et comparées ; une icône de bouclier d’alerte nue de 24 pt, avec une zone tactile de 44 pt, l’a emporté. Les banques confrontées au même problème écrivent « Suspected fraud » ou « Identify a scam », jamais « Report ». Le bouclier figure sur les 29 écrans où une séance est en cours ou vient de se terminer ; la simulation d’appel et le premier lancement n’en ont pas, volontairement.

Verify et Report en panneaux. La dernière ligne de Report ne vaut que si l’argent est déjà parti, et elle le dit

Deux couleurs, une police, chaque valeur une variable

Le design system est volontairement petit : l’encre #222222 et le blanc, avec des gris seulement pour le texte secondaire. Il compte 104 variables réparties en huit collections et 36 styles de texte. Chaque espacement des écrans est lié à une variable, et 69 % des nœuds d’un écran sont des instances de composants : un changement dans la bibliothèque atteint les 60 écrans. Le web utilise Neue Haas Grotesk d’Adobe Fonts, tandis que le fichier Figma utilise encore Helvetica Neue : cette police n’est livrée qu’avec macOS, et les bureaux belges tournent surtout sous Windows.

Composants de l’app. Un échange qui garde la hauteur et la cible tactile est une propriété ; un changement de structure est un nouveau composant

Les lettres autocollantes sont le seul élément bruyant de la marque : des mots et des icônes à double contour, utilisés pour les étiquettes d’exercice et sur la landing page. La première version dessinait le contour en anneaux, et les anneaux bouchaient l’intérieur des lettres comme o et e. Depuis le 8 septembre, chaque autocollant a deux couches, une face pleine sous les lettres, et chacun est converti en contours pour s’afficher partout de la même façon.

Des autocollants en trois langues et quatre tailles, plus le jeu d’icônes

Une landing page qui dit ce qui n’est pas encore construit

La landing page est un site séparé en React et Vite, prérendu par langue à /, /nl/ et /fr/, et déployé avec Coolify sur mon propre serveur. Elle est en ligne depuis le 17 septembre, avec le néerlandais et le français le même jour. Sa mise en page web a été mesurée dans le navigateur sur le site de Brilliant : le passage des écrans du téléphone au bureau est donc documenté, pas inventé. Le pas entre sections passe de 40 à 80, tandis que le rayon des cartes et le bouton de 56 px restent. Le texte courant fait 20 px.

Les écrans d’exercice dans un rendu d’iPhone 17 Pro, le modèle de téléphone de mon projet Decode ; sa fenêtre a les proportions des écrans de 402 × 874, pour qu’un vrai enregistrement puisse plus tard remplacer chaque image fixe

Why now : les trois canaux sont distribués un à un pendant le défilement de la section

Quatre différences, chacune assez petite pour être vérifiée

Rien sur la page n’affirme plus que ce qui existe. La ligne de statut dit « In development · pilot places for autumn 2026 », le pied de page dit que le produit n’est pas encore en vente, et la section des prix n’affiche encore aucun montant : un prix par organisation, donné par écrit sans appel de cadrage, indicatif jusqu’à ce que le pilote tranche. Les affirmations vieillissent, alors celles qu’on a retirées sont épinglées dans les tests. « Aucun concurrent ne cite l’article 50 par son numéro » figurait dans mes notes le 4 septembre ; une vérification ultérieure a trouvé un fournisseur qui l’avait cité en juillet, et un test échoue désormais si cette phrase revient.

La composition est une règle, pas une retouche. Une fonction typeset lie les mots courts, les articles et les prépositions au mot suivant, garde les nombres avec leur libellé, pour que « CAO 81 » et « a pilot » ne se coupent jamais, et tient le tiret loin du début de ligne. Un test dans le navigateur lit chaque saut de ligne rendu, à cinq largeurs et en trois langues. Le premier passage a trouvé 47 mauvaises coupures ; il n’en signale plus aucune.

Néerlandais, à /nl/

Français, à /fr/

La 404 est un petit jeu : une fusée et sept faux à abattre. Le serveur renvoie toujours un vrai 404

Douze jobs, et aucun objectif avant la mesure de départ

La documentation produit suit le format des job stories : douze jobs sur une boucle Notice → Act → Return, un ensemble de fonctionnalités par job et au plus deux métriques chacun. La North Star est l’évolution du taux de gestes corrects chez un même travailleur entre la première séance et les suivantes, mesurée à partir de la table des tentatives. Deux types de métriques restent séparés. Les métriques contractuelles sont des invariants, comme aucun contenu sans étiquette ou la ligne Fraudstop sur chaque panneau Report, et un raté est un bug. Les métriques comportementales n’ont pas d’objectif tant que le pilote n’a pas de mesure de départ ; l’engagement est de les mesurer et d’en publier le résultat, y compris s’il déçoit.

La planche des jobs. Les lignes en gras sont des jobs sociaux ou émotionnels

L’une des trois planches de boucle dont les jobs sont tirés

La carte des écrans, groupée par parcours

Ce que Claude Code a fait, et ce que j’ai décidé

Claude Code a écrit le code de la landing page : les 116 commits portent tous sa ligne de co-auteur. Il a aussi mené les mesures, les tours de vérification et les audits, rédigé les premières versions de la recherche, et construit les écrans et les variables Figma via l’API des plugins. J’ai choisi le problème, le public et la règle d’évaluation, fixé la direction visuelle et l’ordre du travail, décidé de ce qui était coupé, et accepté ou rejeté chaque résultat.

Les corrections sont allées dans les deux sens, et les miennes sont consignées dans le registre des décisions du projet. La première landing page est arrivée sous forme de code, sans wireframe, sans hi-fi et sans une seule référence ; je l’ai arrêtée et j’ai recommencé dans l’ordre du projet. Une mesure des écrans de référence par script lisait deux à quatre points trop court, et ma mesure à la main est devenue la référence. Le pied de page d’aide et le mot « Report » ont tous deux disparu à cause de questions que j’ai posées sur l’usage réel du produit.

Personne n’ouvre une app de formation pendant qu’un fraudeur est au bout du fil. La règle doit être là sans elle

Ce qui n’est pas fait

L’app est conçue, pas construite : aucun scénario n’a été généré et aucun travailleur n’a fait d’exercice. Je n’ai pas encore interrogé d’utilisateurs, et les textes n’ont pas encore été lus par les travailleurs plus jeunes que le public corrigé inclut. Le plan : deux mois de construction, douze scénarios en néerlandais et en français, puis un pilote avec trois à cinq organisations belges de 20 à 250 personnes. Le pilote fixe la mesure de départ des métriques comportementales, le prix et le dossier pour le conseil d’entreprise.

La landing page a ses propres points ouverts. Ses notes secondaires sont en 16 px, sous les 18 px que la page promet pour le texte courant, et le fichier Figma doit encore passer à Neue Haas Grotesk. Le site compte 246 tests unitaires et 249 tests dans le navigateur, qui vérifient ce qu’ils vérifient ; ils ne remplacent pas une personne qui fait l’exercice.

ai-course.be — aperçu en ligne
Démo en ligne
ai-course.be
Ouvrir

En ligne — ai-course.be

Sources

Projet suivant
NUX