MaPrep d’ÊtrePROF

MaPrep est un outil d'intelligence artificielle imaginé par la communauté ÊtrePROF et mis à disposition des enseignants pour les accompagner dans la préparation de leurs devoirs et activités.

Services

Produit / App

Domaine

EdTech

Année

2025

Lien

maprep.etreprof.fr

(accès restreint)

Mockup de l'interface de MaPrep d'ÊtrePROF (desktop)

Challenge

Le projet devait aboutir à une interface complète en une semaine, sans entretiens utilisateurs préalables. La conception s'est appuyée uniquement sur les besoins exprimés par le client. L'enjeu était de regrouper un ensemble de paramètres de filtrage complexes en un minimum d'écrans, tout en livrant une proposition à la fois UX et UI dans ce délai.

Modales du parcours de création de compte en 3 étapes avec le texte "Un accompagnement des enseignants à chaque étape"

Stratégie

Pour absorber la contrainte de temps, le projet a été construit à partir d'un fichier Figma de base personnel, réunissant composants atomiques et styles variables déjà configurés. Cette base a rendu possible la livraison d'une proposition UI finalisée en parallèle de l'UX. Lors d'un entretien client, il a été suggéré de ne pas reprendre les typographies serif du site ÊtrePROF, pour donner à l'outil un aspect plus moderne et technologique. La suggestion a été acceptée, et le violet de la charte existante a été conservé comme seul ancrage visuel.

Modales du profil de l'enseignant permettant de renseigner les options de sa classe, avec le texte "Paramétrages prenant en compte les spécificités de chaque classe"

Solution

L'interface se concentre sur trois temps : le parcours de connexion via les identifiants ÊtrePROF existants, un onboarding guidant l'enseignant sur la génération de sa première séance, puis l'outil principal. Une colonne rétractable regroupe filtres, historique des séances, création de nouvelle séance et accès au profil, tout en maintenant la conversation active quelle que soit la page consultée. Des annotations techniques ont été intégrées directement dans la maquette pour préciser le comportement des composants aux développeurs, une démarche proche de ce que Figma a depuis formalisé avec son propre système d'annotations.

Présentation de l'UX de la barre de recherche avec la phrase "Une navigation simple avec des options riches"

Résultat

La proposition a été bien reçue par le client dès la première présentation, les retours se limitant à des ajustements textuels. L'organisation du fichier Figma, les prototypes interactifs et les annotations ont facilité la prise en main par l'équipe de développement sans intervention supplémentaire.