Blog

Retour aux UX Cases

Retour de projet : VIVESCIA et la refonte de son extranet

Partager

Catégories

2134

Retour de projet : VIVESCIA et la refonte de son extranet

Dans le cadre d’un vaste projet de transformation digitale, le groupe VIVESCIA, 1er Groupe Coopératif céréalier en France (3,5 milliards d’euros de CA par an), a fait appel à Wexperience pour la refonte de son “extranet”, pour l’améliorer, le moderniser, et le rendre pratique à utiliser autant sur ordinateur que sur mobile.

Retour sur un projet extraordinaire !

Qui ?

Premier acteur en France et 3ème à l’échelle européenne, VIVESCIA assure le lien entre les 11.000 agriculteurs de leur réseau qui produisent les céréales, et les multinationales de l’alimentaire qui les transforment et les mettent sur le marché.

VIVESCIA s’appuie sur un extranet qui fonctionne comme un site de bourse : les agriculteurs adhérents au Groupe VIVESCIA ont accès à cette interface web qui leur permet d’acheter et de revendre leurs graines / céréales. Cet outil représente donc un enjeu business fondamental pour VIVESCIA .

Besoins de la refonte

Développé il y a plus de 10 ans, l’extranet était jugé comme trop technique, désuet, inefficace, et non conforme aux besoins du marché actuel et futur.

L’objectif pour Wexperience était donc :

  • De rendre les interfaces beaucoup plus faciles à utiliser pour les agriculteurs
  • Moderniser le design
  • Créer un extranet pratique à utiliser autant sur desktop que sur mobile.

Réponse de Wexperience

Pour réaliser cette mission, nous avons proposé de mettre en place un processus de refonte structuré et basé sur une démarche centrée utilisateurs. Cette mission s’organise en 3 temps

  1. la phase d’immersion / préparation
  2. La phase de conception et de Direction Artistique
  3. Le maquettage graphique et l’intégration html/CSS

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

1/ La phase d’immersion et de préparation

Si VIVESCIA connait parfaitement son métier et est en contact permanent avec son réseau, nous avons commencé la mission par des ateliers internes avec les équipes marketing et commerciales pour mieux comprendre le métier et l’offre de VIVESCIA, et avoir une première connaissance des profils des agriculteurs du réseau.

Pour cela, la technique des Proto-Personas nous permet de construire des archétypes de clients, représentatifs des profils sociaux démographiques des utilisateurs de l’extranet, mais aussi permet d’inventorier leurs usages et besoins, et leur façon d’interagir avec VIVESCIA , et leur “maturité digitale”.

Autre étape essentielle de cette 1ère phase, l’organisation de Tests Utilisateurs sur l’extranet existant avec des agriculteurs dont les profils ont été soigneusement choisis pour correspondre aux différents profils d’utilisateurs.

À travers des entretiens individuels, le principe est de leur faire réaliser des tâches comme dans la vie réelle, et d’observer leur navigation, pour identifier ce qui fonctionnait bien et ce qui posait problème.

Les tests utilisateurs sont filmés et enregistrés, puis analysés. Tout est pris en compte, y compris les mouvements oculaires des testeurs. Notre matériel d’eye-tracking permet d’identifier des problèmes ergonomiques dont les testeurs n’ont même pas conscience !

Pour VIVESCIA, cet audit a été réalisé auprès de 10 testeurs, avec des entretiens individuels de 45 minutes par personne.

L’outil Hotjar a également servi lors de cette première phase de tests pour identifier les zones de clics, la façon dont les utilisateurs scrollaient dans les pages, et disposer de données quantitatives sur la façon dont les utilisateurs naviguaient sur l’extranet.

À l’issue de ces 1ères études, nous avons pu construire un diagnostic très détaillé de la situation, et développer des convictions communes avec VIVESCIA sur les transformations à réaliser sur le nouvel extranet. Des convictions non pas basées sur une vision personnelle, mais sur l’observation des utilisateurs, c’est ce qui fait toute la différence, et permet d’engager toute l’entreprise dans le projet de transformation !

Importance des tests utilisateurs :

