SQOOL Connect

Product Design Lead-Stratégie UX, Design UI, Prototypage-2020-2021

Un concept de dashboard web et prototype d'interaction persistante pour l'orchestration de classe

Remplacer un launcher Android obsolète par des interfaces modernes et modulaires

En 2020, le launcher Android d'UNOWHY était de plus en plus difficile à maintenir et faire évoluer. Le launcher servait d'interface principale aux élèves pour accéder au contenu, mais il était devenu obsolète et insoutenable sur les nouveaux systèmes Android. Nous avons imaginé Connect comme un dashboard web moderne pour remplacer le launcher pour les enseignants et les élèves, offrant un accès modulaire aux applications, aux outils de session et aux notifications. En parallèle, nous avons conceptualisé "La Bulle", un prototype d'UI contextuelle persistante flottant au-dessus de l'UI Android, offrant des interactions rapides et intelligentes.

SQOOL Connect Overview
Vue d'ensemble Connect - Concept de dashboard web pour l'orchestration de classe.

Vue d'ensemble


Introduction

Entre 2020 et 2021, l'entreprise EdTech française UNOWHY faisait face à un tournant. Son launcher Android de longue date avait atteint l'obsolescence technique et conceptuelle. Construit à l'origine pour les écoles primaires et collèges, le launcher offrait une flexibilité limitée et une expérience utilisateur qui ne reflétait plus les pratiques pédagogiques modernes, notamment pour les lycées entrant dans l'ambitieux Plan Lycée Numérique de la France. À ce moment critique, j'ai dirigé la conception d'une plateforme proof-of-concept que nous avons appelée Connect : une interface dashboard web intégrée réunissant le contrôle de classe, l'onboarding, l'accès aux applications et l'expérimentation d'UI persistante. Son objectif n'était pas d'être livrée telle quelle, mais plutôt de cristalliser une vision pour l'avenir des interfaces éducatives chez UNOWHY et de fournir une plateforme d'expérimentation tangible.

Objectifs

  • - Remplacer le launcher Android obsolète par une alternative web-first et modulaire
  • - Centraliser les fonctionnalités de pilotage de classe dans une interface
  • - Offrir store d'applications, onboarding, notifications et recherche
  • - Fournir un système UI simple et extensible pouvant évoluer vers de futurs outils
  • - Expérimenter de nouveaux paradigmes d'interaction (ex: modules persistants comme "la Bulle")

Rôle et périmètre

Product Design Lead (stratégie UX, design UI, prototypage, design d'interaction). Initiateur et co-auteur de la vision projet et du modèle d'interaction. Concepteur et présentateur de prototypes motion, flows d'interaction et specs. Contributeur au PRD et aux flows d'onboarding. Conception de tous les systèmes UI core : grille d'apps, actions rapides, notifications, modales. Collaboration quotidienne avec notre développeur React pour façonner le prototype dashboard.


Le Dashboard : Un nouveau point de départ

Le cœur de Connect était une interface dashboard modulaire. Inspirée des systèmes d'exploitation desktop, elle permettait aux enseignants d'accéder à des actions rapides (verrouiller les écrans, partager des fichiers, ouvrir des apps à distance), visualiser le statut de la classe (qui est connecté, santé des appareils, participation), parcourir et lancer des apps depuis un catalogue personnalisé, et recevoir et gérer des notifications comme les soumissions de travaux ou les événements de session.

Dashboard accueil (mode sombre)
Dashboard accueil (mode sombre) - Interface dashboard principale montrant les actions rapides et la vue d'ensemble du statut de classe avec thème sombre optimisé pour la projection en classe.
Dashboard accueil (mode clair)
Dashboard accueil (mode clair) - Variante thème clair pour différentes conditions d'éclairage et préférences utilisateur.
Dashboard applications
Dashboard applications - Interface catalogue d'apps permettant aux enseignants de parcourir, organiser et déployer des applications sur les appareils élèves.
Flux connexion & authentification - Étude d'authentification utilisateur montrant le flux de login et la chorégraphie de lancement d'app.
Prototype dashboard complet - Walkthrough d'interaction complet démontrant les capacités modulaires du dashboard et son comportement responsive.
Architecture technique
Architecture technique - Vue d'ensemble système montrant comment le dashboard web s'intègre avec l'infrastructure Android existante.
Spécifications d'implémentation
Spécifications d'implémentation - Spécifications détaillées pour le handoff développeur, incluant structure des composants et états d'interaction.
Spécifications de contenu
Spécifications de contenu - Documentation stratégie de contenu pour les éléments d'interface du dashboard.
Chorégraphie de chargement d'app - Spécifications d'animation pour des transitions de lancement d'app fluides.

La Bulle - Une expérimentation guidée par la vision

L'une des explorations les plus audacieuses était "la Bulle" : un module UI flottant et persistant inspiré des overlays gaming ou des menus stylus (ex: raccourcis radiaux du Samsung Galaxy Note). Nous l'imaginions comme une présence visuelle sur les tablettes élèves, une bulle riche en motion ouvrant un menu radial ou vertical, et un assistant contextuel offrant raccourcis, recherche, capture et partage.

Concept wireframes UI
Concept wireframes UI - Exploration initiale du modèle d'interaction de la bulle, montrant les patterns de menu radial et actions contextuelles.
Vue UI Focus
Vue UI Focus - Vue détaillée de l'état étendu de la bulle avec toutes les actions rapides disponibles.
Système d'icônes
Système d'icônes - Set d'icônes personnalisé conçu pour le menu contextuel de la bulle, optimisé pour les zones de touch et la reconnaissance rapide.
Documentation comportement (1)
Documentation comportement (1) - Spécifications pour les états d'animation de la bulle et les patterns d'interaction utilisateur.
Documentation comportement (2)
Documentation comportement (2) - Spécifications comportement additionnelles couvrant les cas limites et l'intégration système.
Démonstration d'interaction - Prototype motion montrant l'animation d'ouverture de la bulle et les interactions menu.
Interactions de la bulle - Démonstration complète des capacités de la bulle incluant raccourcis, recherche et fonctionnalités de partage.