Cegos

Plateforme de formation

2022

Éducation
Refonte UX-UI
Recherche UX

Cegos est une entreprise française fondée en 1926, spécialisée dans la formation professionnelle continue, avec une présence globale dans 50 pays. Elle compte 20 000 clients et forme plus de 250 000 personnes annuellement, en proposant des formations certifiantes et sur-mesure.

Problématiques

Besoin d'un redesign respectant les contraintes techniques de Moodle.
Nécessité de comprendre et d'analyser les besoins des utilisateurs issus de divers secteurs pour proposer un catalogue standardisé.
Application d'une identité graphique pour une utilisation en marque blanche.

Contexte

En partenariat avec Eduano, spécialisé dans le developpment de plateformes d’apprentissage en ligne, leur client Cegos souhaitait créer une nouvelle interface pour leur plateforme de formation en ligne.

Atelier avec le client pour étudier le parcours utilisateur de différents personas clés

La refonte de la plateforme de formation en ligne de Cegos a débuté par un atelier avec le client. L'objectif principal était d'acquérir une compréhension approfondie du parcours utilisateur pour trois profils d'apprenants distincts : les "INTER", les "INTRA" et les "TRAINER".

Les apprenants "INTER" sont des individus qui s'inscrivent de leur propre initiative à une formation, souvent dans une optique de développement personnel ou d'acquisition de nouvelles compétences. Leur motivation et leur engagement sont généralement élevés, et ils recherchent une expérience d'apprentissage flexible et adaptée à leurs besoins spécifiques.

Les apprenants "INTRA", quant à eux, participent à une formation dans le cadre de leur entreprise, qui finance et organise leur parcours de développement professionnel. Leurs attentes sont davantage centrées sur l'acquisition de compétences directement applicables à leur poste et sur une expérience d'apprentissage en phase avec les objectifs de leur organisation.

Enfin, les "TRAINER" ont un double rôle : ils sont à la fois formateurs, partageant leur expertise avec les apprenants, et apprenants eux-mêmes, cherchant à développer leurs propres compétences. Leur parcours utilisateur doit donc prendre en compte cette dualité et leur offrir des outils adaptés à ces deux facettes.

Lors des ateliers, des représentants de chaque profil ont partagé leurs expériences, leurs attentes et leurs défis spécifiques. Ces échanges ont permis de cartographier en détail les différentes étapes de leur parcours, depuis la découverte de la plateforme jusqu'à l'évaluation de leur formation, en passant par l'inscription, l'accès aux contenus et les interactions avec les formateurs et les pairs.

Ces insights ont servi de base pour définir les exigences clés en termes de contenu, de fonctionnalités et d'expérience utilisateur pour chaque profil. Il était essentiel de concevoir une plateforme qui réponde de manière adaptée aux besoins de ces trois publics, tout en offrant une expérience cohérente et intuitive.

Le choix du Learning Management System Moodle comme socle technique de la plateforme a imposé certaines contraintes de développement. Pour en tenir compte dès le début du projet et assurer une intégration optimale, des développeurs d'Edunao, experts en solutions Moodle, ont été impliqués dans les ateliers et les réflexions sur l'architecture de la plateforme.

Cet atelier à permis d'acquérir une meilleure compréhension des besoins et des attentes de chaque profil d'apprenant. Les insights recueillis ont contribué à définir une vision plus précise du parcours utilisateur souhaité, servant de guide pour les étapes suivantes du projet.

Plateforme initiale

Wireframing

La phase de wireframing a débuté par la création d'un kit d'éléments d'interface correspondant à l'environnement Moodle. L'objectif était de partir d'une base solide en utilisant les composants standard de Moodle, tout en se laissant la possibilité de les personnaliser par la suite pour répondre aux besoins spécifiques de Cegos. Ce kit initial comprenait les principales structures de navigation, les layouts de base des pages et les composants essentiels tels que les boutons, les formulaires et les blocs de contenu.

Une fois ce kit de base établi, nous nous sommes concentrés sur le wireframing de l'interface Cegos proprement dite. Une attention particulière a été portée à l'organisation hiérarchique et relationnelle des différents items de formation. Un profil, peu importe lequel, à accès à des formations, faits de cours et de sous-parties appellées activités.

