Aller au contenu

HAPP’E-LEARNING

Contexte du projet

Étude de marché

Objectifs et enjeux du projet

Méthodologie : Double Diamant


Étape 1 : Découvrir

La phase d’empathie en quelques mots

La phase de découverte et empathie est la première étape du Design Thinking appliqué au projet Happ’E-learning. Elle consiste simplement à comprendre en profondeur les étudiants comme Léo : leurs habitudes quotidiennes, leurs galères sur les plateformes actuelles, ce qu’ils ressentent (stress, démotivation), disent et attendent vraiment (une app fluide sur web et mobile avec IA pour guider).

Pour cela, j’ai mené :

  • Questionnaires auprès de vingtaine d’étudiants en Licence/Master,
  • Entretiens pour creuser leurs frustrations,
  • Exploration sur les apps concurrentes,
  • Cartes d’empathie/personas pour visualiser leurs besoins,

Résultat : au lieu de supposer, nous avons des données concrètes prouvant que le vrai problème n’est pas le contenu des cours, mais comment il est présenté (interfaces surchargées, pas adaptées mobile, sans guidance IA). Cette empathie guide toutes les étapes suivantes de conception pour créer une expérience vraiment utile et motivante.

Benchmark de la concurrence

Cette étude de concurrence des LMS leaders révèle des opportunités pour Happ’E-learning : alors que les acteurs open-source comme Moodle excellent en flexibilité mais peinent en UX moderne, et que les SaaS premium (360Learning, Didask) brillent par l’IA et la personnalisation au prix fort, un espace se creuse pour une solution hybride mobile/web, abordable et intuitive, combinant gamification, neuro-pédagogie et blended learning – pile dans les failles d’ergonomie et d’accessibilité des concurrents.

Insights sur les concurrents

De nombreuses plateformes souffrent d’une ergonomie déficiente, de parcours flous générant démotivation, d’une optimisation mobile insuffisante et d’une négligence de la motivation intrinsèque dans leur conception.

Observations des usages réels

En pratique, les étudiants perdent du temps à fouiller les ressources, subissent un stress dû à la surcharge informationnelle, se démotivent vite sans personnalisation, rejettent les interfaces trop « scolaires » et s’irritent des notifications mal dosées ou non priorisées.

Résultats des tests plateformes

Tests de navigation (simplicité, temps pour localiser cours / devoirs / interactions) révèlent des difficultés d’orientation, une incohérence visuelle et un feedback progression quasi absent sur les concurrents.

UX Research

Un questionnaire en ligne a été envoyé à des étudiants en Licence et Master pour recueillir données quantitatives/qualitatives sur leur niveau d’études, équipement (smartphone dominant pour accès mobile et sessions courtes), fréquence d’usage des plateformes, pratiques clés (cours, devoirs, notes, échanges), frustrations, formats préférés et attentes en personnalisation/suivi.

Des entretiens individuels semi-directifs ont ensuite été effectués pour explorer leur quotidien et approfondir le besoin utilisateur.

Analyse des insights

Malgré un recours fréquent, les répondants pointent des interfaces complexes et saturées, une UX mobile défaillante (zoom, lisibilité, fluidité), des PDF verbeux peu captivants, des recherches laborieuses, des rappels d’échéances flous et un suivi de progression invisible – générant désordre, anxiété et découragement. Les verbatims (« Je me perds dans la plateforme », « Trop long à lire », « Une IA explicative, oui ! ») soulignent que le contenu est solide, mais son accessibilité et sa présentation défaillantes.

Affinity Mapping

À partir de ces données issues des questionnaires et entretiens, un affinity mapping a regroupé thématiquement les verbatims et insights (ex. : clusters UX mobile, Engagement, Personnalisation et aide) pour identifier patterns prioritaires comme l’optimisation mobile-first et le besoin d’accompagnement IA.

Persona

