← Retour au portfolio
UX Académique · Prototypage

Les Bambinets

Une application mobile pour apprendre la langue des signes aux tout-petits — conception d'un PMV complet, du brief client au prototype haute-fidélité en HTML/CSS natif.

RôleUX Designer (agence fictive «En avant les babies !»)
MissionLes Bambinets — brief, wireframes, prototype Hi-Fi
SoutenanceSoutenance 9
Statut✅ Validé
01 Contexte02 Démarche03 Résultats04 Compétences

01 · Contexte

La crèche «Les Bambinets» sollicite l'agence pour une application mobile sur le vocabulaire de la langue des signes — destinée aux parents et professionnels de la petite enfance, pour mieux communiquer avec des bébés dont le langage verbal n'est pas encore structuré. Glossaire de signes, microquiz et FAQ, avec la vidéo comme médium central.

Deux profils, deux usages

👨‍👶 Lucas, 31 ans — Parent

Veut apprendre 5 à 10 signes essentiels du quotidien, en sessions courtes (5-10 min), sans complexité.

👩‍⚕️ Marie, 34 ans — Éducatrice

Veut intégrer des signes dans ses routines de soin — usage régulier, hors présence des enfants (l'arrêté du 27 juin 2025 interdit l'exposition aux écrans des moins de 3 ans en crèche).

Fonctionnalités priorisées (MoSCoW)

Glossaire de signes🔴 Must have

~20 mots signes, filtrables par catégorie

Fiche signe🔴 Must have

Vidéo + description + astuce pédagogique

Microquiz🔴 Must have

Questions vidéo/image, score et correction

FAQ🟡 Should have

Contenu éditorial sur les signes avec bébé

Favoris🟡 Should have

Bibliothèque personnelle, stockage local V1

Contraintes fortes du projet

📖 Droits d'auteur — contenu du glossaire issu du livre de Sophie D'olce (éd. First), accord requis avant tout tournage
🚫 Arrêté du 27 juin 2025 — écrans interdits devant les moins de 3 ans en crèche, l'app est repositionnée comme outil pour l'adulte
🔒 RGPD — favoris et progression sont des données personnelles, conformité CNIL et privacy by design dès la V1
EAA / WCAG 2.1 AA — conformité accessibilité obligatoire depuis juin 2025

02 · Démarche

Un brief UX complet avant tout wireframe : reformulation du besoin, personas, priorisation des fonctionnalités, 4 parcours utilisateurs clés (Glossaire, Quiz, FAQ, Favoris), puis une roadmap de développement sur 17 semaines associant chef de projet, juriste, DPD, équipe vidéo, UI et développeurs mobile.

Wireframes Lo-Fi → prototype Hi-Fi

Construction de wireframes basse fidélité (v1 puis v2), puis un prototype interactif en HTML/CSS natif avec états (hover, focus, actif) et micro-animations — pour anticiper dès la conception les contraintes réelles d'intégration plutôt que de les découvrir en développement.

03 · Résultats

Le prototype final compte 11 écrans (Accueil, Glossaire, Glossaire détails, Filtre, Quizz, Quizz détails, Quizz résultat, FAQ, Favoris, Compte, Log in), construits en deux versions parallèles : un prototype Hi-Fi interactif et une itération Wireframes V2. Chaque fonctionnalité clé (Glossaire, Quiz, Favoris, FAQ) dispose de son propre flowchart détaillé, en plus d'un flowchart global. Les wireframes reprennent fidèlement le cahier des charges : vues listes, filtres, ajout aux favoris.

Le parti pris technique — un prototype Hi-Fi construit directement en HTML/CSS natif plutôt qu'en outil de maquettage classique — vise à résoudre les contraintes techniques dès la conception (lecteur vidéo, états interactifs, accessibilité WCAG) plutôt que de les découvrir en intégration.

04 · Compétences

Ce projet a mobilisé la chaîne complète d'un brief UX jusqu'au prototype interactif, avec une forte dimension de cadrage réglementaire (RGPD, accessibilité, droits d'auteur).

• Rédaction d'un brief UX complet (personas, priorisation MoSCoW)
• Cartographie de 4 parcours utilisateurs
• Intégration de contraintes réglementaires (RGPD, EAA/WCAG, droits d'auteur)
• Roadmap de développement multi-équipes (17 semaines)
• Wireframing basse fidélité (v1 et v2)
• Prototypage Hi-Fi en HTML/CSS natif
• Gestion des états et micro-animations

✅ Soutenance 9 — Validée

« Le brief UX a bien été complété avec les différentes parties attendues : contraintes du projet, spécifications fonctionnelles, expertises attendues. Les wireframes reprennent bien les éléments attendus du cahier des charges (vues listes, filtres, ajout aux favoris). Le prototype a bien été réalisé avec les couleurs et charte graphique attendues, tous les écrans sont interactifs. » Point d'amélioration suggéré : mieux mettre en avant les contraintes d'accessibilité. Sur la soutenance : « Bonne soutenance claire et précise, bonnes réponses aux questions avec indications des opportunités et nouvelles fonctions. » : présentation du brief et de l'évolution wireframes → prototype (15 min), discussion en jeu de rôle avec l'évaluateur incarnant Nina, la manager (10 min), debrief (5 min).

Martin Lanrezac — Formation UX Design, OpenClassrooms. Soutenance 9 : Les Bambinets.