CF
Cyril Fromentin
SaaS B2B
UX/UI Designer
Getlink (Eurotunnel)
Refonte de l'application métier GDF utilisée par les équipes d'Europorte pour piloter la circulation, le stationnement et les manœuvres des trains de fret.
Getlink (Eurotunnel)
Refonte applicative métier
Contexte
Le projet et ses enjeux
Le groupe
Getlink réunit Eurotunnel, Europorte (opérateur privé de fret ferroviaire en France), ElecLink et le CIFFCO. Europorte porte ce projet pour ses équipes de terrain.
Objectif
Europorte souhaite moderniser l’application GDF qui intègre plusieurs modules qui permettent au groupe de gérer le réseau de fret ferroviaire. Et de rendre chaque module accessible sur une même interface pour simplifier leur accès.
Problématique
Les modules actuellement utilisés autour de la suite de GDF par les principaux acteurs de la gestion des faisceaux présentent des faiblesses manifestes (une obsolescence importante, une ergonomie peu satisfaisante, problème de performance, ...)
Remarques
Chaque site utilise les outils GDF de façon différente, sans usage homogène.
Aucun site n’exploite l’ensemble des modules disponibles.
Les fonctionnalités actuelles d’EP-Grille sont insuffisantes pour certains sites, comme Lérouville.
Organisation
Parties prenantes
Mon rôle :
UX/UI Designer
L’équipe :
Directrice du pôle digital, cheffe de projet, responsable SI, développeurs front-end.
Process UX
De la recherche à la solution
01
UX Research
Audit des contraintes techniques (multiplicité des outils, manque d’interopérabilité, systèmes vieillissants) et du contexte terrain (sécurité, flux continus, contraintes réglementaires), complété par des entretiens avec administrateurs, planificateurs et opérateurs.
02
Solutions envisagées
Centraliser les modules dans une seule plateforme, organiser l'accès autour d'un dashboard personnalisable, permettre le travail multi-tâches par onglets, et adapter l'interface au rôle de chaque utilisateur.
03
Opportunité & finalité
En interne : gain de productivité et d'ergonomie pour les équipes. En externe : plus de fluidité dans la coordination avec les partenaires logistiques. L'objectif final est de moderniser l'outil tout en renforçant la sécurité des opérations.
Méthodes
Personas & roadmap
Persona 01 — Nicole Frouville
Cadre gestion chargement, basée à distance des équipes terrain.
Persona 02 — Christophe Dorant
Cadre gestion circulation, travaille sur un large écran.
Persona 03 — Laurent Tullier
Agent de circulation, mobile sur le terrain, utilise surtout la tablette.
Roadmap
Planning du projet, d’août 2023 aux tests finaux en janvier 2024.
Parcours utilisateurs
Analyse & design thinking
Des ateliers de co-conception ont réuni la cheffe de projet, la direction du pôle digital et des utilisateurs représentatifs (administrateurs, planificateurs, opérateurs) pour observer leurs usages réels, en direct sur l’outil existant. Cette confrontation aux pratiques de terrain a permis d’isoler les points de friction concrets et de prioriser les besoins à couvrir dans la nouvelle interface.
Cette démarche collaborative visait à concevoir des parcours adaptés aux usages réels, mais aussi capables d’anticiper les besoins futurs des équipes. L’implication de tous les profils a permis d’enrichir la réflexion, d’aligner les attentes et de bâtir une base solide pour une application mieux intégrée, plus intuitive et tournée vers l’efficacité.
UI Design
Design d'interface
Construction d'un design system complet pour l'application GDF : typographie, colorimétrie, iconographie, espacements et composants (sidebar, modales, toasts) documentés pour garantir une cohérence entre tous les écrans et faciliter les évolutions futures du produit.
J’ai assuré la conception de l’interface de l’application GDF en développant un design system avec l'équipe devs. Ce système a servi de fondation visuelle et fonctionnelle, intégrant un style guide cohérent (typographie, couleurs, composants, iconographie, règles d’espacement et d’interaction). Grâce à cette base, j’ai pu garantir une homogénéité entre toutes les interfaces et offrir une expérience utilisateur claire, moderne et adaptée aux différents profils d’utilisateurs. Le design system a permis non seulement de créer l’ensemble des écrans de l’application, mais aussi de faciliter l’évolutivité et la maintenance future du produit.
Wireframes & mockups
Mockups & Wireframes
Circulation & manœuvres :
interface dédiée à la gestion des créneaux de circulation et des manœuvres en direct. Les utilisateurs peuvent y valider ou réserver un créneau, visualiser les créneaux disponibles ou occupés, et identifier la personne ainsi que l’heure associées à chaque réservation. Cette interface a un impact direct sur le trafic ferroviaire, en permettant une gestion plus réactive et sécurisée.
Navigation et paramétrage :
Elle a été entièrement repensée pour simplifier l’accès aux fonctionnalités. J’ai mis en place un drawer permettant de consulter l’ensemble des catégories et sous-catégories sans perdre la page affichée. En complément, un système d’onglets a été conçu afin d’ouvrir plusieurs pages en parallèle, offrant ainsi plus de fluidité et facilitant le travail multitâche des utilisateurs. J’ai, également, travaillé sur le paramétrage et la personnalisation de l’interface pour répondre aux besoins spécifiques de chaque profil utilisateur. Les blocs interactifs peuvent être réagencés pour optimiser l’accessibilité et la lisibilité, et les CTA (call-to-action) ont été mis en avant afin de renforcer la clarté et l’efficacité des parcours.
Résultats
Prototype animé
Bénéfices & opportunités
Une interface modernisée et responsive, utilisable aussi bien sur poste fixe qu’en tablette ou mobile sur le terrain. Les informations clés sont mieux hiérarchisées, les composants et CTA repensés selon les standards d’accessibilité, pour un outil plus productif et plus simple à prendre en main pour l’ensemble des équipes.