Aperçu du projet
Pour mon projet de fin d’études lors de mon alternance, il nous a été demandé de créer une nouvelle entité pour une entreprise, avec sa propre identité et son site web.
Contexte
« Dans un monde en constante évolution, la société Asmodee cherche à repousser les frontières de l’innovation et de l’interaction dans les jeux qu’ils proposent pour ses utilisatrices et utilisateurs. En effet, l’entreprise souhaite aujourd’hui offrir à ses clients une expérience de jeu unique et personnalisée en créant un site web qui permet aux utilisateurs de concevoir leurs propres jeux de plateau.
Cette plateforme de personnalisation de jeux de plateau utilisera l’intelligence artificielle pour aider les utilisateurs à créer leur propre histoire et leurs propres personnages, à définir les règles du jeu, et à concevoir les illustrations, allant du plateau de jeu aux cartes à jouer présentes dans le jeu. En outre, elle offrira la possibilité d’imprimer en 3D des pions personnalisables du jeu de plateau. Les jeux seront vendus entre 50 et 100e en fonction des options choisies par l’utilisateur. »
Quand était-ce ?
Début Août – Fin Octobre 2023
Temps alloué
avec l’alternance, une journée par semaine
Mon rôle
chef de projet digital ; graphiste ; concepteur d’expérience ; UX/UI Designer ; webdesigner
Les défis du projet
- trouver un nom pour la nouvelle entité
- créer une identité visuelle compatible avec celle d’Asmodee
- concevoir un site proposant la personnalisation de jeux de société avec l’aide de l’intelligence artificielle
- créer un prototype visuel de jeu de plateau comme exemple de produit final
- réaliser le site web aussi fidèlement que possible
Mes solutions
- chercher d’où vient Asmodee pour trouver un nom similaire
- analyser le site d’Asmodee pour trouver des complémentarités
- comprendre les différentes intelligences artificielles et les niveaux de personnalisations possible
- choisir un type de jeu de société familier pour s’inspirer
- utiliser WordPress pour concevoir le site et ses options
Responsabilité de conception
- générer des plans de recherche, diriger des sessions de recherche et de tests à l’aide de questionnaires
- analyser toutes les recherches génératives comme évaluatives
- créer une identité visuelle complète
- concevoir des wireframes de différents niveaux, des maquettes ainsi que des prototypes
- tester et analyser les maquettes et prototypes
- utiliser un hébergeur et concevoir un site WordPress
Mon approche
Comprendre
Etape 1
- benchmarks
- étude ethnographique
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- recherches de visuels et créations de logos
- zoning ou wireframing low-fi
Décider
Etape 4
- choix d’un logo et d’une identité graphique
- wireframing mid-fi ou high-fi
Prototyper
Etape 5
- mockup d’identité
- création d’un prototype de jeu personnalisé
- prototype figma
Valider
Etape 6
- test du prototype
- réalisation du site
Comprendre
Etape 1
- benchmarks
- étude ethnographique
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- recherches de visuels et créations de logos
- zoning ou wireframing low-fi
Décider
Etape 4
- choix d’un logo et d’une identité graphique
- wireframing mid-fi ou high-fi
Prototyper
Etape 5
- mockup d’identité
- création d’un prototype de jeu personnalisé
- prototype figma
Valider
Etape 6
- test du prototype
- réalisation du site
Etape 1 : Comprendre
Objectif
Comprendre le milieu dans lequel se situe l’application, connaître ses concurrents, ses utilisateurs.
Au cours de la phase de recherche, j’ai commencé par une étude de marché et une courte analyse concurrentielle. Afin d’obtenir une étude ethnographique plus complète j’ai également réalisé un questionnaire et des interviews. Avec tous ces éléments, les besoins des utilisateurs deviennent plus clairs à comprendre.
Les défis du projet
Pour un projet si complexe et complet, j’ai décidé de réaliser 2 benchmarks différents. Le premier sur les jeux de société et le second sur les intelligences artificielles. Pour en apprendre un maximum sur chacun de ces sujets, je les ai divisés en 4 sous parties :
Jeux et personnalisation
- le marche des jeux de société
- les différents acteurs du marché
- les différentes mécaniques et types de jeux de société existants
- la personnalisation
Intelligence Artificielle générative
- que sont les IA génératives
- les secteurs les utilisant
- les contenus produits par les IA génératives
- l’avenir de ces IA
Avec ces recherches, j’ai pu comprendre que la France est l’un des plus gros consommateurs de jeux de société. Pourtant, il est très complexe d’avoir une liste unique et complète de types de jeux de société. En effet, certains jeux peuvent entrer dans plusieurs catégories, certaines sont très proches et l’on créé constamment de nouveaux jeux. Quant à la personnalisation, elle est de plus en plus présente et peut avoir également de nombreuses formes. Les consommateurs de personnalisation apprécient fortement de pouvoir choisir des options et les rendre unique, comme de pouvoir proposer les leurs. Par ailleurs, il semble que les jeux de société préférés des consommateurs sont ceux de stratégie, de coopération et d’ambiance.
Pour les IA génératives, j’ai compris que c’était une IA qui apprenait, comprenait et concevait de nouveaux contenus comme le feraient des êtres humains. Tous les secteurs utilisent les IA, car très accessibles et parfois gratuites, mais ses utilisateurs hésitent à le révéler par peur de représailles. Tout comme les personnalisations, on peut retrouver les IA génératives dans de nombreuses formes, ce qui fait que l’on effleure la surface des possibilités les concernant. Néanmoins, il faut rester prudent et une vérification humaine est toujours nécessaire.
Comprendre d'où vient Asmodee
Afin de mieux comprendre les origines d’Asmodee, j’ai également fait des recherches sur son nom. Si la nouvelle entité filiale qu’ils souhaitent construire doit avoir sa propre identité visuelle, autant qu’elle reste dans la même thématique.
Ainsi, la société Asmodee Edition porte ce nom grâce au jeu qui l’a fait le plus connaître. En effet, avant de se nommer Asmodee, la société a eu d’autres noms (Siroz Productions et Idéojeux).
C’est suite à la parution de In Nomine Satanis – Magna Veritas, qu’elle est propulsée à la troisième place du marché. Asmodee, l’un des personnages, est le prince démon du jeu. Il a un grand objectif : tenter les Hommes par le jeu.
Etape 2 : Définir
Objectif
Définir qui sont les utilisateurs, quels types de jeux préfèrent-ils, quel concept spécifique choisir, quelles personnalisations apporter.
Afin de mieux définir les besoins des utilisateurs j’ai conçu et envoyé un questionnaire. J’ai également réalisé plusieurs interviews afin de réunir le plus d’informations sur leurs attentes.
Cette étape cruciale permet d’identifier le ou les profils type des utilisateurs, mais aussi leurs souhaits de personnalisations. On peut ensuite se diriger dans une direction plus claire et spécifique quant au grand projet d’Asmodee pour sa conception d’entité supplémentaire.
Premières définition des cibles et du concept
Avec ces informations obtenues dans les benchmarks, j’ai commencé par définir des cibles. J’ai également pu concevoir deux premiers proto-persona. Le premier est un passionné de jeux de société, le second un parent souhaitant offrir un jeu personnalisé.
Pour réduire le champ des possibilité quant au concept de création d’un site de personnalisation de jeux de société via les IA, je me suis référée aux préférences des consommateurs. Si leurs jeux préférés sont ceux de stratégie, de coopération et d’ambiance, il me faut trouver un grand type de jeu regroupant ces 3 catégories. J’ai choisi de baser mon hypothèses sur les jeux d’enquêtes/d’énigmes car cette catégorie semble les regrouper. De plus, il existe un large choix de jeux déjà existants ainsi que bon nombre de personnalisations possible.
Puisqu’Asmodee vient de In Nomine Satanis – Magna Veritas, j’ai choisi d’utiliser un nom provenant également de ce jeu : Malphas. En effet, il est également un prince démon du jeu, celui de la discorde. Il conviendrait ainsi parfaitement puisque ses objectifs sont de favoriser les dissensions et manipuler les autres à ses fins. Il représente alors les criminels, les inspecteurs, les maîtres de jeux et les détectives que l’on peut retrouver dans des scénarios policiers d’enquêtes et d’énigmes.
Pour mieux définir cette hypothèse, j’ai conçu plusieurs user stories ainsi qu’un parcours utilisateur. Ces derniers me feraient une première base pour concevoir des questionnaires afin de valider ou non l’hypothèse.
Les questionnaires et interviews
Pour la conception des questionnaires, j’ai défini 5 axes de réflexions pour guider les participants :
- les profils interrogés (identité des participants, niveaux d’études et métiers, rapports aux équipements technologiques)
- l’expérience en jeux de société (habitudes de jeux et préférences)
- Asmodee, la personnalisation et les IA (connaissances de l’entreprise, souhaits de personnalisations, rapport aux IA génératives)
- le concept que serait Malphas (les jeux d’enquêtes, les attentes via la plateforme et les IA, les potentiels obstacles)
- le coût des personnalisations (prix moyen d’un jeu d’enquête, d’un jeu complètement personnalisé, utilisation du service selon les prix)
J’ai obtenu plus d’une trentaine de réponses qui m’ont permis de mieux définir les attentes des utilisateurs.
La définition des cibles et du concept
A l’aide des précédentes recherches, j’ai pu mieux définir les cibles potentielles pour Malphas. En effet, l’hypothèse de concept semble validée par les personnes interrogées, ce qui me permet de mieux le redéfinir ainsi :
« Malphas est une plateforme en ligne qui combine la puissance de l’intelligence artificielle (IA) avec la créativité des utilisateurs. Elle permet la conception et la personnalisation de jeux d’enquêtes captivants.
Grâce à son interface conviviale et ses outils intuitifs, les utilisateurs peuvent créer des scénarios, des indices, des personnages, des plateaux de jeux, des cartes, des règles, des pions en 2D ou 3D, leurs boîtes de jeux ainsi que des rebondissements uniques pour leurs jeux d’enquêtes policières.
L’IA intégrée apporte une aide précieuse à la création des différents éléments personnalisés et garantit une expérience immersive et engageante pour tous les joueurs. »
Une fois cette redéfinition du concept effectuée, je me suis alors concentrée sur la création de 3 persona ainsi que d’une experience map. Ces éléments me permettent de me concentrer à tout moment sur les besoins des utilisateurs et leurs probables interactions avec la plateforme.
Les conclusions de l'enquête
Selon les personnes interrogées, il faudrait :
- avoir un catalogue présentant les différentes possibilités
- pouvoir accéder à des guides, des tutoriels afin de savoir se servir des IA
- que l’interface soit simple d’utilisation
- pouvoir tester et ajuster son jeu avant de l’acheter
- avoir le choix des modifications à apporter à son jeu
- proposer un large choix de personnalisations
- rester sur un prix raisonnable
- partir d’une base pour personnaliser des éléments du jeu
- pouvoir concevoir un jeu entier
Puisque le concept semble validé ainsi et que le nom de Malphas n’a pas paru choquer les personnes interviewés, il faut aussi définir une première idée de visuel. Pour rester dans la proximité avec Asmodee, je me suis alors penchée sur les couleurs qu’ils utilisaient dans leurs divers sites. Si le bleu, le jaune et le blanc sont les couleurs principales, dans le blog on peut trouver d’autres couleurs. Que ce soit dans le logo « du coin de la table » ou dans les articles, trois couleurs se démarquent et fonctionnent très bien ensemble. J’ai donc défini comme première base pour Malphas la reprise de ces 3 couleurs un peu oubliées mais présentes :
- violet
- orange
- rose
J’ai également réalisé un storyboard en version papier pour me rappeler quelles seraient les étapes réalisées par les utilisateurs. Il nous a été demandé de l’animer brièvement et d’y ajouter du son par la suite afin de s’imaginer ce que l’on pourrait envoyer à un client réel.
Création d'un cahier des charges
Pour résumer tout le projet et continuer à avancer dans la bonne direction, j’ai également conçu un cahier des charges complet. Pour rester dans le réalisme jusqu’au bout, j’ai conçu un diagramme de Gantt afin de mieux définir un budget. Pour n’oublier aucun élément lors de la création du projet, un Trello me semblait essentiel. En effet, celui-ci me permettait de noter tous les besoins, de voir lesquels étaient en cours, terminés ou restaient encore à faire.
Etape 3 : Diverger
Objectif
Noter un maximum d’informations et d’idées, rechercher des visuels, concevoir des zonings de pages…
Lors de l’étape de divergence, je note tout ce qui me vient sur les fonctionnalités que je vais mettre en place. Que ce soit sous forme de listes, de définitions, de directions ou de modules que j’ai pu voir ailleurs. Pour avoir un maximum de possibilités je recherche également des idées de visuels, de logo pouvant correspondre à l’identité visuelle. Je réalise également des zonings ou wireframes lo-fi selon ces idées.
Premières idées
Afin de concrétiser tous les besoins nécessaires au projet, j’ai commencé par faire des recherches visuelles sous forme de moodboards. Le premier pour tout ce qui me faisait penser au concept, le second sur des sites web en mode sombre. Ces premiers éléments me permettent de me constituer une base sur laquelle travailler tout en conservant un ensemble cohérent.
Avec ces éléments visuels pour me guider, j’ai noté tout ce à quoi je pensais pour concevoir le logo :
- policier
- criminel
- recherche
- empreinte
- traces
- énigme
- mystère
- indice
- pièces
- puzzle
- jeu
- masque
Tous ces mots m’ont permis de commencer à concevoir de nombreux potentiels logos pour Malphas. Ces idées passent du réaliste au plus subjectif permettant d’avoir un maximum de possibilités.
Pour le site, j’ai noté sur papier tout ce qui me venait à l’esprit. Les différentes fonctionnalités, les cheminements, les éléments visuels, les agencements qui me viennent à l’esprit sont notés ou dessinés.
Etape 4 : Décider
Objectif
Décider quelle identité visuelle correspond le mieux, quelles idées sont celles à suivre selon les besoins des utilisateurs, lesquelles sont les plus simples à comprendre.
Pour cette étape de décision, il faut peser le pour et le contre de chaque idée envisagée précédemment. Certaines peuvent être un bon début, d’autres trop complexes ou redondantes par exemples. Cette phase est décisive pour la bonne continuation de la suite du projet. Pour la définition de l’identité visuelle il faut qu’elle soit cohérente avec l’entreprise et ce qu’elle propose.
Charte graphique
Afin de concevoir la charte graphique qui conviendrait le mieux à Malphas, j’ai commencé par voir quelles couleurs et polices d’écriture conviendraient le mieux.
Comme expliqué précédemment, j’ai repris dans un premier temps les couleurs violette, orange et rose présentes dans le logo du blog d’Asmodee. Pour concevoir une palette qui serait lisible j’ai dégradé ces couleurs pour avoir des versions plus claires et plus sombres. Mon choix c’est ensuite porté surtout sur les couleurs sombres car le thème policier et enquête est bien souvent dans des teintes noires.
Afin de vérifier les couleurs choisies, il fallait que j’effectue des tests. Il fallait que je puisse vérifier que les contrastes fonctionnaient aussi bien entre les couleurs selon divers handicaps visuels, que pour leur utilisation avec les futures polices d’écriture du site. J’ai donc choisi de prendre 2 fonts pour le site, une pour les titres et une pour le reste. Les titres sont donc en Caveat Brush, une police serif qui force le respect, une font que l’on trouve souvent sur les titres de romans policiers. Pour les textes, j’ai choisi Sniglet, une police sans serif, moderne, ronde, facile à lire grâce à son épaisseur.
Caveat brush
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Sniglet
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Une fois les couleurs et polices du site choisies, j’ai pu vérifier les contrastes pour valider leurs utilisations. En me rapprochant le plus possible des normes AAA et des acceptations visuelles pour les personnes en situation de handicap, je peux rendre toutes les créations de Malphas plus accessibles.
Identité visuelle
Pour continuer à concevoir l’identité de Malphas, il fallait lui donner un visage. Puisque l’entreprise compte personnaliser des jeux de société, un logo amusant et reconnaissable sous toutes ses formes semble être la meilleure option. J’ai donc choisi un logo qui peut aussi bien représenter le policier, l’enquêteur et le criminel des jeux d’enquêtes. Mes inspirations littéraires pour Hercule Poirot et Arsène Lupin m’ont donc menée à celui-ci.
Afin de le rendre complet, j’ai conçu d’autres versions avec le nom du site et son slogan. Pour cela il fallait également trouver une font qui puisse correspondre. Il fallait une font qui aille avec celles du site, mais surtout avec le thème des enquêtes. Mon choix s’est arrêté sur la police Love ya like a sister pour ses caractéristiques expressive, créative, fantaisie, originale avec une forte personnalité. Le logo existe aussi sous les différentes couleurs de la charte, dans divers formats, et on peu également trouver ce qu’il ne faut pas faire avec ainsi que les zones de protection pour le logo.
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
The quick brown fox jumps over the lazy dog.
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
Afin de compléter l’identité graphique, j’ai aussi défini le ton rédactionnel qui serait présent dans les communications et sur le site de Malphas. J’ai opté pour un style ludique, passionné, inclusif, accessible, narratif, engageant, décontracté… Tout ce qui permettrait d’informer, inspirer la créativité, éduquer comme concevoir une communauté tout en assurant clarté et transparence aux utilisateurs. Afin de rester sur le côté retour à l’enfance prodigué par les jeux, j’ai choisi de créer une mascotte. J’ai commencé par une mascotte très sérieuse avant de me rendre compte qu’une bien plus enfantine passerait probablement bien mieux, autant pour Malphas que pour le lien avec Asmodée et son pirate.
Pour terminer avec l’identité visuelle, j’ai conçu des patterns qui pourraient être utilisés au dos de cartes de visite, remerciement ou même de jeux ! Ces patterns reprennent différents éléments que l’on retrouve dans les thèmes d’enquêtes tels que :
- armes
- empreintes
- loupes
- chapeau
- clé
- menottes
- exclamations
- interrogations
- marque
- tâches
- pièces…
Site web
Une fois avoir défini l’identité visuelle du site avec sa charte, il était plus simple de concevoir des wireframes pour les diverses pages. J’ai commencé par définir quelles allaient être les pages nécessaires à représenter avant d’en créer les wireframes :
- accueil
- à propos
- blog
- article
- catalogue
- configurateur
- connexion
- tableau de bord
- commandes
Ces pages sont celles qui pourraient être réalisées concrètement par la suite via WordPress. En effet, ne connaissant pas la conception d’IA et n’ayant aucun contact avec qui travailler sur le sujet, je n’ai pu que représenter certains agencements pour des pages de personnalisation telles que les pions ou cartes. Une fois les wireframes conçus, j’ai remplacé les textes par les futurs textes du site, ajouté les couleurs et photos correspondantes.
Etape 5 : Prototyper
Objectif
Rendre ses choix plus concrets, réels, concevoir les maquettes finales des fonctionnalités avec leurs interactions.
Lors de l’étape de prototypage, les designs précédents ont été suffisamment réfléchis et analysés pour vouloir les tester. On peut voir ici différents prototypes pour l’identité visuelle, un potentiel jeu créé ou le site en lui-même. Dans cette étape, il faut réaliser toutes les interactions que rencontrera l’utilisateur, aussi bien les mouvements de boutons, les hovers, les changements de page…
Prototypes visuels
Pour augmenter le réalisme du projet, j’ai réalisé un mockup avec le logo, les patterns et le personnage le plus sérieux. Ces éléments permettent de voir comment l’identité graphique de Malphas rendrait si on l’utilisait.
Pour concevoir le prototype d’un jeu, il a fallu commencer par voir quels éléments pourraient être utiles. Puisque le projet concerne la personnalisation avec l’aide des intelligences artificielles, je me suis servies d’elles afin de mieux les comprendre et me mettre à la place des utilisateurs. J’ai donc conçu un visuel d’un jeu complet mais aussi des visuels de personnages du jeu comme on pourrait les avoir sur des cartes et en pions 3D.
Prototype du site
Puisque j’ai réalisé les wireframes et maquettes sur Figma, j’ai également réalisé le prototype avec. Avec plus de temps et la possibilité de réaliser des tests réels, j’aurais à nouveau utilisé Maze avec les utilisateurs ayant effectué le questionnaire pour voir si le site correspondait à leurs attentes. Néanmoins, ce prototype permet de voir les cheminements possibles entre les diverses pages et le parcours que l’utilisateur devrait faire pour parvenir à configurer son jeu.
Etape 6 : Valider
Objectif
Valider, modifier ou invalider les choix effectués précédemment lors de tests utilisateurs ou travaux d’équipe.
Cette dernière étape de validation est cruciale. En effet, selon les résultats des tests effectués soit tout est validé et conçu, soit il faut faire des modifications. Pour ce projet-ci, les seuls tests effectués sont ceux de heatmap sur figma, la conception du site en lui-même et quelques analyses du site (tels qu’un attrakdiff et un google analytics).
Analyse des maquettes
Puisque le projet était limité en temps et que je n’ai pas pu faire de vérification des fonctionnalités auprès des utilisateurs, j’ai toutefois tenu à analyser les maquettes autrement. En effet, certains plugins Figma permettent de créer des heatmaps des pages afin de savoir où les utilisateurs porteraient plus leurs regards. Ainsi, on peut analyser ce qui les attire le plus et ce qui est potentiellement oublié par les utilisateurs. Cela permet de modifier les boutons et autres liens cliquables si l’on s’aperçoit qu’ils sont invisibles aux yeux des utilisateurs.
Création du site
Pour réaliser le site validant le projet, j’ai choisi d’utiliser un hébergeur privé et de le concevoir sur WordPress. Puisqu’il s’agissait d’un site pour les besoins de mon examen final en tant qu’UX/UI designer, le site n’est plus disponible à l’heure actuelle, néanmoins vous trouverez ici une courte vidéo montrant son utilisation. J’ai également une copie de celui-ci en local si besoin !
Sur le site, on peut remarquer que des animations ont été ajoutées. Ainsi, certains éléments ont un mouvement d’apparition, les boutons se déplacent légèrement au hover tout en changeant de couleur. Un écran de chargement des pages a également été ajouté. Ces modifications permettent de rendre le site plus vivant et attrayant pour les utilisateurs. Par ailleurs, j’ai aussi conçu une page pour les erreurs 404 car on oublie bien trop souvent de la personnaliser, ce qui serait un comble pour un site de personnalisation !
Pour que le site soit le plus complet possible et montrer sa validation, les utilisateurs peuvent y trouver divers éléments légaux. J’ai rédigé une politique pour la confidentialité et les cookies ainsi qu’une pour les remboursements et retours, qui sont des éléments essentiels pour un site e-commerce.
Pour valider définitivement le site, des analyses Attrakdiff et google analytics ont été réalisées. Elles montraient le temps passé sur les diverses pages par les utilisateurs ainsi que ce qu’ils pensaient du site.
Pour terminer la validation du projet, j’ai créé une vidéo promotionnelle du site sous format Instagram. Cela permettait de voir que le concept comme le site étaient validés et qu’on pouvait en faire la promotion.