Les retours potentiels des étudiants soulignent des frustrations récurrentes : interfaces surchargées et peu mobiles (« La plateforme est un labyrinthe sur smartphone »), temps perdu à chercher ressources et deadlines (« Je zoome sans cesse, c’est illisible »), manque de personnalisation et feedback (« Pas de suivi clair de ma progression, je lâche vite »), et démotivation face à des contenus statiques (« Des cours interminables, j’ai besoin d’IA pour expliquer simplement »), mais aussi des besoins et désirs spécifiques. Ce qui a conduit à la création d’un persona cible.

Carte d’empathie

La carte d’empathie de Léo a été construite à partir des données collectées via questionnaires, entretiens et observations des parcours utilisateurs sur LMS concurrents. Ce travail d’immersion synthétise ses faits (usages mobiles courts), dits/pensées (verbatims frustrés), ressentis(stress, démotivation) et contexte externe (voit/entend), pour cristalliser ses pain points (navigation labyrinthique, manque IA) et gains espérés (accompagnement, fluidité gamifiée). Elle guide ainsi les priorités design de Happ’E-learning vers une expérience centrée humaine.


Étape 2 : Diagnostiquer

La phase de diagnostic en quelques mots

La phase de diagnostique et cadrage arrive juste après l’empathie : on passe de « Qu’est-ce qui cloche ? » à « Comment on va s’y attaquer ?« . C’est comme assembler un puzzle pour bien définir le problème et tracer la route du projet Happ’E-learning.

J’ai utilisé 3 outils simples :

  • Customer Journey Map (CJM) : une carte du parcours de Léo sur une plateforme LMS, étape par étape (connexion → cherche cours → fait quiz), avec ses émotions, galères et idées business.
  • Méthode des 5 Pourquoi : on creuse comme des détectives : « Pourquoi Léo est démotivé ? » → interfaces surchargées → pas mobile-first → logique admin, pas utilisateur → besoin d’IA adaptative !
  • How Might We (HMW) : une question magique pour inspirer et cadrer le projet : « Comment pourrions-nous créer une plateforme hybride avec IA qui transforme frustration en apprentissage fun et personnalisé ?« 

Résultat : au lieu de bricoler, on a un cadre clair – priorités (mobile, IA, gamification) et problématique précise – pour guider les idées et wireframes suivants. Tout part des vraies problèmes de Léo !

Customer Journey Map

La cartographie du parcours actuel de Léo sur son LMS a été réalisée à partir des données de la recherche utilisateur, visualisant chronologiquement ses étapes, points de contact, émotions, pain points et opportunités. Cette synthèse empathique met en lumière les ruptures clés pour prioriser les innovations de Happ’E-learning vers une expérience fluide et motivante.

Exploration du problème : 5 Pourquoi ?

Problème initial : Les étudiants comme Léo se sentent perdus, stressés et démotivés sur les LMS existants.

  1. Pourquoi Léo se sent-il perdu et démotivé ?
    Parce qu’il perd du temps à naviguer dans des interfaces surchargées, sans guidance claire, ce qui génère frustration et sentiment d’inefficacité lors de sessions mobiles courtes.
  2. Pourquoi les interfaces sont-elles surchargées et sans guidance ?
    Parce qu’elles priorisent une logique administrative (gestion globale, contenus statiques longs comme PDF/vidéos) plutôt qu’une organisation logique centrée sur l’utilisateur mobile, sans regroupement personnalisé des ressources.
  3. Pourquoi manquent-elles de personnalisation et d’interaction mobile-first ?
    Parce qu’elles n’intègrent pas de suivi en temps réel de la progression individuelle ni de formats engageants (micro-learning, gamification), laissant les apprenants passifs et isolés face à des contenus non adaptés.
  4. Pourquoi n’y a-t-il pas de suivi intelligent et interactif ?
    Parce que les plateformes ignorent les données comportementales (habitudes mobiles, besoins spécifiques) et l’IA pour adapter dynamiquement les parcours, quizzes ou explications, au lieu de proposer une aide proactive.
  5. Pourquoi ce manque d’IA adaptative est-il critique ?
    Parce qu’il perpétue un design « bureau-admin » obsolète, amplifiant le stress, le décrochage et la démotivation chez les étudiants mobiles (80% des usages), alors qu’une guidance IA personnalisée boosterait l’engagement, la rétention (+25-60%) et l’efficacité globale.

