Hachette

Éducadhoc

2021

Éducation
Refonte UX-UI
Refonte UX-UI

Création de l’éditeur de cours

É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.

Contexte  🎯

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Intervention sur la plateforme existante  🚧

chiffre un dans cercle bleu clair
This is some text inside of a div block.
chiffre deux dans cercle bleu clair
This is some text inside of a div block.
chiffre trois dans cercle bleu clair
This is some text inside of a div block.
chiffre quatre dans cercle bleu clair
This is some text inside of a div block.
chiffre cinq dans cercle bleu clair
This is some text inside of a div block.
chiffre six dans dans bulle bleu clair
This is some text inside of a div block.

Problématiques

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

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.

Hachette navigation et wireframing

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.

Identité visuelle Educadhoc

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.

bibliothèque des éléments, couleurs, typographies et 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.

Design System Plateforme Educadhoc

Nos dernières réalisations

Découvrez notre approche en pratique !
Découvrez nos réalisations

Contactez-nous

Une question ? N’hésitez pas à nous écrire !

🥳

Votre message a bien été envoyé !
La meute s'en occupe le plus vite possible
Il semble qu'il y ait une erreur, veuillez réessayer...