Les wireframes ont été conçus pour représenter clairement les relations entre ces ensembles de formations, les sous-ensembles, les unités pédagogiques et les parcours guidés. Des schémas de navigation intuitifs ont été proposés pour permettre aux apprenants de naviguer facilement entre ces différents niveaux de contenu. Des éléments visuels tels que des icônes, des cartes et des listes ont été utilisés pour renforcer la compréhension de la structure des formations.

Tout au long du processus de wireframing, des itérations régulières ont été réalisées en collaboration avec les équipes de Cegos. Leurs feedbacks et leur expertise ont permis d'affiner progressivement les wireframes pour s'assurer qu'ils répondent aux besoins des différents profils d'apprenants (INTER, INTRA, TRAINER) et qu'ils s'intègrent harmonieusement à l'environnement Moodle.

Le résultat de cette phase a été un ensemble complet de wireframes détaillés, servant de base pour la suite du développement de l'interface utilisateur. Ces wireframes ont permis de visualiser concrètement la structure de la plateforme, allant du dashboard jusqu’a la session cours, de valider les choix de conception et de s'assurer que l'expérience utilisateur soit intuitive et efficace pour tous les profils d'apprenants.

Wireframe du dashboard pour un apprenant INTER/INTRA
Wireframe de présentation d’un cours pour un apprenant INTER/INTRA

Création d’une identité graphique

Afin de créer une expérience cohérente et attrayante pour les utilisateurs, nous avons développé une bibliothèque de composants et une identité graphique adaptée à la plateforme Cegos. Une charte graphique nous ayant été fournie par le client, nous nous en sommes servi comme référence. Cette identité a été conçue pour s'aligner avec la marque Cegos, tout en offrant une flexibilité visuelle grâce à l'application de différents thèmes de couleur.

Les éléments graphiques ont été pensés de manière modulaire afin de s'adapter à la grande variété de contenus et de données présents sur une plateforme de formation. Cette modularité permet une grande flexibilité dans la création et l'organisation des pages, tout en maintenant une cohérence visuelle globale.

Lors de la création de ces éléments graphiques, une attention particulière a été portée à la lisibilité et à l'accessibilité, garantissant ainsi une expérience utilisateur optimale pour tous les profils d'apprenants. Des contrastes de couleurs appropriés, une hiérarchie visuelle claire et des tailles de police adaptées ont été mis en place pour assurer une navigation aisée et une compréhension optimale des contenus de formation.

Phase de conception des maquettes haute fidélité (HiFi)

Une fois la direction artistique validée et la bibliothèque de composants établie, nous sommes passés à la phase de conception des maquettes haute fidélité (HiFi). L'objectif de cette étape était de donner vie à l'interface utilisateur en appliquant l'identité graphique et en affinant les interactions et les détails visuels.

Nous avons commencé par définir une grille de mise en page responsive, adaptée aux différents formats d'écran (ordinateur, tablette, smartphone). Cette grille nous a servi de base pour organiser harmonieusement les éléments de contenu et de navigation, tout en veillant à maintenir une expérience utilisateur cohérente sur tous les appareils.

Ensuite, nous avons appliqué la charte graphique à chaque écran et composant de l'interface. Les couleurs, les typographies, les icônes et les éléments graphiques ont été soigneusement intégrés, en respectant les règles de la charte et en veillant à créer une ambiance visuelle en accord avec l'identité de marque de Cegos.

Une attention particulière a été portée à la hiérarchie visuelle et à la lisibilité des contenus. Nous avons travaillé sur les contrastes, les tailles de police et l'espacement pour garantir une lecture confortable et une navigation intuitive, même pour les utilisateurs ayant des difficultés visuelles.

Tout au long de cette phase, nous avons travaillé avec les équipes de Cegos pour recueillir leurs feedbacks et affiner les maquettes. Des sessions de présentation et de revue ont été organisées régulièrement pour valider les choix de conception et s'assurer que les maquettes répondaient aux attentes et aux besoins des utilisateurs.

Le résultat de cette étape a été un ensemble complet de maquettes HiFi, couvrant toutes les pages et les fonctionnalités clés de la plateforme. Ces maquettes ont servi de référence pour l'équipe de développement.