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

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.

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

Harmonie mutuelle est une société mutualiste française basée sur Paris. Pour accéder à leurs comptes, les adhérents utilisent un espace en ligne qui doit gérer l’ensemble des besoins.

Contexte

Harmonie mutuelle cherche à moderniser son image, cela passe par sa communication, mais aussi par l’interface de ses produits. Le style de l’interface ne correspond plus à la vision de l’entreprise qui souhaite le moderniser en donnant un style plus actuel à l’interface utilisateur, tout en gardant l’esprit de la charte.

Objectifs

Avoir un espace adhérent permettant de reconnaître immédiatement la marque et qui soit agréable pour les adhérents.

Utilisateurs et audience

Le produit est utilisé par les adhérents de l’espace adhérent harmonie mutuelle. Le type d’utilisateur va varier car harmonie travaille avec toutes les catégories de profil (age, travail…).

Comment vont-ils utiliser le produit ?

Principalement pour regarder les remboursements, transmettre des documents à harmonie mutuelle et trouver des professionnelles partenaires.

Évolution de l’interface

L’ancienne interface était beaucoup trop lourde et peu agréable pour la navigation. Avec l’équipe UX nous avons enlevé les éléments perturbant la navigation comme les bandeaux de publicités en haut et sur les cotés. Le menu au dessus a disparu au profil d’un menu fixe sur le coté gauche de l’écran. Le double menu est également supprimé au profit de menu déroulant incorporé directement dans le menu de gauche. L’ensemble de la hierarchie de la page a été totalement revue et corrigée pour devenir plus aérée.

Ancienne version

Nouvelle version

Wireframes

L’ergonomie de toute les page a été modifiée, chaque page a donc été maquetée d’abord via des wireframes puis testée par l’équipe UX. Une fois l’interface validée par les tests le maquétage était réalisé.

Quelques exemple de la nouvelle interface

Interface pour l’accessibilité

Un problème récurrent est apparu tout au long de la mission c’est le sujet de la varité des profils. Harmonie mutelle assure toutes les catégories sociaux profesionnelles ainsi que tout les ages. De ce fait, il faut que l’interface soit agréable, mais aussi accessible à tous. C’est pour cette raison que l’ajout d’une option pour modifier les préférences d’affichage a été prévue.

Modifier la police d’origine

Pour facilier le confort de lecture de l’ensemble des utilisateurs, une police adapté pour les dislescique a été ajoutée. Par la suite, d’autres police seront ajoutée à l’interface (plus grasse, à empatement).

Changement de la taille de la police

L’ajout d’une option pour augmenter la taille du texte est également implémenté. Cette option est la plus problématique car elle oblige à modifier certaines interfaces car la possibilité d’augmenter la taille du texte n’avait pas été prévus.

Modification des couleurs de l’interface

Pour finir un des modes de couleurs ont été ajouté avec : Un mode contraste élevé Un dark mode

Nouvelle charte de l’interface

La nouvelle charte pour le site est plus épurée que l’ancienne. Le but étant d’obtenir une interface plus morderne et dynamique. Les couleurs utilisée dans la charte d’origine de Harmonie Mutuelle ont été respectées.

Témoignage client

Vincent a intégré l’équipe en tant que Designer UI pour une mission de 8 mois. Il a pris en charge la production des maquettes des fronts clients et collaborateurs. Il a su s’adapter au mode agile des sprints design et de réalisation. Il a réussi également son intégration au sein de l’équipe. Vincent est force de proposition et son expertise a permis une production de qualité.

Jean Jalaber
Responsable du pôle UX/UI chez Harmonie Mutuelle