Etude de cas

MedXL Conf Plus

La société MedXL Conf+ a confié la refonte de son site de préparation aux ECN de médecine à l'agence bluedrop.fr. la plateforme e-learning, propulsée par Drupal 9, propose une architecture découplée avec ReactJS pour enrichir l'expérience des utilisateurs connectés, principalement des étudiants. 

Une plateforme e-learning développée avec Drupal 9 et ReactJS

Le contexte et le périmètre du projet

Le site conf-plus.com propose des contenus et une plateforme de préparation aux épreuves classantes nationales (ECN) de médecine depuis 2012.


    Le projet de refonte du site a consisté dans la reprise des contenus pédagogiques, la réfection des parcours utilisateurs et la refonte technique de l'ensemble de la plateforme. L'agence bluedrop.fr a par conséquent pris en charge : 

    • La Direction de la redéfinition de la charte graphique web et de son design system ;
    • Le développement technique avec Drupal et React ;
    • La refonte des parcours utilisateurs ;
    • La conception des maquettes UI ;
    • La reprise des contenus et des utilisateurs accompagnés de leurs permissions ;
    • La maintenance préventive, corrective et évolutive du site ;
    • L'hébergement du site.

    La charte graphique et la reprise des parcours

    La refonte de charte graphique a été conduite en collaboration avec Gweno, qui a proposé une nouvelle identité au site (logotype, couleurs et positionnement de la marque). Efficace et moderne, sa déclinaison a été prise en charge par notre équipe de conception.

    Les parcours utilisateurs ont été largement étudiés et évalués lors d’ateliers de design studio. Ils ont permis de confronter les bonnes pratiques UX avec la connaissance des utilisateurs de l’équipe de conf+ :

    • La découverte des offres ;
    • L’abonnement et le tunnel de vente ;
    • Le parcours messagerie ;
    • Le parcours « Dossier Progressif » ;
    • Le parcours de consultation des fiches (apprentissage, question au conférencier) ;
    • Le parcours « QI - Questions isolées » et leurs corrections ;
    • Le parcours « TOPOS » ;
    • Le parcours « Trousse du docteur ».

    L’agence bluedrop.fr a pris en charge la création du design system et le déploiement des maquettes wireframes et graphiques, disponibles sur figma.



    Le développement et la migration des contenus

    L’équipe technique a profité de la puissance de Drupal dans la gestion des permissions pour configurer une plateforme avec de multiples rôles d’intervenants, du correcteur au contributeur, en passant par l’administrateur de la boutique et le client (l’étudiant ou son représentant). Nous retrouvons parmi les principales configurations :

    • Le déploiement de Drupal 9 et des modules contribués usuels ;
    • La configuration et l'adaptation du module quiz pour gérer et générer les QCM ;
    • La configuration du module Stripe pour gérer les paiements et abonnements ;
    • Le développement d’une fonctionnalité de messagerie interne ;
    • La configuration de la boutique en ligne - Achat d’abonnements et gestion de leurs expirations (modules role expire et commerce) ;
    • La configuration des produits (abonnements mensuels, paiement au comptant, paiement par mois avec engagement de durée) ;
    • La configuration et le patch du module Sendinblue pour gérer les messages transactionnels de la plateforme ;
    • Le développement du tableau de bord de l'étudiant (profil, messagerie interne, statistiques, abonnement) ;
    • Le développement du tableau de bord du conférencier.

    Les interfaces d'apprentissage et de validation des connaissances découplées avec ReactJS

    L’espace de travail, pour les étudiants, a fait l'objet d'un soin tout particulier pour garantir fluidité et adaptabilité des comportements. Si les contenus proposés aux utilisateurs anonymes sont construites dans la boite de Drupal, l’espace de travail des étudiants est généré par ReactJS, nourri par le module Json API désormais intégré au Core de Drupal

    06/2021
    Education

    Les interfaces

    La nouvelle charte qui habille la marque a valorisé les travaux de refonte du site et de l'espace de travail des étudiants. La démarche UX s'est mise au service de la marque et propose une expérience enrichie, sur toutes les résolutions d'écran, aux étudiants et conférenciers.

    Voir en réel