UX Design · UI Design · Application Mobile

DOT —
L'expérience
scolaire
réinventée

Contexte
Stage — Grafen
Durée
2 mois — 2026
Plateforme
Mobile iOS/Android
Outils
Figma · Discord

Mockup principal — Vue d'ensemble de l'app DOT

Le problème

Les outils de gestion scolaire actuels — Hyperplanning, Pronote — souffrent d'une dette visuelle importante, de parcours utilisateurs mal construits et d'un système de notation obsolète. Les notes sur 20 masquent les vraies lacunes : un 16/20 peut cacher une compétence à 0 %, sans que l'étudiant s'en rende compte.

Mon maître de stage, enseignant et designer freelance, a initié le projet DOT pour repenser cette expérience de A à Z. Il m'a confié l'entière responsabilité de la partie élèves.

La recherche UX

Pour concevoir une interface pertinente, j'ai croisé deux profils utilisateurs distincts via des fiches personas :

La solution retenue : remplacer la note brute par un pourcentage de compétences. La note sur 20 reste visible en second plan, mais l'accent est mis sur le taux de maîtrise de chaque bloc de compétences — transformant l'évaluation en outil pédagogique constructif.

Les écrans conçus

La navigation repose sur une bottom navigation bar (Accueil, Devoirs, Messages, Profil) et un menu burger pour les sections secondaires. Six espaces principaux ont été conçus :

🏠
Dashboard
Widgets dynamiques (prochain contrôle, derniers résultats en %) + fil de la journée en cours.
📊
Matières & Notes
3 niveaux de lecture : liste des matières → détail des contrôles → restitution des compétences.
📅
Calendrier
3 vues modulaires (Jour / Semaine / Mois) avec switch d'affichage et légende chromatique par matière.
🎯
Objectifs
L'élève se fixe des défis ou reçoit ceux de ses profs, avec suivi de progression et historique des accomplissements.
💬
Messagerie
Interface de chat moderne avec filtres rapides, suggestions contextuelles et partage de fichiers intégré.
🎮
Quiz & Gamification
Défi journalier, index des matières, lobby de lancement et interface de jeu avec timer visuel.

Direction artistique

L'interface repose sur un fond gris très clair qui fait ressortir des blocs aux couleurs vives (violet, orange, bleu, vert) — chaque matière possède son identité colorielle pour créer des repères visuels instantanés. Un trio typographique structure les niveaux de lecture : Montserrat Alternates pour les titres, IBM Plex Mono pour les données chiffrées, Poppins pour les textes courants.

Ce que j'ai appris

Ce stage m'a confronté à la rigueur d'un projet professionnel réel : organisation des fichiers Figma, composants et variantes, collaboration à distance via appels quotidiens. J'ai appris à défendre mes choix UI par des arguments rationnels tout en restant ouvert à la critique constructive — un équilibre que je considère aujourd'hui comme fondamental dans la pratique du design.

← Retour
Tous les projets
Projet suivant →
À venir