Ecommerce, design d’une solution produit - IOmentum – Black Hive

Ecommerce, design d’une solution produit – IOmentum

IOmentum est une agence de développement en total remote. Ils réalisent aussi bien des sites comme des apps. Une partie de leurs actions est également de faire des audits techniques chez leurs clients.

Contexte

IOmentum est une agence de développement en total remote. Ils réalisent aussi bien des sites comme des apps. Une partie de leurs actions est également de faire des audits techniques chez leurs clients.

Objectifs

IOmentum a développé un CMS permettant la création d’un ecommerce à destination des épiceries bios. Le CMS a d’abord été développé pour un client qui souhaitait un produit ecommerce simple à maintenir. IOmentum a décidé de le proposer à d’autres clients potentiels. L’objectif principal du projet est de faire gagner du temps aux commerçants (épicerie bio).

Rôles et responsabilités

J’ai réalisé un audit complet de la solution (interface client et commerçant). Ensuite j’ai donné un certain nombre de recommandations UI et de la communication.

L’environnement du projet

L’équipe de IOmentum fait une dizaine de personnes principalement des développeurs, mais je n’ai travaillé qu’avec Morgane la PO en charge de ce projet. Une partie de la mission s’est déroulée avec l’équipe de développeurs, pour leur expliquer les avantages de l’UX (principalement sous forme de formations). Ensuite, le reste était des échanges la PO Morgane qui étaient responsable de ce produit.

Périmètre d’actions et contraintes

La principale contrainte venait du temps. Le projet devait sortir dans 1 mois, il était impossible de faire une refonte globale du produit. Le but était de réaliser des améliorations rapides et des recommandations pour la V2.

Utilisateurs et audience

Le produit contient deux cibles : La première il s’agit des commerçants qui vont utiliser la partie CMS pour gérer les stocks et les commandes. La seconde cible ce sont les clients qui vont passer leurs commandes sur le site.

Comment vont-ils utiliser le produit ?

Les commerçants : Le produit sera utilisé pour la gestion des stocks et des commandes. Ce sera un outil utilisable tout au long de la journée pour prévoir les commandes. Les clients : Le client utilisera le produit pour passer ses commandes et décider quand il souhaite aller chercher sa commande. Le plus généralement la commande est passée dans la journée pour aller le chercher en fin de journée après le travail.

Diagnostique des l’interface

Version CMS

L’interface comporte plusieurs onglets permettant de gérer l’ensemble des fonctionnalités :

  • Gestion des commandes
  • Gestion de l’inventaire
  • Gestion des images
  • Gestion de la boutique

L’objectif du CMS est de proposer un outil avec une prise en main simple pour le commerçant. C’est pour cette raison que les fonctionnalités sont limitées. Des tests ont d’ailleurs été réalisés par l’équipe de IOmentum pour comprendre les besoins du client en amont et ne pas proposer trop de fonctionnalité.

Gestion des commandes

Cet onglet comporte l’ensemble des commandes effectuées sur le site classé par date de passage de la commande. L’écran comprend un tableau avec un récapitulatif des commandes (une ligne par commande), il est possible de déplier chaque ligne pour voir le détail de la commande et ainsi la préparer. Une fois la commande réalisée, le commerçant à la possibilité de changer le statut de la commande, ce qui enverra une notification au client.

Mes recommandations

Cet écran est celui qui sera le plus consulté par le commerçant. C’est ici qu’il va préparer ses commandes et les valider. Il doit donc facilement naviguer et surtout gagner du temps. Pour faciliter la visualisation, j’ai aligné l’ensemble des éléments dans le tableau. Ensuite j’ai ajouté un système de filtre avec des tags à cocher pour trier les commandes et voir seulement les commandes désirées (en cours, annulé…)

J’ai ajouté un switch plutôt qu’un menu déroulant, cela va faciliter la validation de la commande (un seul clic). Au moment de préparer la commande, j’ai ajouté des cases à cocher pour faciliter la préparation. Un autre switch pour modifier le statut de la commande est également présent. Dans l’idéal il faut aussi ajouter un champ de recherche pour permettre au commerçant d’accéder directement à une commande (via le nom du client par exemple).

Gestion de l’inventaire

Cet onglet permet au commerçant de gérer les produits présents ou non sur le store. Il ne gère pas le stock, seulement la présence ou non d’un produit. Cet écran est ressemble au précédent, car il s’agit d’un tableau avec un récapitulatif des produits. Pour ajouter un nouveau produit, un popup va apparaitre et permettra de rentrer les informations.

Mes recommandations

Comme sur l’écran précédent, j’ai ajouté un système de tag avec des filtres pour faciliter la visualisation des produits. Pour améliorer encore l’expérience, il faut ajouter un champ de recherche également (non ajouté, car pas possible à implémenter pour l’instant chez IOmentum). J’ai modifié la visualisation des éléments pour passer par un format, card plutôt qu’un tableau. Le but étant de faciliter la lecture, un tableau avec de longues lignes va fatiguer les yeux. La hiérarchie des éléments a été également revue pour améliorer la lecture. Les éléments ne sont pas modifiables directement, il faut d’abord appuyer sur le bouton modifier. On évitera ainsi les mauvaises manipulations. On retire les switchs vert et rouge qui sont confessant. Place à des switchs avec la valeur écrite à l’intérieur, ils sont plus pratiques parce que la donnée est directement visible. Pour visualiser si un produit est disponible une pastille de couleur est indiquée directement sur la card ce qui facilite la compréhension. L’ajout des images se fait maintenant directement sur la card ce qui simplifie l’interface, car il n’y a plus besoin de l’onglet « gestion des images ».