Le recours à la méthodologie des tests utilisateurs occupe une place centrale dans notre démarche, et pas seulement lors des refontes. Que ce soit en amont de la refonte, ou pour vérifier les performances de nouvelles interfaces, les tests utilisateurs sont la méthode reine pour identifier de potentiels problèmes d’ergonomie, et en mesurer l’importance.

Cela nous permet de comprendre surtout comment les utilisateurs raisonnent, et comment organiser et hiérarchiser les informations dans les parcours, pour atteindre le plus simplement et le plus rapidement possible les objectifs des utilisateurs.

Snapshot de restitution de TU avec le problème, les explications, et la recommandation

Livrable -> restitution des tests utilisateurs

2/ Phase de conception et de Direction Artistique

À la suite de ces tests, nous avons pu concentrer nos travaux sur l’organisation de l’arborescence, la navigation, et la structuration de l’information et des parcours dans l’extranet. Cette conception est réalisée sur wireframe (des maquettes n’intégrant pas le design, avec une déclinaison desktop et mobile de tous les écrans.

Sur la base de ces wireframes, nous avons pu construire un prototype animé dans Invision, et vérifier son bon fonctionnement dans cadre de nouveaux tests utilisateurs. Le but ? valider les parcours, l’ergonomie, les choix visuels proposées, et pouvoir corriger des choix de conception mal compris.

En parallèle de cette conception, nous avons pu retravailler l’intention graphique. Tout en respectant les codes graphiques de la marque, nous avons pu développer une identité digitale nouvelle, cohérente avec les objectifs de simplicité et de modernité qui étaient chers à l’équipe de VIVESCIA .

Le travail graphique consiste à la fois à construire l’univers graphique, mais aussi créer une dynamique sur le site à travers les interactions pour faciliter la compréhension du site et la navigation (call to action, comportement au survol des éléments cliquables, loaders…)

Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici

3) Maquettage graphique et Intégration HTML/CSS

La phase de maquettage graphique consiste à fusionner les wireframes et la nouvelle identité graphique. Pour VIVESCIA, ce sont plus de 200 maquettes qui ont été créées. L’objectif de ces maquettes est de préparer le travail d’intégration html/CSS, tache durant laquelle les intégrateurs ne doivent avoir aucune question à se poser sur les écrans.

L’intégration html/css est la phase finale de notre intervention

En respectant les règles W3C, l’intégration est calée pour fonctionner parfaitement sur les navigateurs habituels, avec un accent mis sur la performance du site (vitesse de chargement), et respect des règles d’accessibilté.

Livrable -> Code HTML et maquettes graphiques de tout le site

Outils

Pour assurer la qualité de nos prestations, plusieurs outils nous permettent d’optimiser les coûts et les temps de conception.

Invision : pour le partage d’informations et les discussions sur le projet. Invision est également utilisé pour le prototypage

Sketch : outil de conception, qui permet de gagner du temps en production. Avant de passer à la conception de maquettes graphiques, celles-ci sont conçues sous la forme de maquettes « fil de fer » (wireframes) qui permettent de se concentrer d’abord sur l’architecture d’information avant l’apparence graphique du site. La légèreté de l’outil permet également de gagner du temps de production en favorisant la mise en forme d’idées de manière plus rapide.

Hotjar : outil d’analyse comportementale qui nous a permis de récolter de l’information qualitative – tout ce qui n’est pas comptabilisable. Nous parlons ici des « points chauds » ou heatmaps du site, de l’enregistrement du comportement des utilisateurs et des entonnoirs de conversion.



Cet article vous a plu ? Abonnez-vous à notre newsletter et recevez notre actualité et plus de contenus sur l’expérience utilisateur.  😉


Auteur
Olivier Sauvage
Olivier Sauvage

Olivier Sauvage également appelé CapitaineCommerce, est un expert e-commerce reconnu et spécialisé dans l'expérience utilisateur digital. Aujourd'hui, il intervient en tant que consultant pour les grands groupes internationaux de retail dans l'optimisation de tous leur canaux de communication digitale mais aussi en tant que conférencier pour les grands événements digitaux.