Étude de cas en product design
ERP et CRM pour les entreprises, B2B/B2C, product design
Mise à jour oct. 2026 : j’ai ensuite transformé cet ERP en un design system codé et documenté dans Storybook.
À propos du système ERP
Introduction
Le système ERP Tech Harbor est conçu pour piloter facilement de grandes entreprises qui créent des produits et travaillent avec des distributeurs. Il sert aux dirigeants, managers, marketeurs, juristes et financiers de l’organisation. Le système couvre cinq services de l’entreprise (direction, entrepôts, finance, juridique, marketing) ainsi qu’une interface dédiée aux distributeurs, soit six modules au total. Il reste intuitif aussi bien pour les utilisateurs à l’aise avec la technologie que pour ceux qui la connaissent moins. Cette étude de cas montre comment les utilisateurs accomplissent leurs tâches quotidiennes selon leur rôle.
Mon rôle
Designer d’interfaces et de produit.
La méthode a consisté à comprendre le problème avec empathie, le définir, imaginer des solutions, concevoir, prototyper et tester.
Mes responsabilités
Mener des entretiens, wireframes papier et numériques, prototypes basse et haute fidélité, études d’utilisabilité, prise en compte de l’accessibilité et itérations sur le design.
Outils
Design engineering : Storybook · React · TypeScript · Figma Variables · Figma MCP · Claude Code · GitHub · Vercel
Recherche et hypothèse
Énoncé du problème
L’ERP Tech Harbor vise à simplifier la gestion de l’entreprise, mais ses utilisateurs, surtout des professionnels de 22 à 65 ans, peinent d’abord à naviguer, même s’ils trouvent l’interface intuitive. Ils privilégient l’efficacité et le développement intellectuel et ont peu de temps pour des processus complexes ou peu pratiques. Comment améliorer l’onboarding et la navigation pour que l’adoption du système soit fluide et rapide ?
Décomposition du problème
Difficultés à passer à l’échelle
L’ERP initial manquait de souplesse pour accompagner la croissance de l’activité, ce qui le rendait inefficace pour les entreprises gérant de gros volumes de données.
Processus complexes et courbe d’apprentissage raide
L’interface était fonctionnelle mais demandait un temps d’adaptation, ce qui ralentissait le travail et réduisait l’efficacité.
Expérience utilisateur fragmentée
Les informations étaient dispersées dans différentes sections, ce qui compliquait la navigation et l’obtention d’informations utiles.
Interface dépassée avec des lacunes d’utilisabilité
Le design suivait les structures classiques des ERP, ce qui créait des problèmes d’utilisabilité et freinait une utilisation fluide et intuitive.
Revue des décisions prises
Après la recherche et l’identification des problèmes clés, le design a été développé progressivement pour les différents services de l’ERP.
Menu de navigation pour l’utilisateur « Manager ».
Menu de navigation pour l’utilisateur « Responsable financier ».
Les utilisateurs de l’ERP
L’ERP sert les dirigeants, les cadres, les équipes commerciales, les juristes, les responsables d’entrepôt et les comptables, en assurant l’automatisation des processus et une collaboration fluide. Les distributeurs internationaux l’utilisent aussi pour accéder aux données en temps réel.
David, copropriétaire d’une entreprise internationale, cherche un système intégré pour piloter efficacement ses opérations. Il apprécie de pouvoir agir vite sur tous ses appareils, mais se heurte à des textes trop grands sur mobile et à une édition limitée des données distributeurs, ce qui montre le besoin d’améliorations continues.
CEO
« J’utilise l’ERP pour suivre les finances et les indicateurs clés de l’entreprise. Il automatise les tâches routinières et accélère la prise de décision. »
Juriste international
« L’ERP simplifie mon travail sur les documents juridiques et les contrats, en garantissant la conformité et une gestion documentaire efficace. »
Commercial
« J’utilise l’ERP pour gérer la relation client, suivre les affaires et analyser les ventes : mon travail est bien plus simple. »
Responsable d’entrepôt
« Le système m’aide à suivre les stocks en temps réel, à réduire les erreurs et à éviter les ruptures. »
Comptable
« L’ERP automatise la gestion financière et rend plus efficaces le suivi des dépenses, la facturation et la planification financière. »
Recherche utilisateur : points de friction
Confort
L’interface repose sur des tableaux et des cartes, pour une expérience claire et intuitive.
Confiance
« Ce service doit être sûr pour notre entreprise et nos distributeurs. » (David)
Navigation
Les utilisateurs ont proposé d’ajouter un fil d’Ariane sur les écrans pour revenir en arrière plus facilement.
Accessibilité
Le système prend en charge les thèmes jour et nuit, l’agrandissement du texte et les lecteurs d’écran.
Wireframes numériques
L’ERP comprend cinq services et une interface distributeur séparée (six modules au total). J’ai réalisé les wireframes de tous les écrans et cartographié les parcours utilisateurs de chaque module.
J’ai aussi travaillé étroitement avec les développeurs et les responsables d’équipe pour comprendre le fonctionnement du système. Nous nous sommes réunis en SESSIONS DE BRAINSTORMING pour analyser le design et la logique de tous les services.
Itération finale
Maquettes
Après une deuxième étude d’utilisabilité, j’ai constaté que les champs de recherche, les filtres et les boutons devaient être plus grands sur mobile. L’espacement entre les champs et les boutons a aussi été augmenté pour plus de précision.
J’ai suivi les principes du responsive design et légèrement réduit la taille de police de certains éléments. Un thème sombre a été ajouté pour réduire la fatigue visuelle et améliorer le confort de ceux qui le préfèrent.
Responsive design
Ce que je mesurerais ensuite
Pour valider le design après le lancement, voici les indicateurs et méthodes que j’utiliserais pour mesurer et améliorer l’expérience utilisateur :
Suivi du comportement des utilisateurs
Utiliser des outils comme Google Analytics, Hotjar ou Mixpanel pour analyser les interactions dans l’ERP/CRM et repérer les points de friction fréquents et les pistes d’amélioration.
Indicateurs de conversion et d’engagement
Mesurer avec quelle efficacité les utilisateurs passent d’une fonctionnalité à l’autre, accomplissent leurs tâches (par ex. ajouter des clients, générer des rapports) et utilisent les automatisations.
⏱️
Réalisation des tâches et gain de temps
Mesurer le temps nécessaire aux actions clés afin de réduire le temps passé sur les tâches répétitives.
Heatmaps et enregistrements de sessions
Identifier les problèmes d’utilisabilité en visualisant les clics, la profondeur de scroll et les interactions avec des fonctionnalités comme le tableau de gestion des clients.
Tests A/B pour améliorer l’UI
Tester différentes mises en page, positions de boutons et formulaires pour améliorer l’utilisabilité et l’adoption.
Accessibilité
01
J’ai aussi utilisé la police sans empattement « Poppins » pour faciliter la lecture des textes de l’application.
02
J’ai travaillé les couleurs et le contraste des champs et des boutons pour qu’ils restent clairs pour les personnes malvoyantes. Dans la bibliothèque codée, la documentation des composants inclut les états, les styles de focus et des notes ARIA ; l’addon a11y de Storybook est activé.
03
J’ai conçu un thème sombre pour que différents utilisateurs puissent utiliser l’ERP confortablement.
Design system
Pendant le projet, j’ai construit un design system pour l’ERP : styles, composants et variantes partagés, qui ont grandi avec le produit au fil de l’ajout de nouveaux modules et écrans.
De Figma à Storybook
Dans un projet de suite (oct. 2026), j’ai transformé les maquettes de l’ERP en bibliothèque de composants codée : 60 composants React et TypeScript (22 atomes, 38 molécules) avec 242 design tokens générés à partir d’un seul tokens.json. Chaque composant est documenté dans Storybook avec ses états, ses cas limites, des notes d’accessibilité et la correspondance entre Figma et le code. J’ai mis en place une chaîne assistée par IA (Figma → Figma MCP → Claude Code → pull request GitHub → preview Vercel). J’ai décidé quoi construire, relu chaque modification et fusionné chaque pull request.
Ce que je ferais ensuite
Tests et documentation centrés sur l’utilisateur
Mener des tests d’utilisabilité par tâches sur les parcours clés et documenter chaque problème avec sa correction dans le design system.
Entretiens utilisateurs pour faire évoluer le système
Mener des entretiens qualitatifs avec chaque rôle pour trouver les derniers points de friction et prioriser les améliorations.
Recherche inclusive sur l’accessibilité
Réaliser un audit d’accessibilité selon les WCAG et des sessions de recherche avec des personnes en situation de handicap.
Impact
Après le premier mois d’utilisation de l’ERP, qui automatise la plupart des processus métier, les retours des utilisateurs ont été positifs. Voici la citation d’un utilisateur :
Livrables (suite design system, oct. 2026)
• 60 composants (22 atomes, 38 molécules)
• 242 design tokens (couleurs, typographie, ombres, tailles, espacements, grille, mise en page, rayons)
• 137 icônes SVG en deux tailles
• ~480 stories Storybook avec documentation MDX
• 9 pull requests, 5 jours de travail actif (1–5 oct. 2026)
Ce que j’ai appris
En créant la première version de l’ERP, j’ai appris à faire preuve d’empathie et à mettre de côté mes propres hypothèses. La recherche d’utilisabilité a permis d’améliorer les fonctionnalités et la manière de travailler avec le système. Plus tard, passer des maquettes au code m’a appris qu’un design system ne passe à l’échelle que si les tokens et la documentation vivent dans le code, pas seulement dans Figma.
En résumé
Améliorer les performances de l’ERP demande une stratégie globale : des tests approfondis, des améliorations centrées sur l’utilisateur et un engagement pour l’accessibilité. En plaçant les retours des utilisateurs et l’inclusion au premier plan, nous n’optimisons pas seulement le système : nous créons un environnement qui répond aux besoins de chaque utilisateur.
Lien vers le site de l’entreprise pour laquelle l’ERP a été développé : rifbar.com.