Hanzimap
Challenge
Hanzimap a fait appel à 40/60 pour passer du MVP à une V1 monétisable de sa méthode pédagogique d’apprentissage du chinois, jusque-là formalisée dans les livres, en une véritable plateforme numérique desktop-first prête à être déployé sur un secteur pédagogique en plein expansion, peu outillé digitalement.
Résultat
La collaboration a permis de passer d’un support statique sur Excel à une plateforme monétisable, fidèle à la méthode du client et prête pour un lancement produit.L’interface, claire et structurée, a rendu la navigation plus intuitive et l’apprentissage plus engageant.
Objectifs
La méthode, dense et visuelle, devait être traduite en interface sans en dénaturer les principes :
- Développer un univers graphique combinant attractivité, dimension ludique et rigueur pédagogique.
- Rendre opérationnelle une méthode combinant repères visuels, sonores et phonétiques afin d’apprendre 4× plus vite.
- Offrir une expérience d’apprentissage engageante tout en restant fidèle à la vision du client. Cela impliquait :
- De trouver le juste équilibre entre rigueur pédagogique et fluidité d’usage.
- D’assurer la clarté visuelle grâce à des affordances bien pensées.
- De préparer un produit évolutif pour de futures itérations.
Accompagnement
Nous avons d’abord mené une phase de discovery et de définition pour comprendre en profondeur la méthode pédagogique du client et transformer ses principes en objectifs produits clairs et évolutifs. Sur cette base, 5 jours de conception UX ont été consacrés à structurer la grille pédagogique et à optimiser les parcours d’apprentissage, avec un travail minutieux sur les cas maximum et les cas particuliers pour éviter tout point d’ombre ou dysfonctionnement. Cette étape a été complétée par 5 jours de design UI, traduisant la logique pédagogique en une interface claire, engageante et motivante. Le développement a été particulièrement et techniquement exigeant, avec près d’une 7 semaines de développement car la méthode instaurait des usages nouveaux à intégrer, nécessitant une attention précise pour garantir que chaque interaction de la grille se comporte correctement. Nous avons également conçu une landing page explicative réalisé sur Webflow pour présenter la méthode et ses bénéfices, le tout en veillant à ce que chaque interaction soit claire et bien expliqué pour servir le lancement de la V1 monétisable du produit.
Stack technique
- L’équipe tech a adopté une approche exploratoire en amont du développement, pour s’assurer de la faisabilité des solutions et aligner la vision technique avec les besoins du client.
- Une collaboration étroite entre design et développement a été instaurée, avec des allers-retours rapides pour garantir la cohérence entre les intentions graphiques et les contraintes techniques.
- La stack React + Next.js a été choisie comme socle robuste et évolutif, permettant d’assurer performance, modularité et continuité entre front et back.
- Le design system ChatCN a joué un rôle central dans la synchronisation des équipes : les designers construisaient dans Figma avec les mêmes composants que ceux utilisés en code, assurant une parfaite continuité visuelle et fonctionnelle
- Cette méthodologie a permis à la tech de soutenir le design avec précision, de réagir vite aux contraintes, et de livrer une solution fidèle, performante et maîtrisée.
.webp)
.webp)
