UX/UI Design B2B Application Web 2022

AgoraSquare

Application complète pour les grossistes du marché de Rungis combinant prise de commande, solvabilité, facturation électronique et comptabilité.

Informations du projet

Rôle

Lead UX/UI Designer

Durée

8 mois

Équipe

4 personnes

Année

2022

AgoraSquare - Interface de gestion B2B pour grossistes du marché de Rungis, montrant le dashboard principal avec gestion des commandes, facturation et comptabilité
0 Taux d'adoption
0 Gain de productivité
0 Réduction des impayés
🎯

Le Défi

Contexte

Le marché de Rungis, plus grand marché de gros au monde, est le poumon de l'approvisionnement alimentaire français. Pourtant, malgré leur position stratégique dans la distribution alimentaire, les grossistes utilisaient encore des processus largement manuels pour gérer leurs opérations quotidiennes.

Entre feuilles Excel, carnets papier et systèmes obsolètes, ils perdaient un temps précieux dans un environnement où chaque minute compte. Les commandes s'effectuaient par téléphone ou sur papier, la vérification de solvabilité des clients était approximative, et la facturation manuelle générait d'innombrables erreurs.

150+
Grossistes à Rungis
40%
Erreurs de facturation
3h
Horaire de début d'activité

Problématiques Identifiées

  • Gestion des commandes inefficace Saisie manuelle chronophage avec risques d'erreurs élevés
  • Absence de visibilité sur la solvabilité Impayés récurrents faute d'informations financières
  • Facturation manuelle complexe 2 à 3 heures par jour consacrées à la facturation
  • Pas de centralisation des données Informations dispersées entre plusieurs outils
  • Difficultés de suivi comptable Réconciliation bancaire et comptabilité approximatives

Objectif Principal

Créer une application complète et intuitive qui digitalise l'ensemble du cycle commercial : de la prise de commande jusqu'à la comptabilité, en passant par la vérification de solvabilité et la facturation électronique. L'enjeu était de concevoir un outil suffisamment simple pour être adopté par des professionnels peu familiers avec les outils numériques, tout en étant suffisamment puissant pour gérer des opérations complexes.

Contraintes du Projet

Le projet devait répondre à plusieurs contraintes techniques et humaines spécifiques :

  • Interface utilisable dès 3h du matin, dans des conditions de luminosité variables
  • Compatibilité avec tablettes et ordinateurs pour flexibilité d'usage
  • Fonctionnement offline pour pallier les problèmes de connexion sur le marché
  • Intégration avec les systèmes comptables existants (EBP, Sage, Cegid)
  • Respect des normes de facturation électronique françaises
🔍

Phase de Recherche

Méthodologie

Pour comprendre les besoins réels des grossistes et concevoir une solution véritablement adaptée, j'ai adopté une approche immersive. J'ai passé plusieurs semaines sur le marché de Rungis, observant les pratiques, menant des entretiens approfondis et analysant les workflows existants dans leur contexte naturel.

Cette phase de recherche terrain a été essentielle pour saisir les nuances du métier, comprendre les contraintes physiques (travail de nuit, environnement froid, manipulation de marchandises) et identifier les vrais points de friction dans les processus quotidiens.

Intensité de la recherche terrain
  • 3 semaines d'immersion et 15 grossistes observés
  • 20 entretiens semi-directifs menés sur place
  • Cartographie de 8 workflows critiques
  • 3 ateliers de co-création avec 10 grossistes

Insights Clés Découverts

Les observations et entretiens ont révélé des besoins et contraintes spécifiques qui ont guidé toutes les décisions de design :

  • Rythme de travail intense Les grossistes travaillent dès 3h du matin dans des conditions difficiles (froid, fatigue)
  • Rapidité critique La rapidité de saisie est cruciale pour éviter les pertes de marchandises périssables
  • Risque financier Le manque de visibilité sur la solvabilité génère des impayés importants
  • Charge administrative La facturation manuelle prend 2-3h par jour minimum, temps perdu sur le cœur de métier
  • Simplicité requise Besoin d'une interface simple, sans fonctionnalités superflues qui ralentiraient l'usage
  • Connectivité instable Problèmes de réseau fréquents nécessitant un mode offline robuste

Personas Principaux

À partir de cette recherche, j'ai identifié 3 personas principaux qui représentent les utilisateurs cibles de l'application :

Pierre, 52 ans - Grossiste en fruits et légumes

Objectif : Traiter rapidement les commandes pour maximiser son chiffre d'affaires
Frustrations : Perd du temps avec la paperasse, subit des impayés réguliers
Comportement : Peu à l'aise avec les outils numériques, privilégie la simplicité

