Didask repense la navigation de sa plateforme pour offrir une expérience adaptée à chaque rôle utilisateur.
Audit UX, recherche, benchmark et conception d'un composant Design System de navigation, déployé en production à l'ensemble des clients d'une plateforme SaaS e-learning.
Crew Platform Management PM · Devs · Lead dev · PrD
Stack
Figma · Notion Amplitude · Maze · Jira
🔒
Note de confidentialité
Pour des raisons de confidentialité et de concurrence potentielle, aucun screenshot officiel de la plateforme Didask ne peut être diffusé dans cette étude de cas. Les visualisations présentées ci-dessous sont des reconstitutions schématiques produites pour illustrer la démarche, et ne reproduisent pas l'interface réelle.
Studio
12 formations en cours · 3 publiées cette semaine
12
Brouillons
47
Publiées
86%
Complétion
Reprendre
Onboarding manager 2026
Sciences cognitives · Module 3
Sécurité incendie
Méthode · Jobs-to-be-Done
4 rôles, 4 jobs distincts. Une seule plateforme.
🎓
Apprenant
« Retrouver mes formations en cours et savoir ce qu'il me reste à faire, sans perdre de temps à chercher. »
🧑🏫
Animateur
« Accéder aux statistiques pour identifier rapidement les apprenants en difficulté et intervenir. »
✍️
Auteur
« Naviguer fluidement entre contenus, paramètres et prévisualisation pour produire et itérer sans friction. »
🧙
Administrateur
« Avoir une vue d'ensemble claire des espaces, utilisateurs et activité, pour piloter la plateforme efficacement. »
01 · Contexte
Une plateforme e-learning pensée par les sciences cognitives.
Didask est une plateforme SaaS qui propose aux entreprises et aux organismes de formation des outils pour créer, distribuer et suivre des parcours pédagogiques. Elle s'appuie sur les sciences cognitives pour optimiser l'apprentissage. La mission : repenser et livrer la navigation globale de la plateforme pour améliorer l'expérience utilisateur — quel que soit le rôle. Le projet couvre l'audit du système existant, la conception d'une nouvelle architecture de l'information, la création d'un composant Design System réutilisable, et le déploiement à l'ensemble des clients en production.
🎭
Quatre rôles aux besoins distincts
L'apprenant accède à son espace personnel et ses formations
L'animateur suit les apprenants et leurs statistiques
L'auteur crée du contenu dans le Studio
L'administrateur gère la plateforme via un back-office
🚨
Une navigation qui ne scale pas
Menu horizontal saturé : impossible d'ajouter des sous-niveaux
Pas de filtrage par rôle — un admin voit "Espace perso"
Tous les rôles atterrissent sur la même page d'accueil
Incohérences visuelles (espacements, icônes) qui créent de la confusion
Problématique & objectifs
Comment structurer l'architecture pour guider chaque rôle, tout en restant scalable ?
Le problème transversal est limpide : la navigation actuelle ne distingue pas les jobs. Tous les rôles atterrissent sur le même écran avec le même menu, rendant chaque tâche plus difficile qu'elle ne devrait l'être. Trois objectifs ont guidé la démarche.
1Personnalisation
Adapter la navigation au rôle
Réduire la charge cognitive en n'affichant que les sections et actions pertinentes pour chaque profil utilisateur.
2Clarté
Hiérarchie claire et intuitive
Structurer l'information avec une architecture lisible, des sous-niveaux explicites, et un wording cohérent partout.
3Scalabilité
Un composant Design System
Assurer la cohérence et la pérennité via un Menu Navigation réutilisable, capable d'absorber les évolutions futures.
02 · Design process
"…Like a diamond" — comprendre avant de résoudre.
L'approche a été structurée selon les principes du Double Diamant : explorer le problème en profondeur avant d'imaginer les solutions, puis converger vers une livraison claire.
01 · DÉCOUVRIR
Audit de l'expérience actuelle
Identifier les frictions et limites de la navigation pour chaque rôle.
02 · DÉCOUVRIR
User research sur l'existant
Comprendre les besoins et comportements des utilisateurs cibles.
03 · DÉFINIR
Focus group parties prenantes
Aligner l'équipe sur les idées et priorités via maquettes.
04 · PROTOTYPER
Idéation et exploration
Sidebar, catégories par rôle, sous-niveaux. Prototypes accélérés avec Claude Code.
05 · LIVRER
Mise en production
Composant Design System livré et suivi des retours pour itérations futures.
🕵️ Audit du système actuel
Cinq catégories de problèmes majeurs.
L'audit a révélé des points de friction récurrents — ergonomiques, structurels et liés à l'évolutivité — qui freinaient l'usage quotidien et la projection produit.
1
Points de friction identifiés
Menu difficile à faire évoluer : pas de sous-niveaux, pas de filtrage par rôle
Points d'entrée non adaptés à chaque profil
Impossible de mettre en avant de nouvelles fonctionnalités ou d'intégrer des tags
2
Problèmes ergonomiques & UX
Flow de première connexion identique pour tous : tout le monde atterrit sur "Espace perso"
Pas pertinent pour un administrateur ou un concepteur
Manque de landing pages pour guider l'action utilisateur
3
Limites liées à l'évolution
Menu horizontal saturé en nombre d'entrées
Naviguer vers une sous-section ferme le menu et fait perdre le repère de la section active
Le terme "Statistiques" renvoie à des réalités différentes selon les sections
4
Matrice fonctionnalités × rôles
12 fonctionnalités principales auditées
Accessibilité par rôle : autorisé / non autorisé / partiel selon droits
Base de référence pour définir la navigation adaptative
💬 Feedbacks internes & externes
La voix des clients : navigation et onboarding ressortent comme les principales causes de pertes de contrats.
Insights collectés depuis tests utilisateurs, feedbacks support et données du canal interne sur les deals perdus. Trois grandes familles de pain points sont remontées.
UX & ergonomie
« L'ensemble des interlocuteurs a très clairement préféré un concurrent — plateforme moins fluide, navigation complexe. »— Client A
« Prise en main pas simple pour une population de formateurs pas câblée 'pédagogie'. »— Client B
« L'expérience apprenant n'est pas assez attrayante. »— Client E
Limitations fonctionnelles
« Gestion du présentiel et de l'admin jugée insuffisante. »— Client H
« Besoin impératif d'une application mobile pour leur public terrain en déplacement. »— Client A
« Manque de fonctionnalités collaboratives : recommander des contenus, badges, gamification… »— Client B
Contenu généré par IA
« Trop de redondance dans les formats pédagogiques générés par l'IA. »— Client A
« Exercices d'un niveau trop élevé pour des publics mal lecteurs. »— Client H
« Manque de personnalisation, peu de paramètres pour la mise en page. »— Client F
📊 Analyse de la concurrence
Benchmark des acteurs e-learning et des SaaS référents pour la navigation.
L'analyse a couvert les principaux acteurs du marché ainsi que des plateformes SaaS reconnues pour la qualité de leur navigation. Objectif : identifier les patterns gagnants applicables au contexte multi-rôles de Didask.
360Learning
Navigation collaborative en workspaces, bottom navigation mobile à 5 onglets, continuité cross-device.
Sana Labs
Approche minimaliste pilotée par l'IA, navigation qui s'adapte automatiquement au profil de l'apprenant.
Articulate Rise 360
Approche content-first avec navigation séquentielle simplifiée pour le parcours pédagogique.
Beedeez
Mobile-first gamifié, bottom tab navigation et engagement par micro-formats.
Airbnb
Référence pour les flows de création guidés (setup d'annonce), applicable au Studio Didask.
Slack · Notion · Linear
Patterns de sidebar catégorisée avec sous-sections dépliables, standard SaaS.
Pattern · Action menu
Préparer ce qui suit
Aider l'utilisateur à savoir ce qui l'attend, avec une sensation de fluidité et des étapes claires.
Pattern · Catégories
Contextualiser l'information
Entrées par catégories pour aider l'utilisateur à comprendre la hiérarchie globale de la plateforme.
Pattern · Badges
Apporter du dynamisme
Notification badges pour mettre en avant les entrées clés et soutenir l'engagement contextuel.
Pattern · Mode / rôle
Switcher de profil
Sélection de rôle qui personnalise dynamiquement les entrées affichées dans la navigation.
Pattern · Dropdown
Contenu personnel
Menu utilisateur regroupant contenu personnel, paramètres et préférences en un seul accès.
Pattern · Guidage
Suivre les étapes
Menu d'action qui aide l'utilisateur à comprendre la séquence des étapes à venir, sans surcharge.
💡 Phase d'hypothèses & idéation
Six hypothèses pour cadrer les pistes de solution.
01
Interface personnalisée par rôle — Si on n'affiche que les sections pertinentes selon le rôle, l'utilisateur comprendra plus vite son espace et la charge cognitive diminuera.
02
Hiérarchie claire et parcours distincts — Si on structure la navigation en espaces dédiés par rôle, les utilisateurs distingueront mieux leurs tâches.
03
Navigation modulaire et scalable — Si on propose un menu dynamique qui s'ajuste à la complexité des tâches, l'interface restera intuitive même avec de nouvelles features.
04
Accès rapide aux actions fréquentes — Si on fournit des raccourcis ("Reprendre ma formation", "Voir les stats"), les utilisateurs accompliront leurs tâches plus vite.
05
Visibilité des éléments clés — Si on met en avant notifications et priorités par rôle, les utilisateurs identifieront plus facilement ce qui est important.
06
Guidage contextuel interactif — Si on intègre des guides interactifs et un assistant intelligent, les utilisateurs prendront en main la plateforme plus vite, avec moins de support externe.
🧠 Phase d'idéation
Trois pistes explorées, une retenue.
Dépriorisée
IDÉE 01
Sélection de rôle au login
Pour les utilisateurs multi-rôles, ajouter un écran de sélection après l'identification pour choisir le rôle de navigation. Conditionne ensuite l'ensemble de l'affichage. Reportée courant 2026.
✓ Retenue
IDÉE 02
Nouveau menu latéral catégorisé
Remplacer le menu horizontal par une sidebar sticky à gauche avec catégories dépliables, sous-niveaux, et espace dédié pour les nouvelles features et l'assistant IA Didia. Retenue pour sa scalabilité et son alignement avec les standards SaaS du benchmark.
Chantier futur
IDÉE 03
Flows guidés pour parcours complexes
Intégrer des flows pas-à-pas pour les actions complexes du Studio, inspirés du setup d'Airbnb. Conservée comme chantier complémentaire à la refonte du menu. Reportée courant 2026.
03 · Livraison
La solution livrée : sidebar verticale catégorisée par domaine fonctionnel.
Suite au REX et aux ateliers d'idéation, le projet a été priorisé et lancé en développement (dev start : octobre 2025) pour un lancement début janvier 2026. La navigation horizontale a été remplacée par une sidebar verticale sticky à gauche, organisée autour de cinq grands domaines : Apprentissage, Conception, Animation, Manager, Administration.
Une seule navigation, cinq domaines fonctionnels.
Chaque catégorie regroupe les entrées pertinentes avec icônes, compteurs contextuels et sous-niveaux dépliables. Une barre de recherche globale en haut, profil utilisateur ancré en bas.
✓Sidebar sticky verticale, catégorisée par domaine
✓Compteurs dynamiques sur les entrées (projets, publications)
✓Sous-niveaux dépliables (IA Didia, Paramètres)
✓Recherche globale en haut, profil ancré en bas
🔍 Rechercher dans Didask…
APPRENTISSAGE
📘 Mes formations
CONCEPTION
✏ Studio ›
ANIMATION
👥 Apprenants
📊 Statistiques
MANAGER
🎯 Mes équipes
ADMINISTRATION
🏢 Espaces
🤖 Didia IA
SM
Sacha M.
Auteur · Animateur
🧩 Composant Design System · Menu Navigation
Investir dans un composant réutilisable plutôt qu'une implémentation ad hoc.
Pour garantir cohérence et scalabilité, j'ai conçu un composant Design System dédié — Menu Navigation — réutilisable dans toute l'application. Ce choix assure que chaque évolution future de la navigation s'intègre nativement, sans dette technique.
Ce que gère le composant
Une seule source de vérité pour toute la navigation Didask.
Affichage conditionnel des catégories et entrées selon le rôle de l'utilisateur
Compteurs dynamiques sur les entrées (projets en cours, publications, alertes)
Sous-niveaux dépliables avec gestion d'état persistante
Profil utilisateur avec menu contextuel et switch de rôle
MenuNavigation · v1.0
État · default
📘 Mes formations
État · hover
📘 Mes formations
État · active + badge
📘 Mes formations3
État · expanded
✏ Studio▾
Mes contenus
Médiathèque
🚀 Déploiement & projection
Un déploiement big bang, motivé par l'absence d'altération fonctionnelle.
Décision a été prise de lancer à l'ensemble des clients en une seule fois, sans rollout progressif. Cette nouvelle navigation n'altère aucune fonctionnalité existante — elle restructure uniquement la manière d'y accéder.
🎯
Navigation intuitive
Les clients trouvent la nouvelle structure facile à utiliser et naviguent rapidement vers n'importe quelle partie de l'application.
🛡️
Crédibilité renforcée
Une structure alignée sur les standards SaaS du marché, qui renforce la position de Didask comme LMS de confiance auprès des leads et prospects.
🏗️
Fondation produit
Le composant Design System Menu Navigation est devenu la base sur laquelle toutes les futures évolutions de la plateforme viennent se greffer naturellement.
Conclusion & next steps
Au-delà du menu : une culture produit transformée.
Ce REX a posé les fondations d'un chantier structurant chez Didask. Les prochaines étapes : prototypage rapide pour tester les pistes complémentaires avec des utilisateurs, ateliers avec l'équipe de développement pour valider la faisabilité technique de l'architecture étendue, et approche incrémentale — refonte visuelle du menu, mise à jour du wording, puis sélection de rôle au login. En parallèle, le chantier d'optimisation mobile a été lancé spécifiquement pour les apprenants, avec une stratégie basée sur le benchmark concurrentiel. Au-delà de la navigation, le projet a instauré une culture de l'audit UX documenté, démontré la valeur du benchmark concurrentiel pour aligner les stakeholders, et fait du composant Design System Menu Navigation la fondation des évolutions à venir.
Étude de cas Didask
Discutons de votre prochain chantier de refonte navigation.
