Conception de site de marque exemple

Spécificités de la mission Cacharel Amorlab

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...

A propos de Cacharel

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…

Problématique digitale de Cacharel

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.

Définition des univers de la plateforme

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 :

• une présentation du parfum
• une section dédiée à expliquer les modalités du concours et les dotations
• une interface de dessin
• une section destinée à la qualification des utilisateurs
• une galerie des dessins postés par les utilisateurs

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.

Scenario de clic

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 :

• créer un graffiti
• participer au jeu concours
• consulter la galerie des créations
• voter pour les créations

Scenario de clic

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).

Une participation importante

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…

Bilan

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.

Écrit par Julien Muckensturm

Approfondir la conception de site de marque

Techniques utilisées :

• Inventaire fonctionnel
• Arborescence fonctionnelle
• Scénarisation
• Spécifications éditoriales
• Spécifications fonctionnelles
• Wireframing
• Gamification
• Conception web

Formation vidéo à visionner :

• Formation UX design en ligne

Livrables à télécharger :

• Kit ultime projet 150 modèles de livrables à télécharger
• Kit ultime conception 160 écrans de wireframes à télécharger
• Kit UX design 25 modèles à télécharger

Etudes de cas à lire :

• Etude de cas Bic
• Etude de cas courses en ligne
• Etude de cas Mon timbre

Travaux à visualiser :

• Zoning
• Arborescence
• Cartographie

Compétences métier évoquées dans ce projet :

• Design émotionnel
• Design de l'interaction
• Design de l'information
• UI design conception d'interface
• Ergonomie web
• UX design d'expérience utilisateur

Autres ressources sur le web :

• Signalez nous des ressources sympas autour des thèmes abordés dans cette étude de cas UX design en utilisant les commentaires !