SNCF Sûreté Ferroviaire.

Lancé plusieurs années auparavant, le projet de refonte du site de la SNCF Sûreté Ferroviaire avait été mis en pause avant d'être relancé. Il fallait repartir des wireframes existants, y ajouter de nouvelles pages et fonctionnalités, et les adapter aux nouvelles exigences de la charte graphique SNCF.

J'ai rejoint l'équipe au moment de cette relance, pendant mon stage de M1 chez HighCo Mindoza, jusqu'à la mise en ligne du nouveau site. Je l'ai naturellement retrouvé l'année suivante, en alternance, pour accompagner le client après la mise en ligne.

D'abord en appui au design, puis aux côtés de la cheffe de projet digital pour le suivi et l'accompagnement du client :

• Application de la nouvelle charte avec la graphiste : typographies, couleurs et styles graphiques harmonisés.
• Wireframes des pages de la V2 et déclinaisons mobiles, utilisées par les développeurs comme référence pour le responsive.
• Recettes et validation des développements, avec création et suivi des tickets sur GitLab.
• Prise en main du back-office WordPress, avec quatre pages réalisées en autonomie complète.
• Gestion des retours client et proposition de nouvelles sections UX, comme des blocs vidéo.
• Rédaction du document de passation du back-office et animation des réunions de prise en main.
• Rendez-vous clients menés seule pendant mon alternance, pour accompagner les équipes dans les modifications de leur site.

• Relancer un projet mis en pause, en respectant la nouvelle charte graphique SNCF.

• Offrir une expérience cohérente sur tous les écrans, du mobile à l'ordinateur.

• Rendre la SNCF autonome dans la gestion de son site après la mise en ligne.

Un projet suivi en deux temps : la conception et le développement pendant mon stage, puis l'accompagnement du client pendant mon alternance. Avec le temps, j'ai gagné en autonomie dans la gestion des retours et des ajustements à apporter au site.

1. 01

   Charte & maquettes

   Application de la nouvelle charte sur les wireframes existants, en binôme avec la graphiste.

2. 02

   Déclinaisons mobiles

   Des maquettes mobiles qui servent de référence aux développeurs.

3. 03

   Recette & mise en ligne

   Tests des développements, remontée des erreurs et suivi des corrections sur GitLab, jusqu'à la mise en ligne.

4. 04

   Passation

   Un document qui détaille le back-office fonctionnalité par fonctionnalité, puis des réunions de prise en main avec le client.

Le nouveau site, aux couleurs de la nouvelle charte, a été mis en ligne à la fin de mon stage.

Dès la rentrée suivante, j'ai accompagné les clientes vers l'autonomie, avec un dossier de passation que j'ai conçu pour elles (voir ci-dessous) et plusieurs réunions de prise en main. Ensemble, nous avons par exemple mis en page et publié un article sur la newsroom du site.

Les équipes de la Sûreté Ferroviaire nous ont plusieurs fois félicités et remerciés pour cet accompagnement. Ce projet m'a apporté une vision complète du cycle de vie d'un site web, de la conception UX à l'accompagnement client, et m'a fait prendre conscience de ma maîtrise du back-office. Et ça, c'est toujours satisfaisant : voir que le travail fourni sert vraiment aux clients.

• 2 annéessur le projet, du stage de M1 à l'alternance
• 4 pagescréées en autonomie dans le back-office
• Passationun dossier complet et des réunions de prise en main

Faites défiler chaque maquette avec la molette de votre souris, ou du doigt sur mobile. Cliquez dessus pour l'agrandir.

Une fois le site en ligne, il fallait que les clientes puissent le faire vivre sans dépendre de l'agence. J'ai donc conçu, à leur intention, un dossier de passation complet pour qu'elles gèrent elles-mêmes le back-office WordPress de leur site.

Le back-office étant très riche, j'y ai détaillé chaque fonctionnalité pas à pas, captures d'écran à l'appui : le tableau de bord, la gestion des articles et des catégories de la newsroom, la publication d'un article, la création et la modification des pages… J'ai ensuite utilisé ce dossier comme support lors des réunions de passation menées avec elles.

Cliquez sur un extrait pour l'agrandir.