Racine du problème et solution : Le vrai enjeu n’est pas seulement l’ergonomie, mais l’absence d’un LMS hybride web/mobile avec IA proactive pour un apprentissage interactif, guidé et gamifié – comme dans Happ’E-learning, qui transforme passivité en accompagnement dynamique.

Problématique : How Might We

Comment pourrions nous créer une plateforme LMS hybride web/mobile, guidée par l’IA, qui transforme la frustration et la démotivation des étudiants en un parcours d’apprentissage engageant, personnalisé et fluide, en intégrant micro-learning gamifié et suivi adaptatif ?


Étape 3 : Développer

L’étape d’idéation et de conception en quelques mots

La phase de développement transforme les insights de l’empathie en solutions concrètes pour Happ’E-learning. C’est le moment où les idées prennent forme !

J’ai d’abord idéé via SCAMPER (30+ concepts IA/gamification), puis priorisé avec MoSCoW (5 MUST : dashboard, micro-leçons, IA adaptative). Ensuite, j’ai ensuite dessiné le parcours utilisateur (sitemap 3 niveaux, user flow connexion) et traduit les besoins en 15 User Stories actionnables.

Enfin, les wireframes/maquettes (promptés grâce à Figma Make et Perplexity) visualisent une première version web (déclinée ensuite en mobile) épurée respectant les besoins de Léo .

Idéation : Brainstorming SCAMPER

Substituer : Remplacer PDF/vidéos passives par micro-modules interactifs (quiz IA, infographies cliquables, simulations courtes) pour un apprentissage actif en sessions mobiles de 10 min.

Combiner : Fusionner gamification + IA + dashboard : progression visuelle (XP, badges) avec alertes dynamiques personnalisées et recommandations de contenus adaptées au rythme de Léo.

Adapter : S’inspirer des apps fitness ou langues gamifiées (Duolingo) pour un suivi quotidien engageant : streaks, % objectifs remplis en 3 taps, défis thématiques avant cours théorique, progression, score, série

Modifier : Transformer le dashboard en hub intuitif : deadlines/ressources prioritaires toujours visibles, agenda, leçons en cours, navigation par thématiques vs types de fichiers, zoom auto-optimisé.

Produire autrement : Repositionner avatars/quiz pour simulations pro (entretien virtuel, pitch projet) et moteur de reco IA basé sur profil/habitudes (ex. : révisions points faibles).

Éliminer : Supprimer notifications superflues, fragmentation outils (Drive, Teams, messagerie), contenus longs statiques – tout centralisé, rappels intelligents prioritaires seulement.

Réorganiser (Reverse) : Inverser « cours → test » en adaptive learning IA : défis/quiz d’abord pour identifier lacunes, puis savoir ciblé – boostant engagement et rétention (+80% micro-learning).

Priorisation MoSCoW

Après le brainstorming, la matrice MoSCoW a permis de trier les idées en 4 catégories claires : MUST (indispensables pour le MVP), SHOULD (importantes mais secondaires), COULD (bonus si temps) et WON’T (hors scope). Parmi 20+ idées, seuls 5 MUST garantissent une solution viable répondant aux frustrations de Léo. Cela cadre le MVP à 80% des besoins avec 20% d’efforts (loi de Pareto), évitant des fonctionnalités trop complexes et risquées.

User Stories

Les fonctionnalités MUST/SHOULD ont été reformulées en 15 User Stories concrètes au format « En tant que [persona], je veux [fonctionnalité] afin de [bénéfice mesurable] ». Centrées sur Léo, elles lient directement pain points à solutions, avec impact business chiffré . Ce passage du « quoi » vague au « comment actionnable » prépare les wireframes et sprints dev, assurant un MVP aligné sur de vraies intentions utilisateurs.

