Conception de jeux éducatifs

En août 2023, j'ai travaillé avec l'équipe Prosumio basée à Berlin sur un projet UX dans le cadre du Ironhack UX UI Bootcamp. Prosumio est un jeu qui enseigne aux adolescents l'activisme environnemental et les comportements durables.

Notre lettre

Développer une nouvelle fonctionnalité de jeu, la carte de connaissance, un micro quiz de leçon au sein de l'application.

Nos objectifs

Nous avons constaté que les 3 éléments suivants faisaient défaut dans le concept de base de la fonction Carte de connaissances. La fonction de carte de connaissances, qui se compose d'un mini cours et d'un quiz de suivi, était présentée sous la forme d'une longue page défilante avec des pdfs implémentés, pas vraiment adaptée au téléphone. Les leçons manquaient d'éléments ludiques et la mascotte Erdi n'était pas incluse.

Étude de marché

Nous avons effectué une analyse de base des caractéristiques des applications concurrentes immédiates afin de comprendre comment Prosumio s'insère dans le marché.

Recherche sur les utilisateurs

Nos entretiens visaient à valider nos hypothèses et à obtenir un sens de la connexion émotionnelle des adolescents avec les jeux. Nous avons interviewé des étudiants allemands âgés de 14 à 17 ans, ainsi que des enseignants allemands spécialisés dans le développement de programmes d'études sur la durabilité.

Aperçus de la recherche

Nos entretiens ont été extrêmement éclairants et nous en avons retiré les idées suivantes, prêtes à être appliquées à notre nouvelle fonctionnalité.

Énoncé du problème

Avant de commencer à réfléchir, nous avons rédigé une déclaration de problème afin de clarifier le problème de base de la fonction Carte de Connaissance existante.

La fonction de carte de connaissances de l'application Prosumio a été conçue pour apporter de l'éducation et de la sensibilisation aux thèmes du développement durable. Nous avons constaté que la version existante des cartes de connaissances ne remplit pas son objectif de fournir des micro-leçons engagées et accessibles aux adolescents, ce qui provoque une baisse de l'attention et de la compréhension de la part du groupe d'utilisateurs et limite les possibilités de partenariat avec les écoles.

Les incontournables

Nous avons défini quatre éléments principaux qui devaient être plus présents dans la fonction Carte de Connaissances.

Low fi wire-frames

Et nous avons commencé à créer des wire frames pour imaginer comment nous voulions que l'application s'écoule.

Mid fi et testing

Nous avons testé l'application avec quelques-uns de nos camarades de classe et des personnes interviewées qui avaient utilisé la version bêta, afin d'obtenir quelques commentaires. Nous avons surtout reçu des commentaires sur les fonctionnalités, nous nous sommes donc concentrés sur l'amélioration des fonctions et de la fluidité dans cette phase.

Analyse visuelle des concurrents

Avant de lancer l'UI, nous avons jeté un coup d'œil sur les concurrents. Avec des applications de jeu et avec ce groupe d'âge difficile (les adolescents), nous voulions que la fonctionnalité ait l'air conviviale et amusante, sans pour autant être trop bébé, trop mignonne ou trop sérieuse. Nous nous sommes inspirés des sites suivants, notamment Duolingingo, Kahoot ! et Anton.

Tuile de style Prosumio

Nous avons ensuite redéfini un peu le style Prosumio, en créant un style tile pour voir clairement tous les éléments ensemble. Il n'était pas spécifiquement prévu dans notre brief de faire une refonte de l'IU, mais nous savions que l'équipe Prosumio ne disposait pas d'un designer d'IU, et nous avons senti que réimaginer l'application de manière plus légère, avec des arrière-plans moins sombres et une accentuation plus claire sur le matériel d'apprentissage, nous améliorerions l'expérience globale et la fonctionnalité de l'application.

Écrans haute fidélité

Pour vous montrer ce que je veux dire, voici quelques gifs "avant et après" de la façon dont nous avons modifié l'interface utilisateur pour apporter plus de clarté et de fonctionnalité à l'application.

En général, nous avons tout éclairci, ajouté plus de hiérarchie avec le texte et les titres, et ajouté beaucoup d'éléments ludiques comme Erdi, ainsi que modifié la section quiz pour qu'elle ressemble à un chat. Nous avons trouvé que le fond pourpre foncé rendait le texte difficile à lire et détournait l'attention du contenu.

Chemin heureux / démo

Voici un petit aperçu de notre flux d'expérience utilisateur révisé. Nous avons ajouté de nouveaux filtres de vue, ainsi que le tableau de bord, un moyen d'afficher les équipes ou les groupes, ainsi que l'ensemble de l'interface des leçons et du jeu. J'espère que vous vous amuserez !

Mode sombre

Nous avons eu une petite fenêtre pour commencer à créer un mode sombre, ce qui était amusant. Nous avons en fait utilisé un plug-in Figma pour gérer la conversion initiale, puis modifié les éléments par la suite, en nous concentrant sur l'ajout ou la réduction du contraste des couleurs lorsque cela était nécessaire. Cela donne certainement une sensation différente de la version originale.

Prochaines étapes

Nous n'avons eu que 9 jours au total pour ce projet, nous n'avons donc malheureusement pas eu le temps de faire plus d'améliorations. Nous avions cependant en tête les étapes suivantes que nous avons recommandées à l'équipe de Prosumio comme prochaines étapes.