Refonte application mobile
Educ-AR
| 2025 | Refonte d'une application ludo-éducative
Projet de refonte UX/UI d’une application éducative en réalité augmentée dédiée à l’océan.
Partant de mes premiers rôles de cheffe de projet et designer graphique, cette refonte a marqué une évolution vers une approche pleinement centrée sur l’UX.
Démarche :
• analyse des retours utilisateurs (enseignants) pour identifier les points de friction,
• refonte de l’architecture de l’information pour clarifier les parcours,
• amélioration de l’interface visuelle et de l’accessibilité afin d’offrir une expérience plus fluide, engageante et inclusive.
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