[Article 2/2] Un design co-construit avec des collégiens

Si une grande attention a été portée au fond du projet, la forme de l’application FantomApp constituait un défi supplémentaire, à commencer par son identité visuelle. Pour des adolescents habitués aux interfaces fluides des grands réseaux sociaux, il était important de parvenir à produire un outil qui ne dénote pas par son austérité ou son apparence excessivement « institutionnelle » ou « scolaire », tout en conservant son aspect « officiel ». Nous avons ainsi cherché à tenir une ligne de crête entre l’apparence formelle des sites d’autorités ou d’administrations publiques, et celui des réseaux sociaux les plus populaires.

Extraits de la recherche menée autour du contexte graphique dans lequel s'inscrit l'application

Pour ce faire, tout au long du développement, le lien avec les collégiennes et collégiens a été maintenu. En plus de l’enquête sociologique initiale, de nombreux ateliers ont été organisés dans des collèges pour tester l’apparence et les fonctionnalités de l’application.

Ateliers de terrain menés avec la cible : les collégiens

L’application a ainsi été élaborée via une méthodologie centrée utilisateur et chaque aspect de FantomApp a été affiné au fur et à mesure de leurs suggestions :

• Compréhension des besoins et des habitudes :

Au début du calendrier (4e trimestre 2024, 1e trimestre 2025), nous avons mené des entretiens et des ateliers de co-conception avec les adolescents (en particulier les élèves de collège 93) afin de découvrir leurs frustrations et leurs attentes. Les activités comprenaient des séances de brainstorming, des jeux de carte, et des échanges autour de la création des premiers contenus.

Assets papiers distribués pendant les ateliers pour mieux comprendre leurs usages et leurs frustrations

La proximité dont nous avons bénéficié avec eux nous a permis de préciser notre analyse à travers la création de personas, de carte d’empathie ou de parcours utilisateurs.

Ces ateliers nous ont également permis de valider l’hypothèse selon laquelle une approche trop scolaire n’était pas pertinente pour un jeune public et contre-productive dans le processus d’apprentissage.

Documents de recherches du projet : création de "Personas" et itérations autour de l'indentité visuelle de l'application, confrontée à des collégiens

• Validation des premiers concepts :

