Remplacer un lanceur Android par un tableau de bord web

En 2020, j’ai dirigé la conception de Connect, un tableau de bord web destiné à remplacer le lanceur Android d’UNOWHY, et de La Bulle, une interface flottante qui l’accompagnait. Le prototype n’a pas été lancé comme produit. Il a convaincu la direction de changer de stratégie et a ouvert la voie à la suite SQOOL.

Rôle: Product Design Lead
Périmètre: Stratégie UX, design UI, prototypage
Entreprise: UNOWHY

Voir la galerie

Synthèse

Contexte: Le lanceur Android d’UNOWHY était dépassé sur le plan technique comme visuel, et l’essor des usages numériques pendant la COVID-19 rendait son remplacement urgent. Il ne correspondait plus aux pratiques des lycées, qui entraient dans le Plan Lycée Numérique. Connect était la preuve de concept d’un tableau de bord web pour les enseignants, dans un programme qui a équipé 465 établissements et 500 000 élèves en Île-de-France.
Mon rôle: Product Design Lead. J’ai initié la vision de Connect avec le Head of Product, co-rédigé le PRD et conçu toutes les interfaces. J’ai travaillé chaque jour avec un développeur React pour construire un prototype fonctionnel, présenté à la direction.
Product Design LeadStratégie UX et design UI
VisionCo-auteur du PRD
PrototypeDémo React fonctionnelle
Langage visuelBase du design system
AlignementDéveloppeur et direction
Réalisations et livrables: Tableau de bord enseignant
Actions rapides, état de la classe, catalogue d’applications et notifications, en thèmes clair et sombre.
Catalogue d’applications
Accès recherchable et filtré aux applications éducatives, relié aux politiques MDM.
La Bulle
Interface flottante de raccourcis contextuels, avec wireframes, icônes et spécifications de comportement.
Architecture technique
Raccordement du tableau de bord web à l’infrastructure Android existante.
Spécifications
Spécifications d’implémentation et de contenu, et chorégraphie de chargement des applications.
Langage visuel
Composants et style devenus la base du design system SQOOL.

Un lanceur à remplacer, une direction à choisir

Le lanceur Android servait de porte d’entrée aux élèves, mais il ne suivait plus les versions d’Android ni les usages des établissements. Le remplacer revenait à choisir une direction pour toutes les applications qui s’y rattachaient, sans preuve qu’une approche web tienne sur les tablettes déjà déployées. L’enjeu portait autant sur la décision que sur l’interface : produire de quoi trancher.

Quatre objectifs à prouver en même temps

Un tableau de bord modulaireDes blocs (actions rapides, état de la classe, catalogue) que l’enseignant peut personnaliser et réorganiser.
Une performance web crédibleUn tableau de bord dense qui charge vite et de façon fiable dans un navigateur, sur le matériel déjà déployé.
Des notifications lisiblesLes demandes d’élèves et les contenus partagés remontent par ordre d’importance, sans distraire.
Un seul point d’entréeLes applications et les outils de pilotage de la classe réunis dans une même vue.

Prouver par un prototype plutôt que par un document

Un design sprint qui part de l’enseignant

J’ai lancé un design sprint stratégique, mené à distance sur Miro et Figma, autour d’une question : comment faciliter l’appropriation du numérique en classe pour l’enseignant ? Le prototype a été testé avec des enseignants et des collaborateurs d’UNOWHY, et les résultats ont été consignés dans une grille de synthèse. Un sprint donne en quelques jours un retour d’utilisateurs sur une hypothèse, là où la documentation seule en demanderait des mois.

Méthode du sprint · Les étapes d’esquisse et de décision, menées à distance.

Vote sur les esquisses · Vote à distance sur un tableau Miro.

Wireframe de l’écran d’accueil · Première organisation de l’accueil de Connect : actions rapides, espace de classe, actualités.

Écrans du prototype dans Figma · Écrans préparés pour les séances de test.

Prototype cliquable · La version testée avec des enseignants et des collaborateurs d’UNOWHY.

Grille de synthèse des tests · Résultats des séances de test, enseignants et collaborateurs d’UNOWHY.

Un prototype React plutôt que des maquettes

Avec un développeur, j’ai construit le tableau de bord en React, sur une grille modulaire (React Grid Layout) qui accueille des applications dans des iframes. Des maquettes ne pouvaient pas montrer si des blocs réorganisables chargent vite sur une tablette. Un prototype fonctionnel le pouvait, et c’est lui qui a été présenté à la direction.

Prototype fonctionnel du tableau de bord · Parcours complet du tableau de bord modulaire.

Les trois gestes les plus fréquents au premier plan

Sur l’écran d’accueil, la zone principale reçoit ce que l’enseignant répète le plus : démarrer une séance, partager un document, verrouiller les appareils. L’état de la classe, le catalogue d’applications et les notifications s’organisent autour, en thèmes clair et sombre (le sombre pour la projection en classe). Les notifications sont hiérarchisées pour signaler l’important sans distraire.

