Voyages SNCF

Voyages-sncf.com (VSC), opérant désormais sous le nom de SNCF Connect, servait de plateforme officielle de réservation de voyages pour la SNCF, la société nationale des chemins de fer français. Avec des millions d'utilisateurs réservant des billets de train, planifiant des trajets multimodaux et accédant aux services de voyage sur ordinateurs et appareils mobiles, VSC s'était transformé en un écosystème numérique hautement complexe.

  • ClientVoyages SNCF
  • SecteurTourisme / Voyage
  • ServicesDesign, Direction Artistique, UX/UI
Créer de la cohérence

Étant un site web existant de longue date, au fil du temps, les interfaces utilisateur de Voyages-SNCF s'étaient fragmentées en raison de multiples mises à jour, de campagnes marketing et de fonctionnalités ad hoc développées en parallèle. Cette fragmentation a entraîné des visuels incohérents, des composants dupliqués et une expérience utilisateur inégale sur l'ensemble des appareils et des parcours utilisateurs.

Pour remédier à cela, VSC a lancé un effort stratégique afin de développer un design system cohérent et évolutif, qui permettrait de :

  • Rationaliser ses standards UI/UX sur les plateformes ordinateur, tablette et mobile.
  • Fournir des bibliothèques de composants réutilisables pour les équipes produit, les designers et les développeurs.
  • Améliorer la convivialité, les performances et l'accessibilité pour tous les segments d'utilisateurs.
  • Renforcer une identité de marque reconnaissable et digne de confiance.

Cette étude de cas documente les composants de base de ce système — incluant les boutons, les liens, les info-bulles, les onglets, les messages (MEA) et les champs de formulaire — chacun conçu avec une attention particulière à la hiérarchie visuelle, l'accessibilité, la réactivité et les modèles d'interaction utilisateur.

En créant ce design system unifié, VSC a pu réduire la dette de conception, accélérer les cycles de production et offrir une expérience de voyage plus intuitive et élégante à des millions d'utilisateurs à travers la France et l'Europe.

Sommaire
1. En-tête et Navigation :
Une couche d'interface utilisateur persistante et intuitive

Le système de navigation a été conçu pour la clarté, la facilité d'utilisation et la réactivité mobile. Les fonctionnalités incluent des menus déroulants pour la connexion/le panier, des éléments d'en-tête persistants et des info-bulles contextuelles.

2. Conception des modèles de mise en page :
Structures de pages et zones visuelles

Pour guider les utilisateurs à travers un large éventail de tâches, de la recherche de destinations à la réservation de billets, nous avons structuré le site autour de modèles visuels modulaires tels que HP (Page d'accueil), DEVIS, KALKI et le Modèle Y.

3. Établir la cohérence visuelle :
Système de boutons

La fondation de toute interface repose sur ses éléments d'action : les boutons. Chez Voyages-sncf.com, nous avons conçu un système de boutons complet basé sur la taille, la priorité et l'état d'interaction.

Variantes : Principal, Secondaire, Principal 2, Secondaire 2

Tailles : Grand, Moyen, Petit

États : Par défaut, Survol, Mode arrière-plan sombre

4. Création de liens engageants :
Typographie + Interaction

Nous avons conçu un système de liens pour guider les utilisateurs avec clarté et cohérence, en utilisant des états de survol clairs et des repères contextuels tels qu'un code couleur bleu ou orange.

5. Gérer la complexité :
Onglets et états de navigation

Nous avons conçu un système d'onglets pour organiser les parcours en plusieurs étapes et les modules riches en contenu. Il prend en charge les états de survol, actif et de notification, et s'adapte aux mises en page mobiles.

6. Mise en évidence de l'information :
MEA et alertes en ligne

Les MEA (Message d’Erreur ou d’Alerte) sont des bannières qui mettent en évidence les messages critiques, utilisant un code de couleurs et d'icônes pour indiquer l'urgence et le type.

7. Établir un langage visuel :
Iconographie

Un système d'icônes clair est essentiel pour les utilisateurs internationaux et l'accessibilité.

8. Conception de formulaires robustes :
Champs de saisie et états

Nous avons conçu un système de formulaires modulaire qui gère la validation, le focus et le traitement des erreurs sur une mise en page responsive. Les types de champs incluent texte, date, sélection, case à cocher et bouton radio. Les champs de saisie ont été conçus avec des états clairs pour le focus, l'erreur et le succès. Cela garantit que les utilisateurs reçoivent un retour immédiat sur leurs interactions.

Dernières réflexions
Conclusion

En unifiant le langage visuel et la logique d'interaction de la marque, nous avons créé un système qui permet : L'alignement du design et du développement, réduisant les redondances et accélérant la production. La cohésion multiplateforme, garantissant que les interfaces sur mobile, tablette et ordinateur se comportent de manière prévisible et semblent connectées.

La confiance et la facilité d'utilisation pour l'utilisateur grâce à des hiérarchies claires, des retours cohérents et des modèles d'interaction accessibles. La flexibilité marketing avec des modèles modulaires et des composants adaptables qui soutiennent le déploiement rapide de campagnes sans compromettre l'UX. Le renforcement de la marque grâce à l'utilisation intentionnelle de la typographie, de l'iconographie, de la couleur et du ton qui reflètent les valeurs de la SNCF : fiabilité, clarté et accessibilité.

En fin de compte, ce système permet aux équipes multidisciplinaires (designers, développeurs, marketeurs et product owners) de parler le même langage de conception, de se concentrer sur ce qui compte le plus pour les utilisateurs et de faire évoluer continuellement la plateforme sans repartir de zéro à chaque fois. Il s'agit d'un cadre évolutif et prêt pour l'avenir qui non seulement soutient l'entreprise, mais améliore l'expérience de voyage de millions de personnes chaque jour — transformant la complexité en clarté, et les interactions numériques en voyages significatifs.

Projets Connexes
Projet Précédent Texas Instruments
Projet Suivant Showreel