On a besoin d'un outil rapide et fiable. Ici, chaque minute compte et on ne peut pas se permettre de perdre du temps avec un système compliqué.

— Pierre, grossiste en fruits et légumes depuis 25 ans

Cartographie du Parcours Utilisateur

J'ai cartographié le parcours complet d'une journée type, de l'arrivée à 3h du matin jusqu'à la clôture comptable, identifiant les moments clés, les émotions et les opportunités d'amélioration à chaque étape.

💡

Idéation & Wireframes

Architecture de l'Information

À partir des insights de recherche, j'ai conçu une architecture d'information claire, structurée autour des 4 modules principaux qui répondent aux besoins identifiés : Commandes, Clients & Solvabilité, Facturation et Comptabilité. L'objectif était de créer des parcours optimisés pour la rapidité d'exécution dans des conditions de stress et fatigue.

Chaque module a été pensé pour minimiser la charge cognitive et réduire le nombre d'étapes nécessaires pour accomplir les tâches les plus fréquentes. La navigation a été simplifiée au maximum, avec un accès direct aux fonctions essentielles depuis l'écran d'accueil.

Wireframes & Itérations

J'ai réalisé plusieurs séries de wireframes, testées et itérées avec les utilisateurs. Les premières versions étaient trop complexes et ont été progressivement simplifiées suite aux retours des grossistes. Chaque écran a été optimisé pour réduire le nombre de clics et faciliter la saisie rapide.

Principes de Design Retenus

  • Rapidité d'exécution Minimiser le nombre de clics et privilégier les actions directes (3 clics maximum pour toute action)
  • Prévention des erreurs Validation temps réel avec messages clairs et suggestion automatique de corrections
  • Clarté visuelle Hiérarchie forte, zones bien identifiées par couleurs, contrastes élevés pour lisibilité optimale
  • Adaptabilité Design responsive tablette et desktop avec zones tactiles optimisées (minimum 48px)
  • Offline-first Fonctionnement sans connexion stable avec synchronisation automatique dès le retour du réseau
  • Feedback immédiat Retours visuels instantanés sur chaque action pour rassurer l'utilisateur

Flux Utilisateur Optimisés

J'ai cartographié et optimisé les 3 flux critiques de l'application :

Durée moyenne des parcours critiques (en minutes)
  • Avant refonte
  • Après livraison
  • Prise de commande express 12 étapes et 5 minutes réduites à 4 étapes et 1,5 minute grâce à l'auto-complétion.
  • Vérification de solvabilité 6 minutes de recherche dispersée ramenées à 2 minutes avec le score en temps réel.
  • Facturation électronique 7 étapes et 15 minutes réduites à 3 étapes et 3 minutes via la génération automatique.
Itérations de prototypage — temps de saisie d'une commande
  • Durée moyenne (minutes)

Tests Utilisateurs Itératifs

À chaque étape de conception, j'ai réalisé des tests avec les grossistes pour valider les hypothèses et identifier les points de friction. Ces tests ont permis d'affiner progressivement l'interface et d'atteindre un niveau d'utilisabilité optimal pour le contexte d'usage spécifique.

🎨

Prototypes & Design Final

Maquettes Haute-Fidélité

À partir des wireframes validés, j'ai créé des maquettes haute-fidélité qui traduisent visuellement les principes de design établis. L'interface a été pensée pour être lisible dans toutes les conditions d'utilisation : faible luminosité matinale, reflets extérieurs, et conditions de fatigue des utilisateurs.

Design System Complet

J'ai développé un design system adapté au contexte spécifique des grossistes de Rungis. Chaque décision a été guidée par les contraintes d'usage identifiées lors de la recherche : lisibilité en faible luminosité, zones tactiles optimisées pour une utilisation en gants, codes couleurs intuitifs par statut.

Typographie

Police sans-serif avec tailles généreuses (16px minimum pour le corps de texte, 24px pour les titres). Contraste élevé (ratio minimum 7:1) pour usage en extérieur et conditions de luminosité variables.

Palette de Couleurs

Système de couleurs par statut pour une compréhension immédiate : vert (payé/validé), orange (en attente/alerte), rouge (problème/bloqué). Fond clair pour réduire la fatigue visuelle lors d'un usage prolongé.

Iconographie

Set de 45 icônes personnalisées, claires et reconnaissables même à petite taille. Style minimaliste pour éviter toute ambiguïté et faciliter la mémorisation.

Composants UI

15 composants réutilisables (boutons, cartes, formulaires, tableaux) pour assurer cohérence et accélérer le développement. Documentation complète pour l'équipe technique.

