All works

The SNCF Group website

The group’s main website, groupe-sncf.com: one place to tell the story of SNCF to candidates, journalists, investors, suppliers and travellers, accessible and eco-designed by default.

An article page of the SNCF Group website, with an ICE and a TGV INOUI at Paris Est station
Client
SNCF Groupe
Role
Product Designer
Website
groupe-sncf.com

Context

groupe-sncf.com speaks for the whole group. Its visitors come with very different questions: a candidate looking for a job, a journalist after a press release, an investor reading financial results, a supplier, or a traveller curious about the next TGV.

The content is organised in five editorial sections (the group, mobility, sustainability, innovation and #EnCoulisses, behind the scenes), alongside a direct entry for each type of visitor.

The challenge

Give a very large organisation one clear voice, while letting every visitor find their own way in quickly.

  • Guide five very different audiences without multiplying websites
  • Make the site usable by everyone, whatever their visual, reading or cognitive needs
  • Reduce the site’s environmental footprint without losing its editorial richness
  • Work just as well on a phone as on a desktop screen

An entry for every visitor

A “Vous êtes” (“You are”) menu, always visible in the header, takes each audience straight to what matters to them. The home page mixes news, key figures and photos cut into the group’s signature shapes.

Accessibility and eco-design, built in

Two menus sit at the top of every page. Accessibility lets visitors switch to a dyslexia-friendly font, increase line spacing, or invert contrasts. Eco mode turns on a low-consumption mode that removes non-essential visuals, on top of a site that is already eco-designed.

Dark mode

A switch next to the language selector turns the whole site dark, from the header to the news cards.

Article pages

Long-form articles open with a large visual, a breadcrumb and a short introduction, then alternate text and images to keep long reads comfortable.

On mobile

On a phone, every option (accessibility, eco mode, language, dark mode and the “Vous êtes” menu) moves into a single menu, above the five sections.

Mobile home page with the hero visual
Home page
Mobile menu: accessibility, eco mode, language, dark mode, “Vous êtes” and the five sections
Menu with every display option
Mobile news section with a swipeable card carousel
News as a swipeable carousel
Next project CASSINI