Après avoir formalisé des propositions de fonctionnalités et de premiers prototypes issus de l’analyse de la première phase de co-conception, nous sommes retournés dans les salles de classe afin de tester et de valider les potentielles fonctionnalités (deuxième trimestre 2025). Cette étape s’est faite avec d’autres groupes d’élèves dans d’autres établissements (notamment par le biais du projet « La Culture et l’Art au Collège » de l'association F93, dont nous remercions les participants : Mariette Gaillard, Cécile Tremosa, Quentin Issartial et Fabien Tarissan), nous permettant d’éviter un biais de confirmation de la part d’élève ayant travaillé sur la première étape de co-conception. Des méthodes telles que le tri de cartes et le prototypage rapide nous ont aidés à évaluer les fonctionnalités qui leur semblaient pertinentes et la manière dont ils interprétaient nos intentions en matière de conception. Mais aussi vérifier la direction potentielle que prendrait l’identité visuelle.

Entretiens menés autour des premières fonctionnalités de l'application sur leur importance potentielle et leur forme

Réalisation de 'wireframes" ou maquette "fil-de-fer" de l'application

• Tests utilisateurs 

Enfin, plusieurs tests ont été réalisés au fur à mesure du développement des premiers prototypes, jusqu’à la version beta de l’application (3e trimestre 2025), afin de maximiser le bon développement de l’application. Ces interactions autour des prototypes ont été essentiels pour mener des sessions de tests d'utilisabilité avec notre cible, nous permettant de non seulement valider la clarté de l'interface, mais l'expérience globale (son ergonomie, sa tonalité, son attractivité etc.). Cette étape de test s’est faite avec d’autres groupes d’élèves dans d’autres établissements (du 94 et du 75), nous permettant d’éviter un biais de confirmation de la part d’élève ayant travaillé sur les deux premières étapes de co-conception.

Test utilisateurs de confrontation de l'application

Résultat : une identité visuelle et des partis pris

In fine, ce travail de co-construction nous a permis de prendre un certain nombre de partis et d’aboutir à une identité visuelle clairement définie.

Les partis pris de l’application

• Pour répondre au besoin d’outils concrets, l’application est tournée vers la pratique et l’usage immédiat avec des fonctionnalités telles que « Je teste mon mot de passe », « Je floute ma photo » ou les tutoriels « Je sécurise mes réseaux », qui permettent d'agir concrètement sans lire de longs textes.
• Pour répondre en autonomie aux situations problématiques dans lesquelles ils se trouvent, l'application répond aux problèmes identifiés par les adolescents eux-mêmes au cours des ateliers en renvoyant vers les guichets et ressources correspondants, en particulier les services d'e-Enfance et de Cybermalveillance.gouv.fr, mais également un tout nouveau formulaire de plainte auprès de la CNIL, simplifié spécifiquement destiné aux mineurs.
• Sur le plan éditorial, l'application rompt avec la pédagogie descendante souvent remise en cause par les adolescents. Elle met en avant l’horizontalité, l’autonomie et valorise dans le contenu les compétences existantes des utilisateurs. L'application ne dit ainsi pas « attention » ou « tu dois », elle dit « voici comment faire si ça t’intéresse » par le biais de tutoriels pratiques, sans impératif moralisateur.

L’identité visuelle

Pour répondre aux demandes et aux préférences de nos utilisateurs, une attention particulière a été portée à la mascotte, aux logos, aux couleurs, formes graphiques, textures, illustrations ou encore à l’ajout d’un thème sombre. Nous détaillons ci-dessous certains de ces choix graphiques résultant du travail recherche-utilisateur.

• La mascotte et le logo

L'application est incarnée par un petit fantôme, une mascotte bienveillante qui guide l'utilisateur sans jamais le surveiller ou être prescriptif. Il n'est en effet pas là pour faire la leçon, mais rappeler, inciter et rendre l'expérience en ligne un peu plus sûre, un peu plus sage et un peu plus amusante. Sans bouche pour parler, il communique par ses apparitions ludiques, jetant un coup d’œil depuis les bords de l'écran.

Sa transparence évolue notamment pour refléter les émotions, guider les utilisateurs et s'adapter à différentes situations. À pleine opacité, il est présent, ludique et rassurant. Mais dans les moments d'inquiétude, par exemple lorsqu'un adolescent est confronté à un problème en ligne, il peut apparaître plus translucide, reflétant la sensibilité de la situation.

Le logo quant à lui incarne à la fois l'esprit de l'application et sa mission principale : aider les adolescents à prendre le contrôle de leur vie privée en ligne. Pour renforcer cette idée, la lettre O de « Fantom » a été transformée en un bouton, symbole universel des paramètres et du contrôle. Ce détail évoque aux utilisateurs qu'ils ont le pouvoir d'ajuster leur présence numérique et de naviguer en toute sécurité sur les réseaux sociaux.

• Typographie

FantomApp utilise deux typographies différentes qui sont Lexend et Nunito. Conçue à l'origine pour améliorer la lisibilité et réduire la charge cognitive, Lexend est particulièrement bien adaptée à un jeune public, car elle est facile et agréable à lire sur écran. Utilisée pour les titres, son design épuré et ses proportions équilibrées inspirent un sentiment de modernité et de sérieux. Elle est complétée par Nunito, celle-ci utilisée pour le corps de texte, adoucissant l'aspect technique associé à la sécurité en ligne par ses extrémités arrondies créant une tonalité plus chaleureuse, indispensable pour communiquer avec un jeune public. Ainsi la combinaison de Lexend et Nunito transmet à la fois la rigueur nécessaire pour aborder des sujets sensibles tels que la confidentialité en ligne, et la douceur requise pour guider les utilisateurs avec empathie.

• Illustrations

En plus de la mascotte apparaissant à différents endroits et sous différentes expressions, l’application possède un type d'illustration distincts sous forme de stickers. Inspirés du langage visuel des réseaux sociaux, ces éléments ajoutent du dynamisme et de la gaieté tout en permettant de mettre en évidence des informations clés sans nuire à l'expérience utilisateur. Faisant écho aux autocollants utilisés dans les « stories » pour rendre le contenu plus expressif, ils utilisent des formes simples et des dégradés fluides pour accentuer leur aspect digital.

Aller à l'article 1 : Un projet né de façon inductive à partir du terrain

Illustration : LINC