Grille & Espacements

Système de grille flexible avec espacements généreux (minimum 16px) pour éviter les erreurs de clic et faciliter la navigation tactile.

États & Interactions

États clairement différenciés (normal, hover, actif, désactivé) avec feedback visuel immédiat. Animations subtiles pour guider l'attention sans ralentir l'usage.

Interface Adaptative

L'application a été conçue pour s'adapter parfaitement aux deux contextes d'usage principaux identifiés lors de la recherche :

Mode Tablette (Terrain)

Interface tactile optimisée pour une utilisation d'une main, avec zones d'action de 48px minimum. Disposition verticale privilégiée, actions principales en bas de l'écran pour faciliter l'accès au pouce. Mode sombre disponible pour usage en faible luminosité.

Mode Desktop (Bureau)

Interface multi-colonnes exploitant l'espace disponible pour afficher plus d'informations simultanément. Raccourcis clavier pour utilisateurs avancés. Tableaux de données enrichis avec fonctions de tri et filtrage.

Preuves de concept décisives

Pour sécuriser la faisabilité technique et l'adoption côté métier, j'ai monté deux preuves de concept rapides avant d'engager les développements complets. Elles ont servi à valider les paris fonctionnels directement sur le terrain et à embarquer les équipes produit, finance et tech autour d'une vision commune.

POC #1

Commande express offline

Prototype cliquable reproduisant la prise de commande depuis une tablette en mode dégradé. L'objectif : confirmer que les grossistes peuvent saisir une commande complète en moins de 90 secondes même sans réseau.

  • Synchronisation différée testée à Rungis à 5h du matin avec 6 grossistes volontaires.
  • Latence perçue divisée par trois grâce à la mise en cache locale et aux messages d'état instantanés.
  • Interface tactile simplifiée après deux itérations, réduisant de 42 % les erreurs d'article scanné.
Focus : mode offline-first
Durée : 12 jours Outils : Figma, ProtoPie Résultat : Temps de saisie < 90 s validé
POC #2

Score de solvabilité en temps réel

Mini-backend Node et maquette UI connectés à l'API Experian afin d'afficher un score fiable en moins de 2 secondes. Ce test devait rassurer sur la viabilité business de la réduction des impayés.

  • Chaîne API + fallback Excel éprouvée avec l'équipe finance, couvrant 95 % du portefeuille clients.
  • Codes couleur et messages d'interprétation validés en 3 ateliers pour une lecture en < 3 secondes.
  • Passerelle de scoring exposée au CTO pour sécuriser l'intégration technique et la conformité RGPD.
Focus : solvabilité & data
Durée : 8 jours Outils : Node.js, Airtable, Figma Résultat : Projection -30 % d'impayés

Prototype Interactif

J'ai développé un prototype interactif dans Figma intégrant les principaux parcours utilisateurs. Ce prototype a servi de référence pour les tests utilisateurs et la spécification technique auprès de l'équipe de développement.

Tests A/B - Ajustements Clés

Suite aux tests avec 8 grossistes à chaque itération, plusieurs ajustements majeurs ont été apportés :

  • Taille des boutons Augmentation de 38px à 50px pour améliorer le taux de réussite des clics
  • Système de favoris Ajout d'un accès rapide aux clients récurrents, réduisant de 60% le temps de saisie
  • Simplification facturation Réduction de 7 étapes à 3 étapes suite aux retours utilisateurs
  • Recherche intelligente Implémentation d'une recherche prédictive avec tolérance aux fautes de frappe
  • Indicateurs visuels Renforcement des statuts visuels suite à des erreurs d'interprétation

Accessibilité

Bien que non requis initialement, j'ai intégré des principes d'accessibilité pour garantir une utilisation confortable pour tous : contraste WCAG AAA, navigation clavier complète, labels descriptifs pour lecteurs d'écran.

Prototype Figma interactif

Explorez la maquette animée testée avec les grossistes et présentée aux équipes métiers.

Ouvrir dans Figma

Prototype Interactif

J'ai développé un prototype interactif dans Figma intégrant les principaux parcours utilisateurs. Ce prototype a servi de référence pour les tests utilisateurs et la spécification technique auprès de l'équipe de développement.

Tests A/B - Ajustements Clés

Suite aux tests avec 8 grossistes à chaque itération, plusieurs ajustements majeurs ont été apportés :

  • Taille des boutons Augmentation de 38px à 50px pour améliorer le taux de réussite des clics
  • Système de favoris Ajout d'un accès rapide aux clients récurrents, réduisant de 60% le temps de saisie
  • Simplification facturation Réduction de 7 étapes à 3 étapes suite aux retours utilisateurs
  • Recherche intelligente Implémentation d'une recherche prédictive avec tolérance aux fautes de frappe
  • Indicateurs visuels Renforcement des statuts visuels suite à des erreurs d'interprétation

