Contexte 🎯
Dans le cadre d’une refonte de l’interface de consultation, nous avons travaillé avec Educadhoc pour repenser complètement le produit depuis l’identification des réels besoins des professeurs et professionnels de l’éducation à la mise en oeuvre d’une nouvelle plateforme et image de marque. Nous avons donc mené un design sprint pour résoudre le problématiques en quelques jours, puis cela nous a permis de commencer le wireframing, et enfin d’appliquer le design system sur les maquettes et les prototyper.
Intervention sur la plateforme existante 🚧
Problématiques
✅
Besoin de créer un outil permettant l’intégration de contenus variés (exercices interactifs, images, fichiers audio ou vidéo..)
✅
Besoin d’adapter l’expérience utilisateur au persona Professeur, expliciter les fonctionnalités sans les limiter
✅
Besoin de conserver une cohérence avec les éléments graphiques mis en place précédemment
Méthodologie
Design sprint
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.
Prototypage des interactions
Le prototypage des interactions donne vie à l'interface et simule l'expérience utilisateur de manière concrète. Cela nous a permis de tester les interactions, les transitions et les fonctionnalités, avant le développement. Ces prototypes offraient une vision réaliste de l'expérience que les utilisateurs auront avec la plateforme finale.
