GEODIS : un Design System corporate pour une expérience utilisateur unifiée

Durée
12 mois
Equipe
4 personnes

Le projet

Optimisation de l'expérience visiteur pour GEODIS via un Design System uniforme.

GEODIS est un grand groupe international parmi les leaders mondiaux du transport et de la logistique. C'est une filiale du groupe SNCF.

GEODIS a souhaité unifier l'expérience utilisateur à travers ses différentes plateformes numériques pour offrir une expérience sans coutures à ses visiteurs. L'objectif était de rendre indiscernable le passage d'une application à une autre tout en simplifiant le processus de développement et de maintien des normes d'accessibilité.

Pour répondre à ses besoins, GEODIS a fait appel à exFabrica pour développer un Design System corporate. Ce système de design incluait :

  1. La création d'un référentiel uniforme avec la mise en place de composants standardisés pour assurer une cohérence visuelle totale entre les différentes applications.
  2. Des librairies facilitant le développement : une librairie Figma pour les phases de conception par les UX/UI designers, ainsi que des librairies Angular et React pour intégrer ce Design System dans tous les sites et applications web utilisant ces technologies.
  3. Une documentation complète sous Storybook pour garantir une compréhension et une application uniforme du Design System par toutes les équipes projet.

La solution apportée adopte les standards d'accessibilité (RGAA).

Le déploiement du Design System par exFabrica a non seulement répondu aux besoins initiaux, mais aussi largement dépassé les attentes initiales :

  • Forts gains de productivité : réduction de plus de 30% du temps de développement des interfaces utilisant le Design System.
  • Adoption étendue : le design system a été adopté par tous les nouveaux projets web du groupe, y compris ceux initialement non concernés.
  • Implication des équipes de la marque GEODIS : les équipes de la marque sont désormais impliquées activement dans l'utilisation du design system, ce qui a renforcé la diffusion de la charte digitale au sein des équipes techniques et des designers.
  • Amélioration continue : le projet a mis en lumière et résolu les lacunes de la charte digitale existante, améliorant ainsi continuellement la qualité du système.
  • Communauté solide : création d'une communauté de développeurs front-end auparavant dispersée, favorisant une collaboration efficace et continue.
  • Conformité et responsivité : toutes les applications développées avec le Design System bénéficient des meilleures pratiques en termes d'accessibilité, de responsive, ainsi que de compatibilité avec les modes sombre et clair.

Grâce à eux, nous avons compris que la création d'un Web Design System était indispensable pour assurer cohérence et accessibilité.

Amaury Lebeau, Strategic Program IT Director chez GEODIS

Proposition technique

La proposition technique d'exFabrica s'est articulée autour de 5 axes :

1. Création d'un moteur CSS

  • Variabilisation des paramètres principaux CSS.
  • Gestion des layouts des pages et des composants.
  • Intégration native full responsive avec support de tous les écrans à partir de 320px (calculs sans mediaqueries en s'appuyant sur des fonctions mathématiques CSS).
  • Intégration dans le moteur CSS de l'identité de la marque du client à l'aide d'un système de colorisation personnalisé et évolutif.
  • Intégration au plus bas niveau de la conformité RGAA.

2. Création d'un projet Figma pour la conception des composants

  • Intégration des contraintes de la marque.
  • Support et partage aux UX/UI d'un référentiel commun de composants et des pratiques de la marque.
  • Suivi de la qualité des interfaces pour l'ensemble des applications.

3. Création d'un ensemble de 40 composants à l'aide de StencilJS

  • Composants écoconçus et performants.
  • Tests unitaires pour chaque composant intégrés dans les builds CI/CD.
  • Composants conformes RGAA.
  • Création de librairies de sortie vers Angular (Module et Standalone) et React.
  • Création d'une sortie customisée StencilJS pour gérer l'IntelliSense des IDE Jetbrains (Webstorm, Intellj ...).
  • Internationalisation des composants en 4 langues.

4. Création de la documentation du projet

  • Configuration et customisation d'une application Storybook 8 pour la gestion de la documentation du moteur CSS et avec description de l'utilisation, de la conformité RGAA et la prévisualisation des composants.
  • Création de d'application de démonstration pour la mise en situation des composants et des meilleures pratiques de chaque frameworks / librairies à destination des développeurs du client en Angular 19 et React 18.

5. Création d'une Core Team de support du projet

  • Channel Teams dédiés pour communication directe avec les développeurs / UX pour des demandes support ou d'évolution.
  • Participation de la Core Team aux meetings d'évangélisation du Design System auprès des développeurs.
  • Création de Starter Kit personnalisés pour les démarrages rapides des projets du client.
  • Création de vidéos de présentation concernant l'onboarding sur le Design System.
  • Accompagnement personnalisée pour le développement, le support RGAA, le support UX/UI des applications en cours de développement.

Stack technique

  • StencilJS
  • Typescript
  • HTML
  • CSS
  • Maskito
  • DayJS
  • Angular 19
  • React 18
  • Storybook
  • Gitlab
  • SonarQube
  • Jest

Domaines d'intervention

  • UX/UI Design
  • Développement UI
  • Architecture
  • Développement front
  • Delivery Manager
  • DevOps

Leur force de proposition a désamorcé bien des situations délicates et fait gagner un temps précieux.

Amaury Lebeau, Strategic Program IT Director chez GEODIS

Résultats

Gain de temps dans les dev front
> 30%
Taux d'adoption
> 90%
Amélioration du taux de conformité des projets
> 80%

Témoignage client

Amaury LebeauStrategic Program IT Director chez GEODIS

Rapides, efficaces, honnêtes : exFabrica a su prendre à bras-le-corps notre projet de création d'un Design System complet pour GEODIS, en structurant une démarche pourtant partie d'un besoin flou.

Ils nous ont guidés à toutes les étapes et même sur des sujets complexes comme l'accessibilité, anticipant nos besoins.

L'équipe chez exFabrica est non seulement compétente, mais il est aussi facile et agréable de travailler avec eux, ce qui fait qu'on avance sans stress et avec une vraie cohérence. Franchement, j'espère qu'ils garderont cette approche : c'est leur plus grande force.

Notre touche exFabrica

Maîtrise technique et formation avancée en accessibilité
Envoi de toute l'équipe d'exFabrica (UX/UI, Développeur, Architecte UI, Delivery manager) en formation accessibilité avancée, pour pouvoir être en maitrise technique totale.

Partenariat stratégique pour une accessibilité certifiée
Partenariat avec une société experte en accessibilité pour auditer chacun des composants du Design System.

Architecture multi-technologie grâce à StencilJS
Design d'un produit multi-technologie qui permet de générer à moindre effort une librairie pour d'autres technologies (VueJS,…) en s'appuyant sur StencilJS.

Synergie et collaboration : unifier les forces créatives et techniques
Mise en place d'une approche collaborative pour unifier les équipes de développement, les designers et les équipes de la marque autour d'un objectif commun.

Support continu et éducation
A travers la mise en place de ressources éducatives, d'accompagnement et de documentation pour favoriser l'adoption et la montée en compétences des équipes internes.