Étude de cas · SaaS EdTech
Projet de fondateur · 2026
Wazadō.
Rendre la progression visible.
Un SaaS qui transforme un référentiel de compétences en arbre de compétences visuel, comme dans les jeux vidéo.
Les apprenants voient où ils en sont, les formateurs valident en un clic, et les responsables pédagogiques repèrent les blocages avant l’évaluation finale.
技+道
Waza · Dō
Waza signifie la technique ; dō, la voie. Comme dans judo ou kendo, le suffixe « -dō » désigne un chemin de maîtrise progressive, pas une technique isolée. C’est toute l’idée de l’outil.
01 — Contexte
Un projet né en salle de cours.
Wazadō vient de ma propre expérience de formateur et de coordinateur pédagogique. J’ai vu les deux côtés du suivi de progression. Formateur, on remplit un tableur. Coordinateur, on essaie de fusionner des fichiers qui ne se ressemblent jamais. Et l’apprenant ne voit ni l’un ni l’autre.
J’ai mené le projet de bout en bout, seul : cadrage produit, recherche, UX/UI, identité de marque, design system et développement du SaaS, jusqu’au lancement.
02 — Le problème
Une note dit combien, jamais quoi.
Un 12/20 ramasse en un seul chiffre ce qui est maîtrisé, ce qui a été négligé et ce qui n’a jamais été abordé. Une note classe l’apprenant par rapport à sa classe, pas par rapport à sa propre progression. Le vrai suivi dort dans un tableur que personne n’ouvre.
Apprenants
Dans le brouillard
Ils savent ce qu’ils ont fait la semaine dernière. Pas où ils en sont dans la formation, ni ce qu’il leur reste à apprendre.
Coordinateurs
Le décrochage se voit trop tard
L’alerte arrive en fin de semestre, quand il n’y a presque plus rien à rattraper.
Formateurs
Chacun son fichier
Aucune vue d’ensemble d’une classe, encore moins de toute l’école.
Suivre des compétences ne devrait pas ressembler à remplir un tableur.
Benchmark
Pourquoi ne pas utiliser un outil existant ?
Les arbres de compétences ne sont pas une idée nouvelle : la pédagogie Freinet les utilise, tout comme les outils RH. Pourtant, le benchmark a révélé une niche encore libre.
| Critère | SkillTree (open source) | Outils RH (ex. Gingo) | Wazadō |
|---|---|---|---|
| Public | Formation en entreprise / dev | Entreprises | Formateurs et écoles |
| Visuel | Badges et niveaux | Cartographie RH | Un vrai arbre de nœuds et de liens |
| Mise en place | Auto-hébergé, Java/Spring | Déploiement en entreprise | SaaS clé en main, dans le navigateur |
| Langue | Anglais | Variable | Français d’abord, multilingue |
03 — La solution
Le référentiel devient une carte.
Chaque compétence est un nœud, chaque prérequis un lien. L’arbre se lit de bas en haut, et chaque compétence se valide par niveaux de maîtrise (cinq par défaut). Un acquis partiel devient visible, au lieu de rester bloqué sur « non acquis ».
Trois publics
Une seule donnée, trois lectures.
J’ai conçu une vue par public, chacune pensée pour répondre à une question précise.
01
Apprenant
« Où j’en suis, et c’est quoi la suite ? »
- Sa carte, toujours sous la main : acquis, en cours, verrouillé
- Des badges débloqués automatiquement aux étapes clés
- Des ressources (vidéo, PDF, lien) posées directement sur la compétence
- Sa langue et son thème visuel
02
Formateur
« Un clic pour valider, aucun tableur à remplir. »
- Éditeur visuel : glisser-déposer, liens tracés à la souris
- Vue classe : tout le groupe à l’écran, un clic par niveau atteint
- Import depuis Word ou Markdown, export PDF vectoriel
- Un même arbre réutilisé d’une promo à l’autre
03
Responsable pédagogique
« Où les apprenants bloquent-ils, avant le bilan final ? »
- Taux de complétion, compétence par compétence
- Les blocages remontent d’eux-mêmes, nominativement
- Vue consolidée : toutes les classes, tous les formateurs
- Le parcours d’un apprenant exportable en PDF
04 — Démarche UX
Du terrain au produit en ligne.
Six étapes, des difficultés vécues à la bêta ouverte, avec le produit lui-même comme prototype.
- 01
Partir de l’expérience de terrain
Mes années de formateur et de coordinateur pédagogique ont servi de premier tour de recherche : les galères du tableur, les conseils de classe où l’on découvre les décrochages trop tard, les apprenants qui demandent « il me reste quoi ? ».
- 02
Confronter aux autres pratiques
Des dizaines d’échanges avec des formateurs, des responsables pédagogiques et des apprenants ont révélé la même frustration : les outils manquent ou sont inadaptés, alors les formateurs bricolent avec Excel et perdent un temps précieux.
- 03
Benchmark
Pédagogie Freinet, outils RH, SkillTree : le concept existe, mais pas pour les formateurs indépendants ni les écoles francophones, et rarement sous forme d’arbre vraiment visuel.
- 04
Trois publics, trois questions
Apprenant, formateur, responsable pédagogique : une seule source de données, trois vues, chacune pensée pour une décision.
- 05
Prototyper dans le vrai produit
Comme je le développe moi-même, j’ai itéré directement dans l’application : plus d’une centaine de versions livrées, chacune ajustée selon l’usage réel.
- 06
Ouvrir la bêta
Le SaaS est en ligne et utilisé par ses premiers formateurs, avec une offre gratuite pour abaisser la barrière d’entrée.
Principes
Les principes de design qui ont guidé le travail.
Six règles qui ont tranché chaque arbitrage, du parcours de validation au bandeau cookies.
L’humain décide
Pas d’exercices corrigés automatiquement : le formateur valide, niveau par niveau. L’outil fait gagner du temps sans retirer le jugement pédagogique.
Des niveaux, pas du tout-ou-rien
La couleur d’une compétence se sature à chaque niveau. Grise jusqu’à l’acquisition, elle révèle la progression partielle au lieu de la cacher.
L’apprenant s’approprie son arbre
Il choisit son propre style visuel, quel que soit le thème choisi par le formateur. La motivation vient aussi du sentiment que le chemin lui appartient.
Une prise en main sans friction
Rien à installer, import du référentiel existant, invitations par e-mail ou QR code. L’objectif : un premier arbre en moins de deux minutes.
Des interfaces honnêtes
L’animation de la page d’accueil réutilise les vraies courbes et les vraies cartes de l’éditeur.
Le respect des données
Un seul cookie, strictement nécessaire à la session. Aucun traceur publicitaire, aucune analytics tierce.
05 — Identité
Un chemin, pas une checklist.
Le nom porte l’idée de progression. L’identité devait paraître sérieuse à une directrice d’école et chaleureuse à un apprenant : une serif littéraire pour la voix, une linéale géométrique pour l’interface, et un bleu franc comme ancrage.
Logo
Le symbole est un W en réserve dans un cartouche bleu dont le bord droit est coupé en biais, pour suggérer le mouvement vers l’avant. Le W rappelle une coche, le geste de valider une compétence, au cœur du produit.
L’ensemble vise la fiabilité et l’évidence : un outil auquel on fait confiance d’un coup d’œil. Règle d’usage : le logo complet partout où il tient ; le symbole seul uniquement sous 120 px (favicon, avatar d’application).
Typographie
Titres · Spectral
Aa
Chaque compétence fait partie d’un chemin.
Une serif littéraire aux empattements discrets : la voix du produit, calme et pédagogique.
Interface · Josefin Sans
Aa
Valider le niveau 3 · 12 apprenants
Géométrique et légère, avec une pointe de vintage : lisible sur des écrans denses.
Couleur
oklch(0.552 0.190 258)
oklch(0.285 0.078 264)
oklch(0.972 0.018 258)
oklch(0.212 0.026 264)
oklch(0.640 0.150 152)
Gamme de la marque, de 50 à 900, générée en OKLCH à teinte constante (~258) :
Ton
Court, concret, sans jargon.
Des phrases courtes et concrètes, sans jargon EdTech. Le produit est rédigé en français, en écriture inclusive, et parle des effets visibles (« la progression se voit », « la motivation suit ») plutôt que des fonctionnalités.
Thèmes des arbres
Quatre univers pour les arbres.
Indépendamment de la marque, les arbres ont leur propre direction artistique. Chaque apprenant en choisit un, pour la même structure de référentiel.
Suisse
Grille, angles vifs, rouge signal.
Cyberpunk
Néon, liens en circuit imprimé.
Médiéval
Chaînes forgées, sépia.
Bonbon
Pastel, angles très arrondis.
06 — Design system
Un système pensé pour le code.
À la fois designer et développeur, j’ai construit un design system propre à Wazadō, source unique de vérité entre maquettes et production. Il couvre le « chrome » de l’application : navigation, formulaires, tableaux de bord, validation, gestion des organisations.
niveaux de tokens : primitifs et sémantiques
composants documentés : anatomie, états, accessibilité
WCAG partout, AAA visé pour le texte courant
thèmes, clair et sombre, qui suivent le réglage du système par défaut
Architecture des tokens
Primitifs
L’échelle brute, jamais utilisée directement dans l’interface.
--wz-brand-500--wz-neutral-200--wz-radius-mdSémantiques
Le sens, résolu selon le thème. Le mode sombre ne redéfinit que ce niveau.
--color-surface--color-content--color-borderComposants
Classes .wz-* et utilitaires Tailwind.
bg-surfacetext-content.wz-cardDécisions clés
- OKLCH pour des gammes perceptuellement régulières et un contraste prévisible
- Une personnalité « équilibrée et accueillante » : rayon de 10 px par défaut, ombres douces, micro-interactions
- Icônes Feather uniquement, pilotées par la couleur du texte ; pas d’emoji dans l’interface
- Accessibilité intégrée : focus visible, navigation au clavier,
prefers-reduced-motion, checklist de revue
Livrables
- Tokens en CSS et en JSON au format W3C Design Tokens
- Preset Tailwind : le mode sombre fonctionne sans la variante
dark: - Bibliothèque de composants CSS utilisable dans les vues Blade
- Guide de style vivant avec bascule clair / sombre / système
Composants
- Bouton
- Champs
- Carte
- Badge
- Alerte
- Onglets
- Modale et tiroir
- Menu
- Infobulle
- Tableau
- Pagination
- Fil d’Ariane
- Avatar
- Navigation
- Notification
- État vide
- Chargements
- Barre de progression
07 — Résultats & suite
En ligne, en bêta ouverte.
Wazadō est en production avec un modèle freemium : gratuit pour commencer, puis une offre Formateur et une offre Organisation pour les écoles. Les premiers formateurs l’utilisent avec leurs classes.
Ce que ce projet m’a appris
Porter à la fois le problème, le design et le code raccourcit énormément la boucle entre une intuition et sa validation. Le design system l’a rendu possible : sans lui, cette vitesse aurait produit une interface incohérente.
Un chemin de maîtrise progressive, pas une technique isolée.