Refonte application mobile
Educ-AR
| 2025 | Refonte d'une application ludo-éducative
Edu-AR, une application dont l’objectif initial était de fournir une expérience éducative engageante sur l’océan en réalité augmentée.
Ce projet présente ma démarche de refonte de l’application, évoluant de mes rôles initiaux de cheffe de projet, designer graphique et ingénieure pédagogique vers une approche centrée sur l’UX/UI Designer.
L’objectif principal était de résoudre les points de friction identifiés par les retours des enseignants, en repensant l’architecture de l’information, le design visuel et l’accessibilité pour une expérience utilisateur améliorée.
Projet initial
Design Process
Le problème
• Texte trop long et inadapté à la cible collégienne.
• Manque de clarté du code couleur avec un besoin urgent d'une couleur de contraste pour améliorer la lisibilité.
• Icônes et Call-To-Actions (CTA) de qualité insuffisante, manquant de netteté et de professionnalisme.
• Grille de mise en page mal calculée, entraînant un manque d'harmonie et de structure visuelle.
La solution
• Réduction et simplification du texte pour une meilleure compréhension par les collégiens.
• Introduction d'un code couleur clair et contrasté pour guider l'utilisateur et mettre en évidence les éléments importants.
• Refonte des icônes et CTA pour un design plus propre, qualitatif et engageant.
• Mise en place d'une grille de mise en page cohérente et bien structurée pour améliorer l'organisation visuelle et l'harmonie de l'interface.
Parcours utilisateur
Wireframes
Style guide
Couleurs & Typeface
La palette de couleurs d'Educ-AR s'inspire d'une ambiance océanique. Le bleu profond de la couleur primaire évoque les fonds marins, tandis que les nuances plus vives du bleu secondaire rappellent la surface de l'océan. La couleur d'accent rouge corail apporte une touche vibrante, évoquant la richesse des récifs. Stratégiquement utilisée pour les éléments interactifs et les appels à l'action, elle assure une visibilité claire et un contraste efficace au sein de l'interface.
L’application Educ-AR utilise Titillium Web pour ses titres, une police sans empattement au style affirmé, idéale pour structurer l’information visuellement. Le corps de texte est en Roboto, choisie pour sa lisibilité à l’écran et son style moderne, assurant un confort optimal de lecture.
La refonte
-
Cette dernière partie du projet met en lumière les écrans clés de la nouvelle interface de l’application Edu-AR. Pensée pour des collégiens et construite à partir de retours utilisateurs concrets, cette refonte graphique et fonctionnelle vise à clarifier les parcours, renforcer la lisibilité et favoriser l’engagement. Chaque élément – de la grille à la typographie en passant par les couleurs et les icônes – a été repensé pour proposer une expérience plus structurée, intuitive et accessible.
Un soin particulier a été porté à l’expérience du mode quiz, initialement jugée trop dense visuellement. Désormais, chaque question bénéficie d’une hiérarchie claire, d’un design épuré et de contrastes nets pour améliorer la compréhension. L’accent est mis sur la lisibilité, la réduction de la charge cognitive et une navigation plus fluide, afin de favoriser l’apprentissage sans distraction.
Introduction
Ancienne UI
Mode 1 : Découvre l’Océan Atlantique
Ancienne UI
Mode 2 : Préserve l’Océan Atlantique
Ancienne UI