Refonte du service de vente en ligne des utilisateurs commerçants d’Epicery

Après un premier projet d’audit ergonomique, Epicery nous a une nouvelle fois missionné pour la refonte de leur service de vente en ligne à destination de ses commerçants.

Contexte

Dans sa lancée vers l’optimisation UX de ses produits, Epicery avait comme volonté de retravailler son offre auprès de ses commerçants. Actuellement, la start-up propose deux outils : le premier est un espace dédié aux gérants et aux managers des boutiques, dans lequel ils ont la possibilité de gérer leur catalogue de produits, leurs horaires ou encore leurs factures. Le deuxième est une plateforme de gestion de commandes dont les commerçants en boutique disposent et auquel les gérants peuvent aussi avoir accès. Ces deux outils manquant de cohérence, l’objectif principal de cette mission a donc été d’harmoniser ces deux plateformes tout en y apportant des optimisations fonctionnelles.

Enjeux

• Faciliter l’autonomie des équipes marketing pour l’optimisation continue des futurs parcours et pages de l’outil
• Définir un nouveau langage visuel capable de générer plus de satisfaction
• Optimiser la performance de recherche, navigation, gestion, repérage et l’adapter en fonction des usages

Plan d’action

1. Transmission des besoins des utilisateurs existants

Cette mission a débuté par un atelier sur l’outil Miro où l’équipe support, celle en contact permanent avec les utilisateurs, a été conviée. Pendant cette phase de découverte et de transmission d’information, nous avons défini les deux profils d’utilisateurs ainsi que leurs besoins.

Nous avons également invité l’équipe à passer en revue leurs outils afin de faire remonter les points de friction et d’enchantement que peuvent rencontrer leurs utilisateurs.

2. Création d’une user journey

La phase de découverte nous a ensuite permis de créer une User Journey à partir des données précieuses qui nous ont été partagées à l’étape précédente. Réalisée sur Miro, elle décrit toutes les actions que doivent idéalement réaliser les utilisateurs à travers ses différents points de contact. Elle prend la forme d’une cartographie sectionnée en plusieurs étapes. Ainsi, elle permet de définir et de s’aligner sur une vision claire pour les designers mais aussi pour les autres parties prenantes.

User Journey présentée sur l’outil Miro

3. Optimisation de l’architecture d’information existante

Nous avons ensuite poser puis optimiser les architectures d’information des deux espaces. L’architecture de l’information est un document représentant de manière schématique la structure et les scénarios d’usage d’un site ou d’une application mobile. Son but est de définir l’envergure fonctionnelle de l’interface utilisateur. Chez Kirk, nous utilisons le vocabulaire visuel conceptualisé par Jesse James Garrett. Pour cette mission, il était question de cohérence et d’harmonie entre les deux outils, ce que nous avons cherché à représenter sur ces schémas.

Architecture de l’information de l’outil utilisé par les gérants et managers

4. Définition et validation d’un Product Backlog

Avant de débuter la phase de conception, nous avons construit un Product Backlog permettant d’avoir une estimation temporelle détaillée. Cela permet ainsi au projet d’avoir un périmètre défini et connu de tous. Il se présente de la manière suivante : les tâches, qui correspondent à des pages ou parcours sont listées pour chaque résolution, avec une estimation en heures précise.

Product backlog utilisé pour les deux plateformes B2B

5. Sketching, conception et itération de wireframes basse-fidélité

Nous avons ensuite entamé la phase de conception avec du sketching. Le sketching, ou « papier/crayon » comme on l’appelle chez Kirk, permet de mettre à plat des idées, de les visualiser rapidement, d’éliminer les mauvaises et de valider efficacement des concepts. Nous avons ainsi réalisé une session en présence des équipes marketing, support et technique, ce qui nous a permis à nous, designers, mais aussi aux participants, de créer et de tester des idées rapidement.

Atelier de sketching dans les locaux d’Epicery avec les équipes marketing, support et technique

Une fois le premier jet validé, nous sommes donc rapidement passés aux wireframes basse-fidélité. Ce sont des croquis réalisés rapidement sur Figma, où on retrouve les codes du croquis sur papier.

Wireframes basse-fidélité de l’outil des gérants et managers en résolution Desktop

Wireframes basse-fidélité de l’outil des commerçants en boutique en résolution Tablette

6. Réalisation et validation de wireframes haute-fidélité

Une fois les concepts validés, nous avons conçu les wireframes haute-fidélité sur Figma. Nous les avons partagé aux développeurs qui ont pu davantage se projeter et nous prévenir des contraintes techniques quand il y en avait. Les wireframes ont par la suite été de précieux alliés pour concevoir les prototypes.

Wireframes haute-fidélité de l’outil des gérants et managers en résolution Desktop

Wireframes haute-fidélité de l’outil des commerçants en boutique en résolution Tablette

7. Création des prototypes pour les tests utilisateurs

À partir des wireframes, nous avons réalisé des prototypes clé-en-main sur Figma. L’idée était d’axer les tests utilisateurs sur les fonctionnalités plus que sur l’aspect visuel, c’est pour cela qu’ils ont été réalisés à partir de ce livrable. Ces prototypes avaient ainsi pour but d’infirmer ou d’affirmer nos hypothèses. Pour les concevoir, nous avons sélectionné avec l’équipe support les parcours les plus pertinents pour les tests et nous les avons rendus interactifs.

8. Conception des maquettes graphiques

Pour conclure ce projet, nous avons conçu les maquettes graphiques à partir des wireframes haute-fidélité. Nous avons appliqué la charte graphique tout en modernisant les interfaces. Grâce à Figma, la transmission des spécificités aux équipes techniques tout en douceur. Le client est ainsi reparti avec des livrables complets !

Et qu’en dit Epicery ?