Accessibilité

Bien que non requis initialement, j'ai intégré des principes d'accessibilité pour garantir une utilisation confortable pour tous : contraste WCAG AAA, navigation clavier complète, labels descriptifs pour lecteurs d'écran.

📊

Résultats & Impact

Déploiement & Adoption

Le déploiement auprès des premiers grossistes a démontré un impact significatif sur leur productivité et leur rentabilité. La solution a été adoptée progressivement sur une période de 3 mois, avec un accompagnement personnalisé pour chaque utilisateur.

Le taux d'adoption exceptionnellement élevé (92%) s'explique par l'approche centrée utilisateur tout au long du projet : les grossistes ont été impliqués dès les phases initiales et ont pu constater les améliorations concrètes sur leur travail quotidien dès les premiers jours d'utilisation.

Six mois après le lancement — indicateurs clés
  • 92 % de taux d'adoption
  • +70 % de gain de productivité
  • -30 % d'impayés
  • 88 % de satisfaction (4,4/5)

Impact Business Mesurable

Temps administratif, taux d'erreurs et délai de paiement mesurés sur un panel de 25 grossistes équipés.

Impact business mesuré (avant vs après)
  • Avant AgoraSquare
  • Après déploiement
  • Temps dédié aux tâches administratives de 3 h/jour à 0,8 h/jour, soit plus de 2 heures récupérées chaque jour.
  • Erreurs de facturation taux réduit de 40 % à 6 %, soit près de 15 000 € économisés par an et par grossiste.
  • Délai moyen de paiement de 45 à 30 jours, améliorant immédiatement la trésorerie.

Retours Utilisateurs

AgoraSquare a transformé notre façon de travailler. On gagne un temps fou et on fait beaucoup moins d'erreurs. C'est exactement ce dont on avait besoin.

— Pierre, grossiste en fruits et légumes

La vérification de solvabilité intégrée nous a permis de réduire drastiquement les impayés. C'est un vrai soulagement financier pour notre entreprise.

— Marie, gérante d'une entreprise de produits de la mer

Impact à Long Terme

Six mois après le déploiement initial, 25 grossistes supplémentaires ont rejoint la plateforme, attirés par les retours positifs des premiers utilisateurs. L'application est devenue un outil de référence sur le marché de Rungis, contribuant à la modernisation progressive du secteur.

  • Évolution continue Nouvelles fonctionnalités ajoutées tous les trimestres selon les retours utilisateurs
  • Extension géographique Déploiement prévu sur d'autres marchés de gros en France
  • Communauté active Création d'un groupe d'entraide entre utilisateurs
  • Formation Programme d'accompagnement pour nouveaux utilisateurs
🎓

Apprentissages

Ce projet AgoraSquare a été riche en enseignements, tant sur le plan méthodologique que sur la compréhension des enjeux du design dans un contexte B2B spécifique. Voici les principales leçons tirées de cette expérience.

Ce qui a bien fonctionné

  • Immersion terrain prolongée Les 3 semaines passées à Rungis ont été cruciales pour comprendre les vrais besoins et contraintes. Aucun entretien en bureau n'aurait pu révéler ces insights.
  • Approche itérative et tests fréquents Tester rapidement et souvent (tous les 15 jours) avec de vrais utilisateurs a évité de nombreuses erreurs coûteuses.
  • Co-création dès le début Impliquer les grossistes dès les phases initiales de conception a créé un sentiment d'appropriation et facilité l'adoption.
  • Simplicité radicale Résister à la tentation d'ajouter des fonctionnalités \"sympas mais pas essentielles\" a été payant. Les utilisateurs ont apprécié la simplicité.
  • Design system adaptatif Créer un design system dès le début a accéléré le développement et assuré la cohérence visuelle.

Défis Rencontrés & Solutions

Défi 1 : Résistance au changement

Beaucoup de grossistes étaient réticents à abandonner leurs carnets papier. Solution : Programme d'accompagnement personnalisé, formation individuelle, et période de transition avec double saisie (papier + numérique) pendant 2 semaines.

Défi 2 : Contraintes techniques offline

Le mode offline a été techniquement complexe à implémenter, surtout pour la synchronisation des données. Solution : Architecture technique pensée dès le début avec le CTO, prototypes fonctionnels pour valider la faisabilité.

Défi 3 : Diversité des cas d'usage