Accueil du tableau de bord, thème sombre · Actions rapides et état de la classe, sur tablette et téléphone.

Accueil du tableau de bord, thème clair · Variante claire pour d’autres conditions d’éclairage.

Catalogue d’applications · Parcourir, filtrer et lancer les applications éducatives.

La Bulle, un accès permanent au-dessus d’Android

En parallèle du tableau de bord, j’ai exploré La Bulle, un module flottant qui reste visible au-dessus de l’interface Android. Inspirée des surcouches de jeu vidéo et des menus de stylet (les raccourcis radiaux des Galaxy Note), elle ouvre un menu radial ou vertical avec des raccourcis contextuels : recherche, capture d’écran, partage. L’idée était de donner un accès permanent aux actions fréquentes sans quitter l’application en cours. J’ai spécifié ses états d’animation, ses cas limites et son intégration au système.

La Bulle : démonstration complète · Raccourcis, recherche et partage en mouvement.

La Bulle : wireframes · Première exploration du modèle d’interaction.

La Bulle : menu déployé · Le menu ouvert, avec ses actions rapides.

La Bulle : comportement (1) · États d’animation et modes d’interaction.

La Bulle : comportement (2) · Cas limites et intégration au système.

Des livrables que l’équipe pouvait juger

Le prototype reposait sur une architecture qui devait cohabiter avec l’infrastructure Android existante, et le schéma montre comment le tableau de bord web s’y raccorde. J’ai rédigé les spécifications d’implémentation et de contenu pour le développeur React, avec la chorégraphie de chargement des applications. Le langage visuel posé ici (couleurs, typographie, espacements) est devenu la base du design system de la suite SQOOL.

Architecture technique · Raccordement du tableau de bord web à l’infrastructure Android.

Spécifications d’implémentation · Structure des composants et états d’interaction pour le développeur.

Spécifications de contenu · Textes et règles de contenu de l’interface.

Chorégraphie de chargement d’une application · Spécification d’animation de la transition de lancement.

Langage visuel et composants · Palette, échelle typographique et composants de Connect.

Ce que Connect a changé

Connect n’a jamais été lancé comme produit unique, et il n’a été testé qu’en interne, pendant un an. Il a pourtant servi de preuve : React et une approche web modulaire tenaient sur les tablettes existantes, et le prototype a convaincu la direction.

Il a aussi montré les limites de l’idée. Un tableau de bord qui réunit tout devenait dense pour les enseignants, et il aurait concurrencé directement les ENT (espaces numériques de travail) que les établissements utilisaient déjà. Ce constat a conduit à découper la plateforme en applications ciblées, ce que raconte l’étude de la suite SQOOL.

Lire l’étude de la suite SQOOL Voir tous les visuels

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.

Contact LinkedIn

Remplacer un lanceur Android par un tableau de bord web

Synthèse

Un lanceur à remplacer, une direction à choisir

Quatre objectifs à prouver en même temps

Prouver par un prototype plutôt que par un document

Un design sprint qui part de l’enseignant

Un prototype React plutôt que des maquettes

Les trois gestes les plus fréquents au premier plan

La Bulle, un accès permanent au-dessus d’Android

Des livrables que l’équipe pouvait juger

Ce que Connect a changé

SQOOL Suite (UNOWHY)

Tessan

Toolkit

Remplacer un lanceur Android par un tableau de bord web

Synthèse

Un lanceur à remplacer, une direction à choisir

Quatre objectifs à prouver en même temps

Prouver par un prototype plutôt que par un document

Un design sprint qui part de l’enseignant

Un prototype React plutôt que des maquettes

Les trois gestes les plus fréquents au premier plan

La Bulle, un accès permanent au-dessus d’Android

Des livrables que l’équipe pouvait juger

Ce que Connect a changé

Synthèse

Un lanceur à remplacer, une direction à choisir

Quatre objectifs à prouver en même temps

Prouver par un prototype plutôt que par un document

Un design sprint qui part de l’enseignant

Un prototype React plutôt que des maquettes

Les trois gestes les plus fréquents au premier plan

La Bulle, un accès permanent au-dessus d’Android

Des livrables que l’équipe pouvait juger

Ce que Connect a changé

Pour continuer

SQOOL Suite (UNOWHY)

Tessan

Toolkit

Synthèse

Un lanceur à remplacer, une direction à choisir

Quatre objectifs à prouver en même temps

Prouver par un prototype plutôt que par un document

Un design sprint qui part de l’enseignant

Un prototype React plutôt que des maquettes

Les trois gestes les plus fréquents au premier plan

La Bulle, un accès permanent au-dessus d’Android

Des livrables que l’équipe pouvait juger

Ce que Connect a changé