Refonte de la plateforme — site web, choix de l’enseignant et espaces
Un nouveau site et un nouvel espace pour des cours de langues en direct, bâtis autour de trois questions courtes qui mènent l’apprenant au bon professeur.
Entreprise
OTeacher
Rôle
Designer produit
Période
2023
Type
Produit
Secteur
Edtech · cours de langues en ligne et en direct
Équipe
Le pôle produit : Sina et la personne responsable du produit
L’ancien site était encombré, enfermait la réservation dans une fenêtre pop-up et n’offrait aux apprenants aucun moyen clair de choisir un professeur, tandis que les professeurs manquaient d’outils pour gérer leurs cours. La stratégie demandait un nouveau site et un nouvel espace.
Le rôle
Le design produit était entre les mains de Sina, avec la personne responsable du produit : l’audit de l’ancien site, la structure et les parcours, le site, la réservation, les espaces apprenant, professeur et administration, le système de design et le test d’utilisabilité.
Le résultat
Lancé en 2023. Trois ans plus tard, oteacher.org repose toujours sur ces fondations, choix du professeur en trois étapes compris.
Figure 01
Figure 01La page d’accueil sur téléphone et son choix de l’enseignant en trois étapes.
01Contexte
D’une stratégie à un produit que les gens utilisent
OTeacher est une place de marché iranienne de cours de langues en ligne et en direct : les apprenants choisissent un professeur, commencent souvent par un cours d’essai, puis réservent. La stratégie élaborée par Sina avec la personne responsable du produit a abouti à une feuille de route portant deux initiatives produit : un nouveau site et un nouvel espace. La stratégie a sa propre étude de cas ; celle-ci suit le design.
Le produit est en persan, ses écrans se lisent donc de droite à gauche. Les légendes expliquent ce que montre chaque écran.
02Problème
Ce qui n’allait pas dans l’ancien site
Les entretiens de la stratégie avaient déjà nommé ce qui manquait à chaque côté. Les apprenants voulaient un professeur adapté à leur objectif et trouvaient le parcours d’apprentissage flou ; les professeurs voulaient de meilleurs outils pour enseigner, et plus de revenus.
En février 2023, Sina a audité l’ancien oteacher.org écran par écran, 69 écrans au total, en classant chaque problème : visuel, structure, produit ou texte. Les principaux :
La page d’accueil était encombrée et répétait le même appel à l’action.
Choisir un objectif d’apprentissage ne limitait pas les résultats à cet objectif.
La réservation, l’étape la plus importante, tenait dans une fenêtre pop-up.
Les pages intérieures n’avaient ni fil d’Ariane ni moyen de revenir en arrière.
Les questions fréquentes étaient dispersées sur de nombreuses pages au lieu d’une seule.
La plupart se situent à deux moments : choisir un professeur et réserver un cours. Les décisions ci-dessous partent de là.
Comment le travail s’est déroulé en 2023
01
AuditJanvier et février : un benchmark d’autres produits, puis l’audit écran par écran de l’ancien site et un plan de suivi des clics pour sa page d’accueil.
02
ConceptsFin février : cinq idées, puis 36 écrans de concept pour l’espace, le profil, la liste des professeurs et la page d’accueil. Les premières pièces du système de design sont venues avant.
03Structure
La structure avant les écrans
Sina a dessiné l’architecture de l’information de quatre zones : le site, l’espace apprenant, l’espace professeur et l’administration. Un gestionnaire de rôles donne à l’équipe trois niveaux d’accès, pour des rôles allant de la direction et de l’administration au support, aux opérations et à la finance.
Chaque fonctionnalité a ensuite reçu une courte spécification, liée à sa page Confluence pour les développeurs et suivie de « à relire » à « terminé ». La réservation, par exemple, a été spécifiée en six étapes : leçon, type de cours, date, heure, nombre de séances et paiement ; un cours collectif ajoute d’autres apprenants.
Les parcours principaux ont été dessinés sous forme de flux :
Un professeur candidate : informations, leçons, tranches d’âge et certificats, puis l’examen d’un expert et un entretien avant le premier cours.
Un apprenant rejoint un cours et y assiste.
Un cours est annulé : par l’apprenant, par le professeur, ou plusieurs séances à la fois.
Un utilisateur se connecte, et chaque rôle ne voit que ce qui lui est permis.
C’est ce flux de candidature qui explique pourquoi l’administration garde, pour chaque demande, le lien de l’entretien, l’heure et la personne qui le mène.
04Décisions clés
Cinq décisions derrière le design
Chacune répond à un problème relevé par l’audit ou les entretiens. Les chapitres suivants les montrent à l’écran.
01
Poser trois questions avant de montrer des professeurs
Les apprenants ne savaient pas quel professeur leur convenait, et l’ancienne page d’accueil était encombrée. Une langue, un objectif et un niveau resserrent la liste avant qu’elle ne s’ouvre.
Alternatives
Une liste de professeurs avec des filtres seulement. Elle reste à une étape pour qui préfère parcourir par soi-même.
Compromis
Une étape de plus avant le premier professeur, en échange d’une liste plus courte et mieux ciblée.
Preuves
Le choix du professeur figure toujours sur la page d’accueil d’oteacher.org.
05Choix du professeur
Trois questions avant une liste de professeurs
La page d’accueil pose trois questions courtes : quelle langue étrangère, dans quel but l’apprenant la veut (un entretien d’embauche, un usage général, l’oral ou la migration), et à quel niveau, du débutant à l’avancé. Les réponses mènent à une liste de professeurs suggérés pour cette langue.
La liste des professeurs garde la même logique sous forme de filtres : langue, objectif, cours d’essai, aujourd’hui, genre du professeur, date et moment de la journée. Sur téléphone, les filtres s’ouvrent en feuilles depuis le bas de l’écran. Un lien vers une consultation figure sur la liste pour les apprenants qui veulent de l’aide pour choisir, et un apprenant qui n’a pas encore de cours se voit proposer un professeur adapté depuis la liste de cours vide.
Trois réponses font le travail d’un long panneau de filtres, et la liste garde les filtres pour qui préfère parcourir par soi-même.
Ordinateur
Téléphone
Figure 02La recherche de professeur en trois étapes sur la page d’accueil, sur ordinateur et sur téléphone.
06Réservation
Parcourir librement, réserver sur des pages dédiées
La remarque la plus sévère de l’audit portait sur la réservation : l’ancien site l’enfermait dans une pop-up, alors qu’elle compte trop pour cela. Dans le nouveau design, la réservation a ses propres pages : une leçon, le type de cours et un forfait, un créneau dans le calendrier du professeur, puis la facture et le paiement. Un cours d’essai suit les mêmes étapes.
Sans compte, on peut voir les professeurs, les cours et les calendriers. L’invitation à s’inscrire, ou à compléter les informations manquantes, n’apparaît qu’au moment de réserver. Le succès et l’échec ont chacun leur propre écran.
Ne demander un compte qu’au moment de réserver laisse la première visite ouverte.
S’inscrire d’abord, puis réserver
07Calendrier
Un calendrier à huit récits
Le temps est ce qu’il y a de plus difficile à montrer dans une place de marché de cours, c’est pourquoi le calendrier du professeur part de récits utilisateur. Il y en a huit, et ensemble ils nomment les états que traverse un créneau : libre, sélectionné, réservable, réservé par un apprenant, prêt à être supprimé, en cours de réservation par quelqu’un d’autre et faisant partie d’une formation.
Les mêmes états se retrouvent dans le calendrier du professeur, dans celui qu’un apprenant voit sur le profil d’un professeur et dans les étapes de réservation, et le fuseau horaire est toujours affiché.
Les huit récits, traduits du persan :
Le professeur peut voir les créneaux libres de son calendrier.
Le professeur peut voir les créneaux qu’il a sélectionnés pour la réservation, avant que le système les enregistre comme réservables.
Le professeur peut voir les créneaux réservables de son calendrier.
Le professeur peut voir les créneaux enregistrés par un apprenant, et ne peut pas les supprimer.
Le professeur peut distinguer les créneaux réservables de ceux qu’un apprenant a enregistrés.
Le professeur peut supprimer de son calendrier les créneaux qu’il a ouverts à la réservation.
Le professeur ne peut pas choisir un créneau pour un cours pendant qu’une autre personne le réserve.
Le professeur peut seulement voir les créneaux réservés pour ses formations, sans pouvoir agir dessus.
Sept états en huit récits : le calendrier devait dire qui détient chaque heure, le professeur, un apprenant ou une formation.
Le calendrier du professeur
Figure 05Les huit récits utilisateur tels qu’ils ont été dessinés, en persan, chacun avec l’état qu’il ajoute.
08Professeurs
Les professeurs candidatent par étapes, puis gèrent eux-mêmes leurs cours
Devenir professeur prend cinq étapes : tranches d’âge, informations personnelles, cours à enseigner, pièces d’identité et diplômes, et un dernier écran qui attend l’heure de l’entretien. Chaque demande arrive ensuite dans l’administration avec le lien de l’entretien, l’heure et la personne qui le mène.
Une fois acceptés, les professeurs gèrent leur propre activité depuis leur espace : tarifs d’une séance et des forfaits, créneaux libres, cours, vidéo de présentation avec des conseils d’enregistrement, avis auxquels répondre et tableau de bord avec revenus et visites du profil. La spécification des tarifs prévoyait aussi un graphique du prix moyen fixé par les autres professeurs pour la même leçon.
Les professeurs fixent eux-mêmes leurs tarifs, leurs horaires et leurs cours : leur espace devait fonctionner comme l’outil d’une petite entreprise, pas seulement comme un profil.
En attente de l’entretien
09Système de design
Un seul système de design pour toutes les surfaces
La première version du système de design réunit 345 composants en 24 ensembles : couleur, typographie, champs de formulaire, boutons, fils d’Ariane, cases à cocher et boutons radio, interrupteurs, fenêtres modales, notifications brèves, blocs de profil, menu latéral, en-têtes et pieds de page pour utilisateurs connectés ou non en trois largeurs, icônes de marque, et modes clair et sombre.
Il est venu avant la plupart des pages, c’est pourquoi l’inscription, les étapes de réservation et les espaces se lisent comme un seul produit.
Couleur
10Itération
Cinq idées, puis deux tours de maquettes
Le travail a commencé large. Cinq idées pour le site ont donné 36 écrans de concept : trois des idées sont devenues sept versions de l’espace utilisateur, chacune avec le menu latéral ouvert et fermé, et le profil, la liste des professeurs et la page d’accueil ont reçu de quatre à six concepts chacun. L’espace final a gardé un menu blanc avec un repère bleu marine, comme dans la première idée.
Ensuite, la plupart des pages ont été dessinées deux fois. Le titre de la page d’accueil est passé d’apprendre une langue partout et tout le temps avec un professeur qu’on aime, à un cours avec le professeur de son choix, puis à un cours conçu autour de son besoin. L’inscription des professeurs a remplacé l’unique photo d’ordinateur par une illustration par étape, et son dernier écran est passé d’un accueil à l’attente de l’entretien. La page de connexion a troqué une ligne provisoire contre cinq promesses courtes.
Les trois versions du titre déplacent l’attention du professeur vers le besoin de l’apprenant.
Idée 1 : menu blanc
Premier jet : « Apprenez une langue partout, tout le temps, avec un professeur que vous aimez »
Avant
Après
Avant
Après
11Tests
Comment le design a été testé
Le design a été testé avec des utilisateurs. Un test d’utilisabilité modéré de la liste des professeurs a eu lieu en présentiel et à distance, sur un prototype Figma et sur UsabilityHub. Ses tâches : trouver un professeur, lui écrire, réserver un cours d’essai, et filtrer par horaire et par genre du professeur. Il a mesuré le temps par tâche, les erreurs, l’achèvement et la satisfaction, et un test de dix secondes a vérifié ce que les gens retenaient du premier écran.
Des cartes de chaleur de l’attention ont comparé l’ancien et le nouveau design sur cinq pages clés : la page d’accueil, la liste des professeurs, le profil d’un professeur, la liste des cours et le calendrier du professeur. La nouvelle page d’accueil est environ un quart plus courte que l’ancienne.
Pour l’ancien site, Sina avait aussi prévu un suivi des clics sur la page d’accueil, de l’appel à l’action principal à l’ordre des langues et aux liens de l’en-tête et du pied de page, pour voir quelles parties méritaient leur place.
12Espaces
Un espace pour les apprenants, une administration pour l’équipe
L’espace utilisateur regroupe tout ce qui suit la connexion : des cours avec des filtres (à venir, pas encore planifiés, en attente d’un statut, réalisés et annulés), un calendrier, un portefeuille avec solde, recharge et transactions, un rapport financier cours par cours, des messages, et un profil où l’apprenant fixe un objectif et un niveau. Un cours peut être noté, signalé ou annulé depuis une boîte de dialogue, et la liste des cours a un mode sombre.
L’administration est un ensemble plus restreint : une liste d’utilisateurs où chercher par ID, nom, e-mail et téléphone, des cours avec des filtres de type et de statut, et les demandes des professeurs. Son architecture de l’information figure sur la carte ci-dessous.
Cours
Les zones de l’administration et ce que chacune contient
01
Liste des utilisateurs
Recherche et filtre
Nom
Rôle
Rapports de cours
Rapports de paiement
Messagerie
Nom d’utilisateur
Réinitialiser le mot de passe
Activer ou désactiver des rôles
Modifier les informations
02
Gestion des remises
Créer une remise
Liste des remises
Montant
Part du professeur
Part d’OTeacher
Statut
13Résultats
Lancé, et toujours la base
Le nouveau site et le nouvel espace ont été lancés en 2023. Trois ans plus tard, oteacher.org repose toujours sur ces fondations, avec le choix du professeur en trois étapes sur sa page d’accueil, même si l’entreprise a modifié certaines sections depuis.
125 pages sur ordinateur et 95 écrans sur téléphone, chacun aussi dessiné en largeur tablette
Livrable
écrans de l’ancien site audités
69
Chaque problème classé visuel, structure, produit ou texte, en février 2023
Livrable
Ce qui a été livré
↳Le nouveau site
↳Le nouvel espace
14Mon rôle
La part de Sina
Tout le design est le travail de Sina, au poste de design produit, avec la personne responsable du produit.
Responsable
↳L’audit de l’ancien site, le benchmark et le plan de suivi des clics
↳L’architecture de l’information, les rôles utilisateurs et les parcours
↳La page d’accueil, la recherche de professeur en trois étapes, les pages des professeurs et des formations
↳La réservation, y compris le cours d’essai
↳L’inscription des professeurs et la connexion
↳L’espace utilisateur, les paramètres du professeur et le gestionnaire de formations
↳Le calendrier et ses récits utilisateur
↳L’administration
↳Le système de design et les concepts
↳Le test d’utilisabilité et les cartes de chaleur de l’attention
Coresponsable
↳La stratégie derrière ce design, avec la personne responsable du produit : les entretiens, les personas, le positionnement de marque et la feuille de route
15Ce que j’ai appris
Ce que je garderais, et ce que je changerais
01
Aller vite, du design d’interface à la stratégie produit
En un an environ, le travail est allé de la stratégie produit, élaborée avec la personne responsable du produit, à l’audit de l’ancien site, à la structure et aux parcours, à un système de design et à 220 écrans. La leçon que je retiens d’OTeacher : travailler très vite et abattre beaucoup de travail, du design d’interface à la stratégie du produit.
02
Mesurer le nouveau site dès le lancement
Le plan de suivi des clics couvrait l’ancienne page d’accueil. L’appliquer au nouveau site dès le premier jour aurait donné à la refonte un point de comparaison, et des chiffres à montrer ici.
03
Archiver les anciennes maquettes pour les développeurs
Les pages ont été dessinées deux fois, et les deux versions sont restées côte à côte. Déplacer les premiers jets dans une archive, et nommer chaque écran d’après sa page et son état, aurait montré tout de suite aux développeurs laquelle construire.
16Tous les écrans
Les 220 écrans, les concepts et le système de design
Les deux index ci-dessous réunissent chaque page et chaque état, en largeur ordinateur (1 440 pixels) et téléphone (360 points) : 125 pages et 95 écrans. Quand une page a été dessinée deux fois, seule la version finale est montrée, et la largeur tablette que chaque page possède aussi est laissée de côté. Suivent les 36 écrans de concept et les 17 planches du système de design.
Les deux index suivent un apprenant : trouver un professeur, réserver, se connecter, les pages d’information, puis l’espace utilisateur, les paramètres du professeur et, sur ordinateur, l’administration et les pages de destination. Les données personnelles des exemples, comme les numéros de téléphone, les adresses e-mail, les numéros bancaires et le nom d’un collègue, sont masquées par pixellisation.
StructureMars : l’architecture de l’information du site, des deux espaces et de l’administration, les rôles utilisateurs et les principaux parcours.
04
Premiers jetsLe site, la réservation, l’inscription et la connexion des professeurs, l’espace utilisateur et l’administration.
05
Le côté professeurLes réglages du professeur, les tarifs, la liste des cours et le calendrier pédagogique.
06
Deuxièmes jetsDe nouvelles versions de la page d’accueil, des réglages du professeur, de l’inscription, de la connexion et de la réservation.
07
Calendriers, cours et pages d’atterrissageLes récits utilisateur du calendrier, le gestionnaire de cours, les écrans d’aide et une page d’atterrissage IELTS sont venus en dernier.
02
Laisser parcourir sans compte, et donner à la réservation ses propres pages
L’ancien site enfermait la réservation dans une pop-up. Désormais les professeurs, les cours et les calendriers sont ouverts à tous, et le compte n’est demandé qu’au moment de réserver.
Alternatives
L’inscription dès la première visite, qui place un formulaire devant les professeurs.
Compromis
La réservation doit convenir aux nouveaux apprenants comme aux habitués, d’où deux invitations : s’inscrire d’abord, ou compléter d’abord ses informations.
Preuves
La réservation a ses propres pages, avec un écran de succès et un écran d’échec, pour les cours payants comme pour les cours d’essai.
03
Écrire d’abord le calendrier en récits utilisateur
Un créneau porte plus d’états que tout autre objet du produit. Écrire les récits d’abord a fait de chaque état une règle plutôt qu’une supposition.
Alternatives
Dessiner d’abord le calendrier et nommer ses états ensuite.
Compromis
Sept états à concevoir et à construire dès le départ, contre moins de surprises quand deux personnes veulent la même heure.
Preuves
Huit récits, réutilisés dans le calendrier du professeur, celui que voit l’apprenant et les étapes de réservation.
04
Faire candidater les professeurs par étapes, puis attendre un entretien
L’unité pédagogique de la stratégie voulait que chaque professeur passe un entretien selon une même norme. La candidature rassemble ce dont l’entretien a besoin, et l’administration garde le lien de l’entretien, l’heure et la personne qui le mène.
Alternatives
Une inscription ouverte, avec un contrôle de qualité seulement après les premiers cours.
Compromis
Un démarrage plus lent pour les nouveaux professeurs, en échange d’une liste de professeurs vérifiés.
Preuves
Cinq écrans d’inscription, le flux de candidature et une zone de demandes de professeurs dans l’administration.
05
Construire le système avant les pages
Un site, deux espaces, une administration et trois largeurs d’écran : un seul jeu de pièces coûtait moins cher que plusieurs.
Alternatives
Concevoir chaque surface séparément, puis les harmoniser plus tard.
Compromis
Du temps consacré aux pièces avant la première page, regagné chaque fois qu’un écran les réutilise.
Preuves
345 composants en 24 ensembles, partagés par le site, les espaces et l’administration.
Facture et paiement
Paiement échoué
Figure 03La réservation sur ordinateur : l’invitation à s’inscrire, qui n’apparaît qu’à ce moment, la facture et l’écran d’un paiement échoué.
Le calendrier sur le profil d’un professeur
Figure 04Les mêmes heures des deux côtés : le professeur ouvre des créneaux libres, et un apprenant en choisit un sur le profil du professeur.
Tarifs par leçon et par forfait
Tableau de bord avec une astuce de première visite
Figure 06Le côté professeur : la dernière étape de l’inscription, les tarifs par leçon et par forfait, et le tableau de bord à la première visite.
Boutons
Figure 07Deux ensembles du système de design : la couleur, et les boutons dans chacun de leurs états.
Idée 2 : menu bleu marine
Idée 2, troisième variante : menu bleu clair
Figure 08Trois des concepts de l’espace : le même contenu sous un menu blanc, bleu marine et bleu clair. L’espace final a gardé le blanc.
Deuxième jet : « Un cours avec le professeur de votre choix »
Version finale : « Un cours conçu autour de votre besoin »
Figure 09Le titre de la page d’accueil en trois versions.
Figure 10Inscription des professeurs, première étape, dans le premier jet et la version finale : l’unique photo d’ordinateur est devenue une illustration par étape.
Figure 11Connexion dans le premier jet et la version finale : une ligne provisoire est devenue cinq promesses courtes.
Portefeuille
Figure 12L’espace apprenant : les cours par statut, et le portefeuille.
03
Liste des professeurs · Liste des apprenants
Nom
Recherche et filtre
Rapports de cours
Rapports de paiement
Messagerie
Cours du professeur
Cours de l’apprenant
04
Rapports de cours · Rapports de paiement et financiers
Recherche et filtre
Type de rapport
Description
Statut du rapport
Liste des paiements
Cours réalisés
Cours d’inscription
Professeurs
Apprenants
Banques
05
Nous contacter
Recherche et filtre
Nom et prénom
E-mail
Mobile
Objet
Texte du message
Date
06
Messagerie
Texte du message
Fichier
Expéditeur
Statut, vu ou lu
Date de réception
Date d’envoi
07
Demandes de professeurs
Voir la demande
Informations du professeur
Pièces jointes
Certification
Leçons
Lien de l’entretien
Heure de l’entretien
Personne chargée de l’entretien
Statut
08
Gestion des sondages
Recherche et filtre dans les sondages
Résultats d’un sondage
Graphique
Créer un sondage
Statut
Collaboration
↳La personne responsable du produit, tout au long du travail, y compris pour les spécifications des retraits et des tarifs
Les packs d’icônes gratuits et les illustrations 3D dans les écrans proviennent de collections tierces. Les designs de référence, et les captures de l’ancien site et d’autres produits, sont laissés de côté.
Figure 13125 pages sur ordinateur, par zone. Ouvrez une page pour la voir en entier.
Figure 1495 écrans sur téléphone, par zone. Ouvrez un écran pour le voir en entier.
Figure 15Les écrans de concepts : 36 variantes de l’espace, du profil, de la liste des professeurs et de la page d’accueil.
Figure 16Les 17 planches du système de design. Ouvrez une planche pour la lire en entier.