Gestion des images

Dans cet onglet le commerçant à la possibilité de voir l’ensemble des images présente sur le serveur. Il peut en cliquant dessus copier le lien de l’image. Par contre, il ne peut pas modifier ou supprimer des images.

Cet écran n’est pas vraiment pratique, j’ai donc décidé de le supprimer pour mettre la gestion des images directement dans les cards liées aux produits.

Gestion de la boutique

Ici le commerçant va gérer les informations essentielles de la boutique, comme le nom, les réseaux sociaux, l’adresse ou les horaires.

Mes recommandations

Pour cet écran j’ai modifié la hiérarchie visuelle des éléments. La page avait été pensée de façon à s’adapter à la page, ce qui est une bonne chose. Mais comme cela ajoute des espaces à des endroits « non prévus » le confort de lecture est détérioré. J’ai donc créé chaque élément comme un bloc qui restera fixe. Pour le responsive, les blocs vont s’empiler en gardant la même hiérarchie visuelle.

J’ai également modifié certains champs, l’adresse par exemple qui est divisé en plusieurs. On évite ainsi les oublis de code postal, ou de la ville. Chaque élément est modifiable séparément sans impacter les autres. Bien entendu, l’idée est toujours de minimiser les erreurs.

Version client

La boutique

C’est l’écran principal de la boutique. La première image présente l’ensemble des produits avec la possibilité d’ajouter de produits au panier. La seconde image est une visualisation des informations de la boutique telles que l’adresse, les horaires ou les réseaux sociaux. Le dernier écran représente les catégories dans un menu burger, chaque élément est comme un filtre avec des sous-éléments.

Le panier

La gestion du panier se fait avec un autre menu burger sur l’autre côté de l’écran. L’ensemble des produits sont présents avec la possibilité d’ajouter des quantités ou de supprimer le produit. Une fois les produits vérifiés ont peu passé à la finalisation qui fait apparaitre une popup.

Mes recommandations

J’ai simplifié l’ensemble de l’interface en deux écrans. Sur le premier on peut voir que les catégories ont été ajoutées directement sur la page, plus besoin de passer par un menu burger. Le champ de recherche passe au-dessus du panier. La ligne du panier devient plus visible avec clairement indiqué le nombre de produits. Je me menu pour visualiser rapidement le panier, c’est un gain de temps pour les clients. Chaque fiche produit se voit ajouter un bouton info (le point d’interrogation). Il permet d’avoir plus d’informations sur le produit comme les allergènes ou la provenance du produit par exemple. Les horaires du magasin ainsi que l’adresse sont visibles en footer. Plus besoin de faire un clic supplémentaire. J’ai retiré les réseaux sociaux, le but étant de proposer une interface où le client doit faire ses courses pas un lien qui risque de l’envoyer vers les réseaux sociaux (où il risque d’oublier d’acheter ses courses).

La page du panier comprend le récapitulatif de la commande, ainsi que les coordonnées du client. On évite ainsi la popup qui peut disparaitre en cas de mauvaise manipulation.

Conclusions

Que s’est-il passé à la fin ?

Certaines modifications ont été effectuées immédiatement sur l’interface, mais il s’agit de changements mineurs. Je pense notamment à certains changements dans les boutons ou les textes par exemple. L’ensemble des remarques seront implémentées plus tard par souci de temps.

Les objectifs ont-ils été atteints ?

L’objectif principal était d’auditer l’ensemble du produit et du parcours client. Cet objectif a été atteint, par contre comme les modifications n’ont pas encore été effectuées les problèmes ne sont pas encore résolus.

Quelles sont les leçons apprises ?

Ce projet est particulièrement intéressant, car il m’a permis de travailler avec une équipe composée entièrement de développeurs. Le challenge principal était de faire comprendre les besoins en UX au cours du développement d’un produit. Étant des profils plus techniques, ils ne voyaient pas toujours l’intérêt d’alléger les fonctionnalités du produit. C’était une bonne manière d’évangéliser l’UX chez une population qui n’est pas forcément sensible à ces questions.

Témoignage client

Nous avons rencontré Vincent via une relation commune, juste avant le lancement de notre projet. Le timming était parfait, car nous voulions revoir les défauts principaux de notre produit et prévoir les nouvelles fonctionnalités pour la V2. Nous avons été agréablement surpris par sa réactivité et son efficacité. Ses retours étaient pertinents et nous ont permis d’améliorer grandement notre projet. Nous avons également eu accès à une formation sur l’UX, ce qui nous a permis de changer notre vision sur nos futurs projets.

Morgane Gaillard
Dévoppeuse, front end — PO chez IOmentum