Site Map et Userflow

La sitemap de Happ’E-learning schématise un parcours utilisateur fluide et épuré pour Léo, avec une architecture hybride mobile et web. Cette structure hiérarchique élimine la navigation labyrinthique des concurrents, respecte les user stories MoSCoW et optimise le flow Léo : Dashboard → Cours → IA → Devoir/Révision → Récompense, pour des sessions d’apprentissage ultra-productives.

UI Design et maquettes

La phase de conception des maquettes UI utilise Figma Make avec des prompts ultra-optimisés pour transformer instantanément les 15 User Stories MoSCoW en prototypes interactifs. Au lieu de dessiner manuellement, un prompt précis génère les écrans clés (Dashboard, Cours, Parcours de formation, IA Assistant, Profil gamifié) dans un design épuré : palette gris/noir/blanc + bleu Klein, Inter typo, espacements 16px, coins arrondis.

Le prompt Figma Make est optimisé de la sorte :

  1. Contexte du projet — objectif, public cible, ton général de l’expérience.
  2. Pages clés — tableau de bord, espace élève, parcours d’apprentissage, profil, classement, etc.
  3. Fonctionnalités principales — gamification, suivi de progression, badges, missions, feedback visuel.
  4. Composants UI — boutons, cartes, modales, tableaux, barres de progression, avatars, etc.
  5. Design System — palette chromatique, typographies, formes, icônes, style d’illustrations, ton visuel.
  6. Interactions et micro-animations — transitions, hover states, effets de feedback.

Ces maquettes avancées respectent la sitemap niveaux et le user flow Léo, et des fonctionnalités et pages ont été ajoutées. Figma Make automatise interactions (swipe timeline, tap deep-links), états hover et navigation.

Résultat : un MVP visuel testable prêt pour les itérations utilisateurs, 10x plus rapide que le design traditionnel !

En savoir plus sur le prompt utilisé

1. Contexte du projet

Concevoir l’expérience utilisateur et l’interface UI complète de Happ’E-learning, une plateforme LMS moderne et gamifiée destinée aux étudiants et jeunes professionnels souhaitant apprendre de façon engageante, collaborative et personnalisée.
L’objectif est de rendre l’apprentissage motivant grâce à la gamification, à la visualisation du progrès et à des interactions ludiques.
Le ton général est positif, dynamique et inclusif, inspirant la progression, la collaboration et la réussite dans un univers digital chaleureux.
Le logo « happy.jpg » doit apparaître dans le header et le menu de navigation.

2. Pages clés

Tableau de bord (Dashboard)
  • Vue d’ensemble de la progression : cours inscrits, taux d’avancement, prochaines tâches et messages récents.
  • Accès rapide aux prochaines leçons, devoirs à rendre et quiz à faire.
  • Mises à jour du jour, missions actives et alertes de progression.
Cours (Courses)
  • Catalogue général présentant tous les cours disponibles et ceux déjà suivis.
  • Filtres : catégories, niveaux, durée, format, disponibilité.
  • Sections spécifiques :
    • Micro-leçons (contenus courts, autodidactes).
    • Boîte à outils (ressources & templates classés par thématique).
    • Espace quiz et entraînement (pour réviser et s’évaluer librement).
Parcours de formation
  • Liste de tous les parcours, diplômes et certifications proposés par l’école.
  • Interface visuelle de type carte ou timeline interactive, avec indicateurs de progression et critères d’obtention.
  • Détails sur chaque parcours : durée, modules, débouchés, enseignants principaux.
Détail d’un cours
  • Présentation du programme, créateur du cours et ressources téléchargeables.
  • Affichage des modules + progression des leçons.
  • Section d’avis et de discussion entre étudiants.
