Article | Lecture rapide
Foreground : le design ne s’arrête pas à l’identité de marque
January 2021
by Cyriaque Billard, illustration Pierre Voisin
Le design est parfois encore compris par certains comme le seul fait d’appliquer une identité de marque à un produit ou à un service. Mais l’identité d’une marque n’est pas simplement incarnée dans ses codes visuels. Et la démarche design s’illustre bien sûr dans la mise en œuvre de ces codes, mais aussi et surtout dans les impressions et les émotions ressenties lors de l’utilisation du produit ou du service. Illustration avec la refonte du site Foreground, lors de laquelle l’équipe marketing s’est laissée convaincre d’utiliser tout le potentiel de la démarche design dès l’amont du projet.
Embarquer une équipe projet dans une démarche design
Lorsque j’ai commencé à travailler sur le projet Foreground en juillet 2019, je me suis rapidement aperçu qu’au-delà d’une simple mise en conformité du site avec l’identité de marque Orange, un travail de design approfondi était nécessaire. Foreground est un site internet B2B. Il permet aux professionnels de l’iOT de présenter en ligne leur catalogue de produits, services et solutions. Les clients Entreprise, ainsi que la force de vente Orange en recherche d’équipement, peuvent ainsi consulter un catalogue de plusieurs centaines de références. Les fournisseurs iOT sont appelés “partenaires” et ce sont eux qui créent et administrent directement leur catalogue sur la plate-forme.
À mon arrivée sur le projet, le site était déjà accessible au public et devait servir de démonstrateur lors d’un salon professionnel imminent. Dans un premier temps, pour pallier à l’urgence de l’échéance, seule la page d’accueil du site a fait l’objet d’une remise à niveau d’ordre graphique afin de la mettre en conformité avec l’identité de la marque : mise en place du modèle de header, ajustement de la typographique et restructuration des rubriques de la page pour une meilleure identification du contenu.
Mais, au-delà d’assurer à très court terme une adhérence minimum à l’identité de marque, j’ai jugé indispensable d’amener l’équipe projet à se donner le temps et les moyens d’intervenir plus profondément sur l’expérience utilisateur du site. Un audit a fait ressortir plusieurs écueils qui étaient autant d’axes de progression. Tout d’abord, un manque d’évidence de la proposition de valeur. Ensuite, une information mal hiérarchisée, une navigation manquant de clarté, une mauvaise mise en œuvre des composants d’interface, et une accessibilité perfectible.
Prendre du recul pour clarifier l’ambition
La version existante du site avait été produite en développement direct par l’équipe projet, sans apport de la méthodologie et de l’expertise d’un ou une designer. Je me suis attaché à démontrer en quoi une expertise design serait bénéfique pour les utilisateurs du site et à la qualité de l’ensemble du service. ll a fallu clarifier les tenants et les aboutissants de la démarche de conception centrée utilisateur, ainsi que la différence entre UX et UI ; et en quoi prendre le temps de l’analyse qui permettrait d’en gagner par la suite.
Un atelier a été co-organisé avec un UX designer externe. Cette étape est riche et fondamentale à mon sens, car elle permet que le designer puisse autant que possible s’approprier la stratégie marketing afin de bien en comprendre les ambitions et objectifs présents et à venir. En effet, un site comme Foreground s’inscrit dans un écosystème de sites Orange consacrés à l’internet des objets ; et il était donc capital de clarifier son positionnement et vérifier qu’il était unanimement partagé par l’équipe projet. Et d’ailleurs, au cours de cet atelier, nous avons découvert que ce n’était pas exactement le cas. Ceci a donc permis de bien délimiter l’offre et son public, ainsi que le service proposé sur le site. Ce moment du projet est essentiel pour l’équipe qui est alors amenée à prendre du recul afin d’exprimer de façon concise sa vision, ses principes et son plan d’actions. On constate alors que l’appréciation de l’existant n’est pas nécessairement la même ; que les ambitions et les priorités ne sont pas partagées par tous de la même façon. Le design facilite l’identification et la réconciliation de cet ensemble.
Déployer la méthode
Dès lors, une phase d’écoute des utilisateurs du site peut être menée et permet non seulement de confirmer certaines hypothèses émises au démarrage du projet ; mais aussi de faire ressortir des attentes essentielles à concrétiser pour favoriser une adoption, une utilisation et une promotion plus large.
La synthèse de ces éléments marketing et d’expérience permet de :
– dégager les parcours utilisateurs majeurs,
– déterminer la nature et la hiérarchie de l’information à exposer avec à la clé une nouvelle navigation prenant en compte la double typologie d’utilisateur,
– clarifier les points d’entrée des différents parcours de tâches,
– alléger et décomposer les processus de saisie en étapes claires,
– rationaliser les templates afin de gagner en temps de développement,
– garantir la capacité d’accroissement du catalogue et d’enrichissement fonctionnel du site.
Après la livraison des wireframes, qui clôture la phase UX, vient la phase de design d’interface pour délivrer les maquettes graphiques finales. Deux outils sont utilisés : Sketch pour le maquettage graphique et Zeplin pour l’interface avec les développeurs situés au Caire et à Paris. Le Web UI Kit sert de ressource pour l’ensemble des composants d’interface utilisés. S’agissant d’un projet B2B, certains composants n’existent pas encore dans le Kit. Ces composants ont été créés et spécifiés pour le projet et seront disponibles dans la prochaine version du Web UI Kit.
Le nouveau site est consultable depuis foreground.orange.com .
Cette équipe projet n’avait jamais collaboré avec un designer. La confiance qu’elle m’a accordée a permis de relever le challenge, en mettant en œuvre une démarche de design enrichissante pour chacun.