Éducadhoc est la plateforme de distribution et de consultation de manuels scolaires numériques du groupe Hachette. Dans le cadre d’une refonte de l’interface de consultation, nous avons repensé le produit depuis l’identification des besoins des professionnels de l’éducation à la création d’une nouvelle plateforme et image de marque. L’outil s’est enrichi d’un éditeur de cours qui permet aux professeurs de créer un contenu consultable par les élèves.
Problématiques
Besoin d'un audit UX & UI de la plateforme de consultation de livres scolaires afin de challenger l’existant
Besoin d’analyser des fonctionnalités afin d’identifier des leviers d’optimisation pour améliorer l’expérience utilisateur
Besoin de définir une nouvelle identité graphique et d’un design system applicable sur le produit et sur l’ensemble des supports de communication
Contexte
Pour la refonte de l'interface de consultation, nous avons collaboré avec Educadhoc pour repenser entièrement le produit en mettant l'accent sur les besoins réels des professeurs et professionnels de l'éducation. Nous avons donc organisé divers ateliers UX afin de mieux cibler les utilisateurs, pui nous avons élaboré la navigation et le wireframing. A partir de là, nous avons crée une identité visuelle que nous avons appliquée et harmonisée sur toutes les interfaces. Des tests utilisateurs finaux et l’accompagnement dans l’intégration a été la dernière étape.
Organisation de divers ateliers UX avec l’équipe
Après une réunion de lancement avec les membres de l’équipe afin de comprendre les enjeux, objectifs et cibles, nous avons organisé divers ateliers UX avec l’équipe sur les parcours et l’architecture de la plateforme. Ceux-ci nous ont permis de mieux cibler les utilisateurs, leurs besoins et ceux de Hachette.
Élaboration de la navigation et wireframing
Grâce aux informations recueillies par les personas, nous avons pu concevoir et prioriser des fonctionnalités et optimiser la navigation dans la plateforme. Pour cela, nous avons élaboré des user flows pour bien comprendre le chemin qu’il est possible d’emprunter lorsque l’utilisateur navigue sur la plateforme. Après avoir validé les parcours utilisateur, nous avons créé les wireframes, concrétisant la future interface utilisateur. Cette étape clé nous permet de structurer l'interface avant de passer aux détails visuels, assurant une expérience utilisateur optimale dès le début.
Création d’une identité visuelle
La création d'une identité visuelle a octroyé une personnalité distinctive à la plateforme. Cette identité renforce la reconnaissance et établit une connexion émotionnelle avec les utilisateurs. Nous avons collaboré avec les équipes de Hachette pour assurer cohérence et pertinence.
Harmonisation des interfaces
L'harmonisation des interfaces a consisté à assurer la cohérence visuelle et fonctionnelle de tous les éléments graphiques et interactifs de la plateforme. Nous nous sommes dont attelés à la refonte du produit, de la déclinaison des supports de communication et nous avons procédé à l’adaptation du site vitrine. Nous avons enfin développé le site vitrine sous Webflow et accompagné/formé l’équipe Hachette sur le mode d’édition Webflow.
Création des maquettes graphiques finales
En nous appuyant sur les wireframes et l'harmonisation des interfaces pour créer une expérience utilisateur cohérente, nous avons travaillé à la création des maquettes finales. Les maquettes sont des représentations visuelles détaillées de la plateforme, montrant la disposition précise des éléments, les couleurs, les typographies et les icônes.
Recettage UX et suivi de l’intégration
Le recettage UX consiste à faire tester le produit ou l'interface par des utilisateurs afin de recueillir leurs retours et leurs impressions. Nous avons donc mené des tests auprès d’enseignants et d’élèves afin de relever des problématiques UX importantes à corriger. Nous avons accompagné le processus de développement pour s'assurer que la conception a fidèlement été mise en œuvre. Pour ce faire, nous avons collaboré avec les développeurs pour répondre aux éventuelles questions, clarifier les spécifications et veiller à ce que chaque élément visuel et interactif soit correctement intégré.Ainsi la la cohérence visuelle a été maintenue et l'expérience utilisateur a été conforme aux attentes.
Design sprint d'ajout de fonctionnalités
Le design sprint est une méthode de travail collaborative et accélérée qui a permis de résoudre les différentes problématiques en seulement quelques jours. Nous nous sommes réunis avec l’équipe projet du groupe Hachette pour définir un objectif clair, générer des idées, créer des prototypes et les tester auprès des utilisateurs. Ce processus itératif a permis de valider rapidement des concepts et de prendre des décisions éclairées pour avancer efficacement dans le projet.
Création de wireframes mid-fi
Ces wireframes , se situant entre les wireframes basse-fidélité et les maquettes finales, ont offert une vision plus détaillée de l'interface en incluant des éléments visuels tels que couleurs, typographie et icônes. Leur conception a permis de visualiser l'apparence globale de la plateforme tout en évitant les détails graphiques trop poussés. Cette approche a facilité la communication du concept à l’équipe projet du groupe Hachette et a favorisé une meilleure compréhension du projet avant de passer à l'étape finale de conception.
Application du design system sur les maquettes
L'intégration du design system sur les wireframes a assuré une interface visuellement cohérente. Le design system englobe les règles, composants et directives graphiques de la marque. En l'utilisant dans les maquettes, nous avons garanti l'harmonie des couleurs, typographies, icônes et espacements. Un objectif était aussi de permettre une réutilisation efficace des composants, afin d’accélérer le processus de conception et d’offrir une expérience utilisateur homogène.