Chaque grossiste avait des besoins spécifiques (fruits, viandes, produits laitiers). Solution : Modules flexibles et personnalisables plutôt qu'une solution unique rigide.

Ce que je ferais différemment

  • Impliquer les développeurs plus tôt Certaines idées de design se sont révélées complexes à développer. Une collaboration plus étroite dès les wireframes aurait évité des aller-retours.
  • Prévoir plus de temps pour le mode offline La synchronisation offline a pris 30% de temps supplémentaire. Il aurait fallu doubler l'estimation initiale.
  • Documenter davantage les décisions Certaines décisions de design prises en phase de recherche ont été oubliées 6 mois plus tard. Une documentation continue aurait aidé.
  • Anticiper l'évolution du produit Certains choix d'architecture ont rendu difficile l'ajout de nouvelles fonctionnalités. Penser \"scalabilité\" dès le début est crucial.
  • Prévoir un plan de formation dès le début La formation des utilisateurs a été improvisée. Un programme structuré dès la phase de design aurait facilité l'adoption.

Compétences Développées

Ce projet m'a permis de développer ou renforcer plusieurs compétences clés :

  • Conduite de recherche utilisateur en conditions réelles complexes
  • Design pour des utilisateurs peu familiers avec le numérique
  • Gestion de contraintes techniques fortes (offline, performance)
  • Communication avec des parties prenantes variées (grossistes, développeurs, direction)
  • Création de design systems complets et documentés
  • Mesure d'impact et ROI des décisions de design

Vision pour l'Avenir

Fort de ces apprentissages, plusieurs pistes d'amélioration sont envisagées pour les prochaines versions :

  • Intelligence artificielle pour prédire les commandes et optimiser les stocks
  • Marketplace intégrée pour faciliter la mise en relation grossistes-restaurateurs
  • Application mobile dédiée pour les livreurs avec optimisation de tournées
  • Tableau de bord analytique avancé pour aide à la décision stratégique

Ce projet m'a appris qu'un bon design ne se mesure pas à sa beauté, mais à son impact réel sur le quotidien des utilisateurs. Voir les grossistes gagner du temps et réduire leur stress au travail a été la meilleure validation de notre approche.

— Réflexion personnelle

Questions Fréquentes

Combien de temps a duré le projet AgoraSquare ?

Le projet AgoraSquare a duré 8 mois, de février à octobre 2022. Cette durée incluait la phase de recherche terrain (3 semaines), la conception UX/UI, le développement, les tests utilisateurs et le déploiement progressif.

Quels étaient les principaux défis de ce projet B2B ?

Les principaux défis étaient : la résistance au changement des utilisateurs peu familiers avec le numérique, l'implémentation du mode offline pour pallier les problèmes de connexion, et la diversité des cas d'usage selon le type de produits (fruits, viandes, produits laitiers).

Quels résultats ont été obtenus avec AgoraSquare ?

Les résultats obtenus sont significatifs : 92% de taux d'adoption, 70% de gain de productivité, et 30% de réduction des impayés grâce à une meilleure visibilité sur la solvabilité des clients.

Qu'est-ce que le mode offline dans AgoraSquare ?

Le mode offline permet aux grossistes de continuer à utiliser l'application même sans connexion internet, ce qui est crucial sur le marché de Rungis où la connexion peut être instable. Les données sont synchronisées automatiquement dès le retour de la connexion.

Comment la recherche utilisateur a-t-elle été menée ?

J'ai passé 3 semaines en immersion sur le marché de Rungis, observant 15 grossistes, menant 20 entretiens semi-directifs, et cartographiant 8 workflows critiques. Cette approche immersive était essentielle pour comprendre les contraintes réelles du terrain.

Quelles technologies ont été utilisées pour AgoraSquare ?

AgoraSquare a été conçu avec Figma pour le design, et développé avec une architecture technique permettant le mode offline. L'application est compatible avec tablettes et ordinateurs, et s'intègre avec les systèmes comptables existants (EBP, Sage, Cegid).

Pourquoi avoir choisi une approche de design system pour AgoraSquare ?

Un design system était nécessaire pour garantir la cohérence de l'interface sur l'ensemble des modules (commandes, facturation, comptabilité) et faciliter la maintenance et l'évolution future de la plateforme. Cela permet aussi une meilleure adoption par les utilisateurs grâce à une interface familière.

Prêt·e à moderniser vos services B2B ?

J'aide les organisations à concevoir des plateformes métiers fiables, accessibles et centrées sur l'usage terrain. Échangeons sur vos enjeux de digitalisation.

Réponse sous 48h – Intervention possible en régie ou mission ponctuelle.