Schooltopia est une plateforme en ligne pour les \u00e9l\u00e8ves qui souhaitent apprendre et d\u00e9velopper leurs comp\u00e9tences en math\u00e9matiques.<\/p>\n\n\n\n
La plate-forme utilise la naration et des personnages hauts en couleurs pour engager les \u00e9tudiants \u00e0 participer aux le\u00e7ons.<\/p>\n\n\n\n
J’ai travaill\u00e9 pour Schooltopia en tant que principal designer d’interface & user research entre 2022 et 2023. J’ai beaucoup appris tout au long de ce projet, notamment en user recherche ou j’ai pu apporfondir mes connaissances par rapport \u00e0 mes exp\u00e9riences professionnelles pr\u00e9c\u00e9dentes.<\/p>\n\n\n\n
Opportunit\u00e9s et analyse concurrentielle<\/h3>\n\n\n\n
Il est tr\u00e8s facile de trouver des plateformes d’apprentissage en ligne. Et quelques-unes d’entre elles, ciblent les \u00e9l\u00e8ves de coll\u00e8ge comme Schooltopia. Mais avoir une histoire racont\u00e9e tout au long de la le\u00e7on grace \u00e0 une bande dessin\u00e9e en ligne, c’est vraiment unique \u00e0 notre plateforme. Cela change la dynamique du cours. L’empathie pour les personnages engage l’\u00e9l\u00e8ve \u00e0 l’exp\u00e9rience d’apprentissage. Il y a aussi une dimension temporelle, l’histoire contient un d\u00e9but et une fin qui doit \u00eatre suivie par les \u00e9l\u00e8ves. Cela aide \u00e0 donner du rythme aux le\u00e7ons. C’est pourquoi je me suis concentr\u00e9 sur l’aspect narratif tout au long de ce projet. <\/p>\n\n\n\n
Challenges<\/h3>\n\n\n\n
Le v\u00e9ritable d\u00e9fi auquel nous avons \u00e9t\u00e9 confront\u00e9 \u00e9tait de cr\u00e9er un contenu int\u00e9ressant et engageant pour l’\u00e9l\u00e8ve, tout en satisfaisant les besoins et la confiance que des parents attendent d’une platforme d’apprentisage en ligne. Avoir deux utilisateurs compl\u00e8tement diff\u00e9rents avec des attentes et des frustrations diff\u00e9rentes \u00e9tait un challenge stimulant pour moi.<\/p>\n\n\n\n
Entrevues, sondages & tests A\/B<\/h2>\n\n\n\n
Entrevues, sondages<\/h3>\n\n\n\n
J’ai men\u00e9 des entretiens avec des utilisateurs qui se sont abonn\u00e9s \u00e0 la version gratuite, ainsi que des utilisateurs qui se sont abonn\u00e9s \u00e0 la version payante de la plateforme, en utilisant le num\u00e9ro de t\u00e9l\u00e9phone qu’ils ont fourni lors de leur inscription.<\/p>\n\n\n\n
Objectifs<\/h5>\n\n\n\n
\n
Quels sont les points douloureux rencontr\u00e9s par les utilisateurs lors de la phase d’abonnement ?<\/li>\n\n\n\n
Est-ce qu’une information demand\u00e9e dans le formulaire d’inscription a-t-elle \u00e9t\u00e9 difficile \u00e0 remplir ?<\/li>\n\n\n\n
Dans quelle mesure les outils num\u00e9riques sont-ils d\u00e9j\u00e0 utilis\u00e9s pour apprendre au seins du foy\u00e9 ?<\/li>\n\n\n\n
Quel est le support qui est privil\u00e9gi\u00e9 pour apprendre en ligne ?<\/li>\n<\/ul>\n\n\n\n
tests A\/B<\/h3>\n\n\n\n
Nous avons \u00e9galement effectu\u00e9 des tests A\/B avec 4 variantes sur la landing page. Nous avons chang\u00e9 les images principales de la page ainsi que les couleurs des boutons (orange flashy et cyan)<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
R\u00e9sultats d’entretiens et d’enqu\u00eates<\/h5>\n\n\n\n
Nous avons r\u00e9alis\u00e9 qu’une grande partie de nos utilisateurs nouvellement abonn\u00e9s \u00e9taient en fait des \u00e9l\u00e8ves curieux de voir nos annonces en ligne. Ils se sont abonner pour pouvoir lire la bande dessin\u00e9e. Comme le parcours d’inscription et le formulaire \u00e9taient destin\u00e9s aux parents, ces \u00e9l\u00e8ves avaient du mal \u00e0 remplir le formulaire. Ils ont \u00e9galement \u00e9t\u00e9 effray\u00e9s par le plan payant qui avait \u00e9t\u00e9 mis en avant.<\/p>\n\n\n\n
En contactant les parents, nous avons \u00e9galement constat\u00e9 que certains d’entre eux avaient besoin d’\u00eatre rassur\u00e9s concernant la plateforme. Ils avaient besoin de tester les cours et de voir toutes les fonctionnalit\u00e9s avant de souscrire au forfait payant.<\/p>\n\n\n\n
Nous avons \u00e9galement pris contact avec des m\u00e8res qui \u00e9taient vraiment ravies d’avoir un \u00e9change par t\u00e9l\u00e9phone et nous ont propos\u00e9 de faire des avis en ligne sur la plateforme sur leur compte instagram. Cel\u00e0 c’est av\u00e9r\u00e9 \u00eatre une \u00e9norme opportunit\u00e9 marketing car elle pouvait toucher beaucoup de monde \u00e0 moindre co\u00fbt pour Schooltopia. Cela nous a aussi donn\u00e9 des atouts pour aider \u00e0 rassurer les parents.<\/p>\n\n\n\n
R\u00e9sultats des tests A\/B<\/h5>\n\n\n\n
La page d’accueil avec un visuel color\u00e9 et des personnages a tr\u00e8s bien fonctionn\u00e9 pour la conversion des \u00e9l\u00e8ves en inscriptions. La deuxi\u00e8me page qui \u00e9tait beaucoup plus s\u00e9rieuse et informative, convenait mieux aux parents.<\/p>\n\n\n\n
Le test des couleurs sur les boutons n’a apport\u00e9 aucune preuve de pr\u00e9f\u00e9rence de la part des utilisateurs. Nous avons donc d\u00e9cid\u00e9 d’opter pour le cyan qui a le potentiel de rassurer les utilisateurs.<\/p>\n\n\n\n
D\u00e9ductions<\/h3>\n\n\n\n
\u00c0 partir de ces constatations, nous avons d\u00e9cid\u00e9 de cr\u00e9er diff\u00e9rents itin\u00e9raires pour nos diff\u00e9rents utilisateurs.<\/p>\n\n\n\n
\n
Un parcours d\u00e9di\u00e9 aux parents, o\u00f9 nous nous sommes concentr\u00e9s \u00e0 rassurer les utilisateurs et \u00e0 leur montrer qu’ils peuvent faire confiance \u00e0 la plate-forme. Nous avons utilis\u00e9 les vid\u00e9os de mamans Instagrameuses dans cette intention, \u00e9tay\u00e9es par des informations concr\u00e8tes sur les cours.<\/li>\n\n\n\n
Le second parcours, destin\u00e9e aux \u00e9l\u00e8ves, repose davantage sur la mise en avant de la bande dessin\u00e9e. Nous nous sommes \u00e9galement d\u00e9barrass\u00e9s du choix de l’abonnement \u00e9tant donn\u00e9 que la plupart des \u00e9l\u00e8ves qui se retrouvent sur la plateforme ne souscrivent qu’au forfait gratuit.<\/li>\n\n\n\n
<\/li>\n<\/ul>\n\n\n\n<\/div>
\n\n\n\n
Cr\u00e9er de l’empathie<\/h2>\n\n\n\n
\n\n\n\n
Personae<\/h3>\n\n\n\n
En utilisant les donn\u00e9es qualitatives et quantitatives issues des r\u00e9sultats de nos entretiens, sondages et tests A\/B, j’ai d\u00e9fini trois profils de groupes cibles: Jamy Rose (\u00e9l\u00e8ve), Henry Alphord (parent) et Jessica Clarence (maman Instagrameuse) pour mieux comprendre nos groupes d’utilisateurs et hi\u00e9rarchiser les objectifs en fonction de leurs besoins.<\/p>\n\n\n\n<\/div>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
\n\n\n\n
Empathy map<\/h3>\n\n\n\n
La visualisation des attitudes et des comportements des utilisateurs a aid\u00e9 l’ensemble des \u00e9quipes \u00e0 s’aligner sur une compr\u00e9hension approfondie des utilisateurs finaux. Le processus de mappage pourrait \u00e9galement r\u00e9v\u00e9ler les trous existant dans les donn\u00e9es des utilisateurs.<\/p>\n\n\n\n<\/div>\n\n\n\n
Sur la base des informations tir\u00e9es du contenu initial, des analyses concurrencielles et de la d\u00e9finition de nos utilisateurs cibles, j’ai red\u00e9fini le parcours utilisateurs.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/div>
\n\n\n\n
Aspect visuel<\/h2>\n\n\n\n
Couleurs<\/h3>\n\n\n\n
Pour avoir une certaine forme de contraste tout en gardant le design harmonis\u00e9, j’utilise un d\u00e9grad\u00e9 de la couleur principale (qui a \u00e9t\u00e9 d\u00e9cid\u00e9e violette au d\u00e9but du projet). J’utilise \u00e9galement des couleurs neutres (blanc, gris et gris anthracite). Pour les boutons et certains textes importants comme les messages d’erreur lors de la saisie d’un formulaire, j’utilise des couleurs plus satur\u00e9es et plus vives qui contrastent avec le reste du design.<\/p>\n\n\n\n
Boutons<\/h3>\n\n\n\n
L’utilisateur a beaucoup d’interactions avec le site Web, c’est pourquoi je voulais vraiment d\u00e9finir le visuel des boutons pour que leurs utilisations soient facile \u00e0 interpr\u00e9ter. Par exemple, pour les boutons d\u00e9roulants et bool\u00e9ens qui ne m\u00e8nent g\u00e9n\u00e9ralement pas \u00e0 une autre URL sur le site Web, j’utilise la couleur violette. Mais pour les boutons poussoirs qui m\u00e8nent \u00e0 une autre URL, j’utilise le cyan.<\/p>\n\n\n\n
Police<\/h3>\n\n\n\n
Nous avons \u00e9galement fait des tests A\/B sur diff\u00e9rentes polices, notamment une police beaucoup plus conviviale avec des courbes et des formes rondes qui plaisent aux enfants. Malheureusement, la conversion que nous avons gagn\u00e9 avec notre cible d’\u00e9l\u00e8ve, nous l’avons perdu sur notre cible parent. Nous avons donc d\u00e9cid\u00e9 d’opter pour une police plus s\u00e9rieuse, qui parle plus aux parents.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Lors des sondages et des entretiens, j’ai \u00e9galement demand\u00e9 quel \u00e9tait le support privil\u00e9gi\u00e9 pour apprendre en ligne. La moiti\u00e9 de nos utilisateurs utilisent un ordinateur et l’autre moiti\u00e9 est sur mobile. Une minorit\u00e9 utilise des tablettes. Nous avons donc d\u00fb rendre la plateforme responsive pour convenir \u00e0 tous nos utilisateurs.<\/p>\n\n\n\n
Voici quelques exemples pour la page de profil.<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/div>
\n\n\n\n
Aspect de game design<\/h2>\n\n\n\n
Schooltopia applique les codes de conception des jeux vid\u00e9o. Cela a pour objectif de fid\u00e9liser les utilisateurs et les encourage \u00e0 venir plus souvent sur la plateforme. \u00c0 cet \u00e9gard, j’ai mis en place un syst\u00e8me de points visible \u00e0 tout moment dans l’en-t\u00eate. Il existe \u00e9galement un syst\u00e8me de niveaux qui est reli\u00e9 au point que les utilisateurs rassemblent tout au long des cours.<\/p>\n\n\n\n
Ici, le challenge \u00e9tait d’apporter un aspect de game design sans trop perdre le cot\u00e9 e-learning serieux. Cela se veut subtil mais compr\u00e9hensible tout de suite.<\/p>\n\n\n\n
<\/p>\n\n\n\n<\/figure>\n\n\n\n
\n\n\n\n
Conception des badges<\/h3>\n\n\n\n
Les badges sont l’une des r\u00e9compenses que les \u00e9tudiants peuvent obtenir lorsqu’ils terminent certains cours, atteignent un temps pass\u00e9 ou le nombre de questions r\u00e9pondues sur la plateforme. Il existe 2 types de badges, ceux li\u00e9s aux objectifs (nombre de questions et temps pass\u00e9) et ceux li\u00e9s aux cours \u00e0 th\u00e8me commepar exemple les fraction ou bien les th\u00e9or\u00e8mes, la g\u00e9om\u00e9trie, \u2026<\/p>\n\n\n\n<\/div>\n\n\n\n<\/figure>\n\n\n\n
\n\n\n\n
D\u00e9marrer une le\u00e7on<\/h3>\n\n\n\n
Pour donner un maximum de libert\u00e9 aux \u00e9tudiants quant \u00e0 la fa\u00e7on dont ils naviguent d’un cours \u00e0 l’autre, j’ai cr\u00e9\u00e9 un menu \u00e0 onglets qui se met \u00e0 jour lorsque le contenu est termin\u00e9 sur le tableau de bord. De cette fa\u00e7on, les \u00e9l\u00e8ves peuvent revenir sur n’importe quelle le\u00e7on pr\u00e9c\u00e9dente et aller directement l\u00e0 o\u00f9 ils se sont arr\u00eat\u00e9s \u00e0 la derni\u00e8re session. Ils peuvent ainsi r\u00e9viser un exercice pr\u00e9c\u00e9dent pour tenter d’obtenir un score de 100%. Ils peuvent aussi simplement prendre du plaisir \u00e0 relire la BD en ligne !<\/p>\n\n\n\n<\/div>\n\n\n\n
Avec la mise en place des parcours distincts pour les parents et les \u00e9l\u00e8ves, nous avons constat\u00e9 une augmentation significative du nombre d’abonnements ainsi qu’une diminution du nombre de r\u00e9clamations d\u00e9pos\u00e9es via le chat du service client. De plus, j’ai re\u00e7u des commentaires positifs des utilisateurs sur la fa\u00e7on dont ils peuvent naviguer dans leur tableau de bord leur interaction avec la plateforme.<\/p>\n\n\n\n
Conclusions<\/h3>\n\n\n\n
Traiter les besoins des utilisateurs tout en transmettant le caract\u00e8re unique de la narration du projet \u00e9tait un d\u00e9fi int\u00e9ressant et j’ai vraiment appr\u00e9ci\u00e9 y travailler.<\/p>\n\n\n\n
Les tests utilisateurs ne s’arr\u00eatent pas apr\u00e8s le d\u00e9veloppement. Le design est une it\u00e9ration constante avec pour objectif l’am\u00e9lioration de l’exp\u00e9rience utilisateur. Il est important de continuer \u00e0 recueillir et \u00e9couter les commentaires de des utilisateurs.<\/p>\n\n\n\n
Les Journey maps sont des outils inestimables. Au fur et \u00e0 mesure que cela devient de plus en plus complexe, les journey map aident \u00e0 cr\u00e9er un processus complet et \u00e0 d\u00e9couvrir les points probl\u00e9matiques et le opportunit\u00e9s. Elles fournissent \u00e9galement une base pour une bonne coop\u00e9ration entre les parties prenantes.<\/p>\n\n\n\n<\/div>
![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Button.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Frame-1337-714x1024.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Personae03-1024x738.jpg\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Personae02-1024x738.jpg\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Personae01-1024x738.jpg\")
<\/figure>\n\n\n\n\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/EmpathyMap02-1024x1024.jpg\")
<\/figure>\n\n\n\n <\/div>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/EmpathyMap01-1024x1024.jpg\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/UserJourneyMap02-1024x729.jpg\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/UserJourneyMap01-1024x729.jpg\")
<\/figure>\n\n\n\n<\/div> \n\n\n\n![\"\"](\"https:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/User-flow-scaled.jpg\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/ParcoursSubscription-683x1024.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n![\"\"](\"https:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/ColorPalette-1-1024x767.png\")
<\/figure>\n\n\n\n\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Font.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Button-1.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n<\/div>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/MockUp_Profile-1024x617.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/MockUp_Progression-1024x617.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/MockUp_Recompenses-1024x617.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/QCM-1024x950.png\")
<\/figure>\n\n\n\n\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Badges.png\")
<\/figure>\n\n\n\n\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/Frame-1332-1024x474.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/PopUp01_Bis2.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/PopUp02_Bis2.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/PopUp03.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/PopUp04_Bis3.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/yanntrolong.com\/wp-content\/uploads\/2023\/06\/PopUp05_Bis3.png\")
<\/figure>\n\n\n\n<\/div>\n\n\n\n<\/div>\n\n\n\n<\/div>\n\n\n\n