Plateforme B2B

Refonte de l’espace dédié aux opérateurs du marché de Rungis

Rungis International

Le plus grand marché de produits frais au monde

Suite au succès de la refonte du site grand public du marché début 2022, Kirk s’est vu confier la même mission concernant cette fois-ci l’espace connecté des opérateurs implantés à Rungis. L’objectif était principalement pour la Semmaris d’améliorer les démarches effectuées via cet espace et liées à l’implantation sur le marché.

Contexte

Pour les équipes de la Semmaris, cette mission devait se focaliser essentiellement sur la refonte ergonomique et graphique des interfaces : ils souhaitaient en effet conserver la même architecture ainsi que les mêmes informations et fonctionnalités au sein des pages. Nous sommes donc repartis de l’arborescence et des écrans existants de l’espace connecté pour faire notre proposition.

Enjeux

  • Fluidifier les démarches administratives liées à l’implantation sur le marché pour chaque opérateur
  • Tenir informées les entreprises des actualités et de la vie du marché
  • Modéliser les livrables pour permettre l’autonomie des équipes de la Semmaris quant à la construction du site

Plan d’action

1.

Prise de connaissance de l’architecture et des interfaces existantes

2.

Réalisation d’un Design Backlog pour cadrer la mission

3.

Sketching d’un premier jet en interne

4.

Conception des wireframes

5.

Réalisation des maquettes graphiques

1. Prise de connaissance de l’architecture et des interfaces existantes

Les équipes de la Semmaris ont commencé par nous envoyer des captures d’écran de l’espace existant afin que l’on prenne connaissance des informations et des fonctionnalités que nous devions reporter dans notre proposition :

Capture d'écran de l'espace opérateur existant. Fiche formulaire entreprise.
Page de gestion de la fiche entreprise de l’opérateur
Capture d'écran de l'espace opérateur existant. Template vue tableau.
Tableau de gestion des factures de l’opérateur

Afin que l’on comprenne comment la plateforme était structurée, ils nous ont également fourni une arborescence reprenant l’architecture existante et sur laquelle ils avaient travaillé eux-mêmes.

2. Réalisation d’un Design Backlog pour cadrer la mission

Grâce à ces ressources, nous avons pu estimer la charge de travail globale et découper la mission en tâches unitaires à effectuer. Pour chacune de ces tâches, nous avons effectué une estimation du temps de production nécessaire afin d’en déduire un temps global et voir si celui-ci était en accord avec le budget du client.

Nous avons consolidé ces informations au sein d’un Design Backlog, un document élaboré par nos soins, moins complet et formel qu’un Product Backlog classique, mais très utile pour définir un périmètre clair avec le client et éviter les dépassements de budget :

Exemple de Design Backlog

3. Sketching d’un premier jet en interne

Contrairement au projet précédent, la phase de Sketching a été menée uniquement en interne et le temps qui y fut consacré a été drastiquement réduit. En effet, nous nous sommes rendu compte que le livrable n’était pas suffisamment adapté aux phases d’itérations avec le client et que nous y avions finalement consacré trop de temps.

Cela reste par contre un excellent moyen de mettre en forme rapidement ses 1res idées ! Aussi, nous avons pu, grâce à cela, nous mettre d’accord entre nous sur la direction à prendre concernant la conception des interfaces :

Présentation des écrans sous forme de sketching
Lien vers le fichier Figma du Sketching

4. Conception des Wireframes

Une fois la direction validée en Sketching, nous avons commencé par concevoir une première version des Wireframes, qui a été soumise à deux vagues de retours compilés.

L’avantage d’avoir limité les feedbacks clients à ces deux phases est que l’on n’a jamais eu à traiter des retours “au compte-goutte” ou hors-périmètre et donc que le temps de production s’est cantonné jusqu’à la fin à celui provisionné à l’origine.

Comme pour le premier projet, nous avons travaillé d’un côté sur des éléments « standalone » (page d’accueil, principes de navigation, fiche entreprise…) et de l’autre sur des templates de pages et des modèles de composants destinées aux équipes de la Semmaris pour construire les pages de la plateforme en toute autonomie :

Présentation des écrans sous forme de wireframes
Lien vers le fichier Figma des Wireframes

5. Réalisation des maquettes graphiques

Une fois que la totalité des contenus furent fournis par la Semmaris et que l’ensemble des Wireframes furent validés, nous sommes passés à la réalisation des maquettes graphiques.

Le travail fut fait sur la base de ce que nous avions défini en terme de pistes graphiques lors du premier projet. La charge de travail fut moins conséquente car les Wireframes avaient déjà été réalisés avec un niveau de fidélité relativement élevé.

Lien vers le fichier Figma des maquettes graphiques

Et maintenant ?

La Semmaris n’ayant réceptionné que très récemment tous ces livrables, l’intégration et le développement des deux plateformes est toujours en cours.

De notre côté, nous avons hâte de voir nos propositions se matérialiser concrètement et nous sommes curieux de voir quel impact aura notre travail !

Stay tune…

Allez hop, au boulot !

Contactez-nous pour passer à l’action...