Créer un design de dashboard pour le e-commerce.

Rakuten France, nouveau nom de PriceMinister, est une marketplace et un site e-commerce créé en août 2000 et rassemblant aujourd’hui près de 20 millions de membres réalisant quotidiennement près de 30 000 transactions par jour.

Home-page du site Rakuten France.

Dans le cadre d’un stage réalisé en tant qu’UX/UI Designer durant 5 mois, mon manager Thomas Tran m’a invité à travailler sur un nouvel outil de gestion des campagnes (ou dashboard pour être plus anglais), impliquant à la fois les équipes commerciales et les équipes marketing.

Le challenge.

Les équipes commerciales passent une grande partie de leur temps à chercher les bons produits et négocier avec les vendeurs Rakuten dans le but de trouver les meilleurs offres à promouvoir. Une fois l’ensemble des produits sourcés et référencés sous forme de liste dans des tableaux Excel, ceux-ci sont envoyés aux équipes marketing qui créent et communiquent autour des opérations (Black Friday, Soldes…).

Nos objectifs.

1. Permettre aux commerciaux de communiquer leur liste plus rapidement avec les équipes marketing.
2. Faire gagner du temps à l’équipe marketing dans la création de leur campagne.
3. Créer une outil de gestion et de suivi des campagnes innovant et agréable à utiliser.

Concevoir un dashboard pour le e-commerce : l’étude utilisateur avant tout.

La difficulté de ce genre de projet réside dans l’étude des utilisateurs et du nombre de limitations à prendre en compte : formule de calculs des filtres, visualisation des listes, informations qui doivent être visibles par les équipes marketing… Des informations obtenues lors des différents entretiens avec les parties prenantes du projet et éclairci grâce à une story-map répertoriant tous les must-haves du dashboard par lot (et donc par importance).

Story-map du projet.

Itérer & itérer pour trouver le dashboard idéal.

La réalisation de nombreux wireframes et les rectifications apportées par Thomas, mon lead UX, ont permis d’avancer très rapidement sur la partie de conceptualisation qui précède le design UI. Les wireframes papiers me permettaient d’itérer rapidement et de créer plusieurs concepts en quelques minutes. En effet, l’idée principale d’un dashboard, comme l’explique Usabilis, est de mettre en forme l’ensemble des données pour permettre une visualisation de la direction globale du projet par les parties prenantes.

Premiers wireframes (un peu sale 🥐).

L’outil de gestion et de reporting est donc différent selon le statut de l’utilisateur, c’est-à-dire selon l’équipe à laquelle appartient l’utilisateur de la plateforme. Ainsi, le temps de prise en main de l’outil de gestion est plus faible étant donné que le salarié ne voit que ce qu’il souhaite.

Pour les commerciaux, il fallait donc une zone de drag-n-drop pour glisser et déposer les fichiers Excels qui avaient été conçu préalablement. Pour les membres de l’équipe marketing : un outil permettant de naviguer entre tous les produits et créer des sélections.

À gauche, l’espace de dépôt pour les commerciaux. À droite, le contrôle des produits pour l’équipe marketing.

Après les wireframes, la mise en forme du tableau de bord grâce à l’UI Design.

Pour cette étape, je me suis reposé sur le design system de Rakuten France créé par l’équipe avant que je ne l’intègre. Le design system est une bibliothèque qui contient tous les composants & les références utiles à l’UI Design (couleurs, fonts par exemple) comme l’explique Newflux.

Il s’agissait donc d’itérer afin de trouver le design le plus agréable pour ceux qui allaient utiliser cet outil de gestion de façon quotidienne.

Pour les commerciaux, la zone de drag-n-drop a été retravaillée avec des pointillées pour faciliter la compréhension de l’utilisateur et le pousser à déposer au bon endroit. L’ajout d’un call-to-action (identique à ceux présents sur le site) n’est pas déroutant pour les salariés et renforce l’affordance de celui-ci :

Zone de drag-n-drop pour les commerciaux.

Pour les équipes marketing, il s’agissait surtout de créer un outil de gestion des campagnes simple et leur permettant de filtrer l’ensemble des produits le plus rapidement possible en prenant en compte les contraintes de calculs fournies par les développeurs :

Liste des produits visibles et filtrables par les équipes marketing.

Les couleurs utilisées sont celles qui viennent du design system de Rakuten :

• rouge #BF0000
• noire #000000
• gris #EEEEEE
• vert #4CA529

La font utilisée est Open Sans, crée en 2010 par Steve Matteson sur une commande de Google.

Pour améliorer la lisibilité des sélections créées dans le cadre des nouvelles campagnes marketing, nous avons réfléchi à un outil de visualisation de données (ou data pour être plus english-friendly) qui met en avant les familles et les types de produits par exemple : idéal pour certaines opérations marketing spéciales mise en place sur Rakuten France.

Outil de visualisation des données de la sélection

Si vous voulez en savoir plus sur ce projet, n’hésitez pas à consulter le projet Behance qui lui est consacré en cliquant ici.

Merci à toute l’équipe Rakuten de m’avoir accueilli et merci à mes mentors Thomas Tran & Victor Meulle-Stef de m’avoir soutenu tout au long de ce projet.

Si vous souhaitez créer un dashboard ou vos rêves les plus fous, contactez-moi sans attendre : hello@augustinstephan.com.