GEODIS: a corporate Design System for a unified user experience

Duration
12 months
Team
4 persons

The project

Optimization of the visitor experience for GEODIS via a uniform Design System.

GEODIS is one of the world's leading international transport and logistics groups. It is a subsidiary of the SNCF group.

GEODIS aimed to unify the user experience across its various digital platforms to provide a seamless experience for its visitors. The objective was to make the transition from one application to another imperceptible while simplifying the development process and maintaining accessibility standards.

To meet its needs, GEODIS enlisted exFabrica to develop a corporate Design System. This design system included:

  1. The creation of a uniform framework with standardized components to ensure complete visual consistency across different applications.
  2. Libraries to facilitate development: a Figma library for UX/UI designers during the design phases, as well as Angular and React libraries to integrate this Design System into all websites and web applications using these technologies.
  3. Comprehensive documentation in Storybook to ensure a clear understanding and uniform application of the Design System by all project teams.

The solution implemented adheres to accessibility standards (RGAA).

The deployment of the Design System by exFabrica not only met the initial requirements but also significantly exceeded expectations:

  • Significant productivity gains: over 30% reduction in development time for interfaces using the Design System.
  • Widespread adoption: the Design System has been adopted by all new web projects within the group, including those initially not concerned.
  • Involvement of GEODIS brand teams: the brand teams are now actively engaged in using the Design System, strengthening the dissemination of the digital guidelines among technical teams and designers.
  • Continuous improvement: the project highlighted and addressed gaps in the existing digital guidelines, continuously enhancing the system's quality.
  • Strong community: creation of a previously scattered front-end developer community, fostering effective and ongoing collaboration.
  • Compliance and responsiveness: all applications developed with the Design System benefit from best practices in accessibility, responsiveness, and compatibility with both dark and light modes.

Thanks to them, we realized that creating a Web Design System was essential to ensure consistency and accessibility.

Amaury Lebeau, Strategic Program IT Director at GEODIS

Technical proposal

exFabrica's technical proposal was structured around five key areas:

1. Creation of a CSS engine

  • Parameterization of key CSS variables.
  • Management of page layouts and components.
  • Native full responsive integration with support for all screen sizes starting from 320px (achieved without media queries, leveraging CSS mathematical functions).
  • Incorporation of the client's brand identity into the CSS engine through a customizable and scalable color system.
  • Built-in RGAA compliance at the lowest level.

2. Creation of a Figma project for component design

  • Integration of brand constraints.
  • Support and sharing of a common component repository and brand best practices with UX/UI designers.
  • Monitoring of interface quality across all applications.

3. Development of a set of 40 components using StencilJS

  • Eco-designed and high-performance components.
  • Unit tests for each component integrated into CI/CD builds.
  • RGAA-compliant components.
  • Creation of output libraries for Angular (both Module and Standalone) and React.
  • Custom StencilJS output to support IntelliSense for JetBrains IDEs (WebStorm, IntelliJ, etc.).
  • Component internationalization in four languages.

4. Creation of project documentation

  • Configuration and customization of a Storybook 8 application to manage documentation for the CSS engine, including usage guidelines, RGAA compliance details, and component previews.
  • Development of demo applications showcasing components and best practices for each framework/library, tailored for the client’s developers using Angular 19 and React 18.

5. Formation of a Core Team to support the project

  • Dedicated Teams channels for direct communication with developers and UX designers for support requests and feature enhancements.
  • Core Team participation in evangelization meetings to promote the Design System among developers.
  • Creation of custom Starter Kits for quick project launches.
  • Production of introductory videos for onboarding on the Design System.
  • Personalized support for development, RGAA compliance, and UX/UI guidance for ongoing applications.

Technical stack

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

Intervention areas

  • UX/UI Design
  • UI Development
  • Architecture
  • Frontend Development
  • Delivery Manager
  • DevOps

Their proactive approach helped defuse many delicate situations and saved us valuable time.

Amaury Lebeau, Strategic Program IT Director at GEODIS

Results

Time savings in front-end development
> 30%
Adoption rate
> 90%
Improvement in project compliance rate
> 80%

Client testimonial

Amaury LebeauStrategic Program IT Director at GEODIS

Fast, efficient, and honest: exFabrica took on our project of creating a complete Design System for GEODIS head-on, structuring an approach that initially stemmed from a vague need.

They guided us through every step, even on complex topics like accessibility, anticipating our needs.

The team at exFabrica is not only highly skilled but also easy and pleasant to work with, allowing us to move forward smoothly and coherently, without stress. Honestly, I hope they maintain this approach—it’s their greatest strength.

Our exFabrica touch

Technical expertise and advanced accessibility training
The entire exFabrica team (UX/UI designers, developers, UI architects, and delivery managers) underwent advanced accessibility training to achieve full technical mastery.

Strategic partnership for certified accessibility
Collaboration with an expert accessibility company to audit each component of the Design System.

Multi-Technology architecture enabled by StencilJS
Designed as a multi-technology product, allowing effortless generation of libraries for other technologies (VueJS, etc.) using StencilJS.

Synergy and collaboration: unifying creative and technical rorces
Implementation of a collaborative approach to bring together developers, designers, and brand teams around a shared objective.

Ongoing support and education
Development of educational resources, guidance, and documentation to encourage adoption and enhance the internal teams' skills.