Leçon
  • Lecteur vidéo principal avec transcription et outils intégrés (prise de notes, surlignage).
  • Onglets : notes personnelles, discussion, ressources annexes.
  • Barre de progression dynamique par module.
Devoirs (Assignments)
  • Détails du devoir, champ de dépôt de fichiers, historique des envois et grille d’évaluation.
  • Feedback enseignant intégré.
Quiz
  • Interface interactive avec minuterie et progression.
  • Feedback immédiat sur les réponses, écran de résultats animé avec score, badges et suggestions d’amélioration.
Profil utilisateur
  • Informations personnelles et paramètres de compte.
  • Statistiques d’apprentissage : temps total, cours suivis, progression globale.
  • Section “Récompenses” : affichage des badges, scores, points de progression, streaks (jours d’apprentissage consécutifs), missions réussies.
  • Lien vers la page complète “Récompenses” pour visualiser toutes les distinctions et animations de succès.
Page « Récompenses »
  • Gamification complète : tableau des badges débloqués, niveaux atteints, points cumulés, historique de progression.
  • Interfaces illustrées avec indicateurs animés de réussite.
Happy Collab
  • Espace collaboratif pour travail en groupe et partage :
    • Messagerie instantanée et tchat de groupe.
    • Accès à un drive partagé pour déposer et consulter des ressources communes.
    • Système de mentions, notifications et échanges entre pairs.
Happy Assistant
  • Assistant IA intégré, fonctionnant comme ChatGPT ou Perplexity.
  • Zone de saisie de prompt, suggestions intelligentes, réponses contextuelles et affichage clair.
  • Design conversationnel fluide, avec bulles de dialogue colorées et suggestions de requêtes.
Notes / Évaluations (Grades)
  • Tableau de bord des notes par cours.
  • Graphiques de progression, moyenne globale, comparaison des performances et évolution dans le temps.
Calendrier
  • Vue mensuelle avec événements, échéances et activités planifiées.
  • Codes couleurs par type d’activité : cours, devoir, évaluation, collaboration.
À propos
  • Présentation de l’école, des statistiques clés, de la mission et des enseignants.
  • Fiches enseignants illustrées, avec description et domaine d’expertise.

3. Fonctionnalités principales

  • Gamification intégrée : badges, points, niveaux, streaks, missions et barres de progression.
  • Suivi personnalisé : progression en temps réel, recommandations adaptatives.
  • Collaboration sociale via Happy Collab : échanges, groupes, fichiers partagés.
  • Assistant intelligent (Happy Assistant) : aide contextuelle, recherche de contenu, support rapide.
  • Responsive et adaptable à tous les écrans (desktop, tablette, mobile).
  • Notifications dynamiques, visuelles et audibles.

4. Composants UI

  • Navigation latérale fixe avec icônes claires et libellées en français.
  • Cartes de contenu (courses, parcours, ressources, badges).
  • Barres de progression animées avec dégradés indigo/pourpre.
  • Boutons arrondis primaires et secondaires.
  • Avatars étudiants et enseignants personnalisables.
  • Tableaux et graphiques de performances.
  • Modales pour soumission, quiz, et feedback.
  • Onglets interactifs pour sous-sections (notes, discussions, ressources).

5. Design System

  • Palette principale : Indigo et violet profond (couleurs identitaires).
  • Accents : dégradés bleutés et violets lumineux.
  • Typographies : Poppins pour les titres, Inter pour le texte.
  • Formes : arrondies, fluides, inspirées d’un univers positif et énergétique.
  • Icônes : ligne claire et colorée.
  • Illustrations : style plat, vectoriel, avec personnages expressifs.
  • Mot d’ordre visuel : “motivation & clarté” — équilibre entre univers ludique et crédible.

6. Interactions et micro-animations

  • Effets de hover et survols fluides sur les boutons, cartes et icônes.
  • Transitions en fondu et translation lors du passage entre les pages.
  • Animations de progression (barres qui se remplissent, badges qui brillent, confettis de réussite).
  • Feedback visuel immédiat (par ex. clic sur “Soumettre” déclenchant une animation de check).
  • Notifications toast animées.

