Exemple de conception d'une plateforme de jeu en ligne.
Cette étude de cas UX design porte sur l'architecture de l'information et le design d'expérience utilisateur d'une plateforme de jeu en ligne dans le cadre du lancement du parfum Amor pour hommes de Cacharel.
Nous avons souhaité valoriser la mission Amorlab, afin de montrer les bénéfices de la mise en place d’un scénario animé dans le cadre d’un projet interactif (fluidifier les échanges entre tous les profils engagés et baser les ateliers de travail sur des éléments fonctionnels tangibles).
Les travaux ont été réalisés en 2006.
Visualisez le projet UX Cacharel Amorlab...
La marque Cacharel, filiale du groupe loreal, est connue à l’échelle internationale pour ses parfums, principalement destinés à une cible féminine.
En 2005, Cacharel lance un nouveau parfum amor pour homme destiné à compléter sa gamme et élargir sa cible au public masculin ; le concept de communication valorise la créativité en exploitant les codes du graffiti et du street art.
Dans ce contexte, il s'agissait d'une mission de conception fonctionnelle visant à matérialiser le dispositif interactif destiné à accompagner le lancement du parfum sur support digital : Amorlab a été retenu comme concept-relais de l’opération sur internet…
Surfant sur le concept 2.0 (2006…) pour créer l’événement autour du lancement du produit, les équipes marketing ont souhaité exploiter le concept communicationnel du street art pour le traduire sous forme de jeu interactif, dans lequel les utilisateurs seraient invités à transcender leur créativité en réalisant des tags, pour gagner des parfums.
La marque souhaitait ainsi marquer les esprits par la création d’un dispositif innovant tout en véhiculant les valeurs constitutives du parfum…
La question consistait donc à transposer ce concept, pas réellement clair au départ du projet, sous forme d’interface ludique.
La première étape du travail a consisté, d'une part, à définir les grands espaces qui composeraient la plateforme, puis à traduire, d'autre part, les modalités de fonctionnement du concours.
Nous sommes partis de la fonction centrale que devait incarner la plateforme (permettre aux utilisateurs de créer des tags) pour lister les briques fonctionnelles du projet :
Les interlocuteurs du projet partageant la culture marketing pour principaux traits de profil, il s’agissait d’offrir une vue non techniciste valorisant davantage les aspects fonctionnels : pour ce faire, nous avons opté, dans un premier temps, pour la matérialisation d’une arborescence fonctionnelle visant à traduire sous forme schématique notre proposition de mécanique de fonctionnement du dispositif.
Grâce à cette vision schématique, nous avons rapidement pu nous accorder avec les équipes marketing sur le dispositif à créer et orienter le processus de conception sur des éléments tangibles.
Le fonctionnement proposé consistait à inciter l’utilisateur à créer un tag, publié dans une galerie, et soumis aux votes des utilisateurs, récompensant les créations les plus plébiscitées par les utilisateurs eux-mêmes.
Pour minimiser le phénomène d’abandon caractéristique des jeux-concours, car obligeant l’utilisateur à saisir des informations personnelles pour participer, nous avons proposer de retarder la qualification de l’utilisateur au plus tard, après seulement que ce dernier ait créé ses graffitis, pour que son implication soit plus forte.
La publication du tag dans la galerie devenait ainsi optionnelle, tout comme la participation au jeu concours, et le bénéfice utilisateur dépassait alors largement la dotation puisque l’interface de création serait jugée suffisamment attractive pour créer l’événement : un cercle vertueux permettant de créer du trafic sur le site (créer un tag est fun, le lien circulera facilement), en exposant l’utilisateur au parfum, mais sans forcément le contraindre à participer au concours…
Sur cette base de fonctionnement, nous avons modélisé les scénarios de clics par rapport aux objectifs de visite identifiés :
En nous appuyant sur des scénarios de visite validés, nous avons pu matérialiser tous les éléments constitutifs de l’interface par le biais de storyboards… mais pour un client profane de la conception, les storyboards haute-fidélité demeurent parfois trop statiques pour appréhender la mécanique de fonctionnement générale, même si elle est sous-tendue par une arborescence fonctionnelle et des parcours utilisateurs…
Afin de clarifier le fonctionnement, et de démontrer au commanditaire la fluidité du processus fonctionnel proposé, nous avons procédé à l’animation des wireframes en créant des scénarios détaillant l’intégralité du fonctionnement de la plateforme.
Ce travail a notamment été essentiel pour expliciter le fonctionnement détaillé de l’interface de dessin et tous les comportements impliqués par la manipulation des outils de création : il s’agissait de créer des graffitis dans différents formats, ce qui modifiait considérablement les fonctions de l’interface de dessin dans chaque cas (émoticones pour msn, fond d’écran, visuel, t-shirt…).
La technique du scénario animé, qui permet de matérialiser tous les écrans d’un parcours utilisateur de façon détaillée, y compris les interactions de surface, est un véritable accélérateur en matière de travail collaboratif et offre dans le cadre de workshop impliquant des profils métiers diversifiés (projet, marketing, architecture, création, technique), une solution pragmatique et efficace pour fluidifier les échanges, clarifier les discussions, et faciliter la prise de décision, grâce à un support fonctionnel tangible !
Enfin, le scénario animé facilite fortement la rédaction des spécifications fonctionnelles puisque le fonctionnement détaillé à déjà été abordé et validé au cours des ateliers de travail… on évite ainsi une cause majeure de dérapage en cours de projet (les aller-retour et arbitrages interminables sur les spécifications définitives).
storyboard haute-fidélité de l’écran d’accueil du dispositif
storyboard haute-fidélité de l'espace lab
storyboard haute-fidélité de l'espace lab
storyboard haute-fidélité du formulaire d'inscription
écran statique matérialisant l’interface de dessin, base du scénario animé
écran statique matérialisant l’interface de dessin, base du scénario animé
D’un point de vue méthodologique, l'intervention de l'architecte de l'information en conception a permis d’accélérer considérablement la mise en œuvre de ce projet, en résolvant de nombreuses incompréhensions et en proposant rapidement des solutions tangibles et visibles.
Sur le plan marketing, l’opération a été un franc succès : un événement international (france, espagne, belgique, italie, allemagne, pays-bas), 16 000 inscriptions en France, 20 000 coupons distribués, 250 000 visiteurs uniques ont créé des graffitis et participé au concours, et plus d'1 million de téléchargements d'émoticones Amorlab depuis msn…
La mission Amorlab a été une réussite et représente un bel exemple de méthode projet agile, limitant la documentation pour privilégier le support.
Techniques utilisées :
Formation vidéo à visionner :
Livrables à télécharger :
Etudes de cas à lire :
Travaux à visualiser :
Compétences métier évoquées dans ce projet :
Autres ressources sur le web :