Par mail
Solene.lepretre.petitjean@gmail.com
+33 624131808
Modular and tailored to your career path

A single component

A little background

Oui.sncf is a French company offering train ticket reservation services. It is part of the SNCF group (Société Nationale des Chemins de fer Français), the state-owned company that manages rail transport in France. Oui.sncf enables travelers to purchase tickets for journeys throughout France, as well as for international destinations in Europe.

The online platform offers a simple interface for booking tickets, consulting timetables, and sometimes even purchasing bus tickets and combined travel offers. It is one of the most popular ways for French people and tourists to organize their train travel. Oui.sncf stands out for its ease of use and wide range of transport options.

The timeline is a key element on OUI.sncf. Both graphic and reassuring, it accompanies users throughout their journey. Pour harmoniser son usage sur toutes les étapes et devises, l’équipe a décidé de la refondre et de l’intégrer au Design System OUI.
  • L’objectif : créer un composant modulaire, adaptable et cohérent. Un défi relevé malgré de nombreuses contraintes, comme la gestion des différents modes (train, bus, covoiturage), des types de transport (TER, OUIGO, etc.) et des informations associées.
Présente jusqu’à 8 fois sur le parcours d’achat, la timeline offre un degré d’information adapté à chaque étape.
Etapes de reflexion

1- Uniformisation des timelines : une approche structurée

Dès les premières phases de recherche, la diversité des timelines a été identifiée comme un problème clé. Une fois cette étape terminée, nous avons entamé la phase de conception pour structurer et organiser les informations.

2- Le design system : un atout pour l’efficacité
Un design system bien conçu est essentiel pour les UI designers et développeurs. Avant l’intégration complète, nous avons travaillé sur toutes les variantes du composant, incluant les cas spécifiques comme les correspondances courtes ou les perturbations. En parallèle, nous avons défini les entités clés pour assurer modularité et cohérence.

UI Design

Back