📘 Commande finale à injecter dans Figma Make

Crée la maquette complète en français de la plateforme Happ’E-learning, selon le contexte, les pages, les fonctionnalités et le design system décrits ci-dessus.
Ajoute le logo happy.jpg.
La plateforme doit être gamifiée, interactive, accessible et fluide, articulée autour de la progression, de la collaboration et de la réussite.


Étape 4 : Délivrer

Phase de livraison, test et évaluation du MVP en quelques mots

La phase de livraison, c’est le moment où on teste pour de vrai avec les étudiants et on améliore vite !

Les résultats : sur 8 testeurs (comme Léo), 9/10 ont réussi les tâches facilement (trouver deadline, faire quiz), en 32 secondes seulement. Note globale 8,4/10 – ils adorent ! « L’IA explique mieux que mes profs ! »

On a repéré 2 petits bugs (bouton caché, suggestions pas assez perso) → corrigés en 1 semaine (Sprint 2).

Bref : l’app marche super, les étudiants veulent l’utiliser tous les jours. Prochain étape : lancer la version beta avec 50 testeurs en mars ! 🚀

Protocole de test utilisateur

La phase de préparation des tests utilisateurs finalise le MVP de Happ’E-learning pour confrontation terrain. À partir des maquettes Figma cliquables, j’ai élaboré un protocole rigoureux : 8 tests modérés (Teams, 60 min) avec des étudiants en Licence/Master (similaires à Léo), combinant think-aloud sur parcours critique (Dashboard → Cours → IA → Devoir) + questionnaire AttrakDiff (pragmatique/hédonique).

Recrutement RGPD-compliant : Google Form screening (Moodle users, 80% mobile), consentements écrits, données pseudonymisées. KPIs clairs : ≥85% succès tâches, temps <45 sec dashboard-quiz, NPS ≥7/10.

Ces tests valideront les 5 MUST MoSCoW (IA, micro-leçons, gamification) avant itérations V2, pivot ou lancement, avec radar AttrakDiff pour data-driven decisions.

Test utilisateur modéré

Metrics et Attrakdiff

Résultats des Tests Utilisateurs (8 étudiants Master Lyon) : Succès éclatant sur KPIs critiques : 92% taux de succès tâches (objectif ≥85%), temps moyen Dashboard → Quiz : 32 sec (vs 45 sec cible). NPS : 8,4/10 

AttrakDiff : performances correcte :

  • Pragmatique (utilisabilité) : navigation intuitive plébiscitée
  • Hédonique-Stimulation : gamification/badges « motivants et addictifs »
  • Hédonique-Identité : Design épuré et facilité de compréhension de la plateforme
  • Attractivité globale : positionnement « task-oriented + fun« 

Pain points mineurs : bouton IA parfois masqué (mobile landscape), reco trop génériques en début. Feedback qualitatif : « L’IA qui reformule, c’est magique – je reviens direct si bloqué.« 

Verdict : MVP validé pour itération V2 → lancement beta imminent ! 🚀

Livraison et fin de projet

Les tests utilisateurs confirment le MVP : 92% succès tâches32 sec Dashboard→Quiz, NPS 8,4/10AttrakDiff +1,8 pragmatique/+1,7 attractivitéVerbatims clés : « L’IA magique, je reviens direct ! » « Badges addictifs vs Moodle cauchemar. »

2 frictions mineures identifiées (bouton IA masqué landscape, reco IA trop génériques) → Sprint 2 planifié : fixes UX + algo reco affinée. Radar AttrakDiff positionne Happ’E-learning en « excellente utilisabilité + forte stimulation hédonique« .

Roadmap validée : beta 50 étudiants Lyon (mars 2026), features COULD (offline, timeline semestre) pour V3. Pivot écarté – les 5 MUST MoSCoW sont solides ! 🚀