IDF Mobilités
Une application et un site d'aide au déplacement pour la région Île-de-France, ainsi que des services B2B et internes.
00

Problème
Île-de-France Mobilités opère un écosystème complexe de produits numériques : une application et un site B2C, un site B2B ainsi que plusieurs applications métiers. La multiplication des produits, des équipes (design, produit, développement) et des cycles Agile génère un risque fort d’incohérences, tant dans les parcours utilisateurs que dans les principes d’interface. Le défi est donc d’assurer une expérience utilisateur cohérente et fiable à l’échelle de l’ensemble de l’écosystème, malgré la diversité des équipes, des contextes d’usage et des contraintes opérationnelles.
Solution
La solution s’appuie sur un système de design centralisé et une collaboration transverse. Grâce à une communication directe avec les équipes et à un rituel dédié au design system, nous harmonisons les composants, anticipons les besoins et évitons les développements redondants, tout en restant compatibles avec un fonctionnement Agile.
Pendant 3 ans, j'ai occupé le poste de lead designer au sein du pôle Information Voyageurs du Département Politique Services Maas et Marketing chez Île-de-France Mobilités. J'ai pu intervenir sur un périmètre large, mêlant produits grand public, services B2B et outils internes ayant trait au déplacement en Île-de-France.

Île-de-France Mobilités, se déplacer dans la région
Île-de-France Mobilités (anciennement STIF) est l’autorité organisatrice des transports publics dans la région Île-de-France.
Sa mission est de faciliter les déplacements du quotidien, en proposant des services numériques fiables, accessibles et compréhensibles pour tous.
Les services numériques s’articulent autour de plusieurs piliers : la recherche d’itinéraires et l’aide au déplacement sur le site web et l’application mobile, et la mise à disposition de données de transport via la plateforme PRIM, à destination du public et des professionnels.
Historiquement, les services d’aide au déplacement étaient regroupés sous la marque Vianavigo. Avec l’ouverture à la concurrence et l’évolution du paysage des mobilités, il est devenu essentiel de clarifier le rôle de l’autorité organisatrice, au-delà des marques d’exploitants historiquement plus visibles (SNCF, Transilien, RATP, etc.).
Le renommage de l’application et du site en Île-de-France Mobilités a marqué le point de départ d’une refonte profonde des services numériques, tant sur le fond que sur la forme.
Une organisation complexe
L’organisation globale d’Île-de-France Mobilités est structurée autour de trois grands pôles : Communication, Billettique, et Information Voyageurs.
Au sein du pôle Information Voyageurs, les équipes fonctionnent en Agile, avec plusieurs branches :
Management transverse (DMT)
Build
Run
Back Office
Assurance Qualité
Design
Chaque produit dispose également d'un Product Manager et Product Owner
(Application, Web B2C, Web B2B, Back-office) qui étaient nos interlocuteurs principaux.
Le rôle de l’équipe design
L’équipe design intervient de manière transversale, en lien constant avec :
les équipes produit,
les équipes de développement,
les équipes métiers,
les autres pôles de design de l’organisation.
À mon arrivée, l’équipe était composée d'un manager, un lead designer (moi), et un designer junior. Si dans un premier temps le périmètre d’intervention de l’équipe était limité au B2C (app et site web), celui-ci s'est élargi progressivement au B2B et ensuite aux outils back-office, souvent par effet de bouche-à-oreille. L'équipe s’est renforcée avec l’arrivée d’un designer junior supplémentaire en 2023, puis d’un autre en 2024 pour permettre de répondre aux demandes des équipes.
Le système de design : cohésion et cohérence au service public
Comme précisé au-dessus, notre équipe n'est pas la seule équipe de design : chaque pôle en dispose d'une. Pour favoriser la cohérence de l'expérience utilisateur entre les produits, voir au sein des produits, un système de design (pour reprendre la terminologie du service public) a été mis en place.
Si le premier objectif est la cohérence et l'harmonisation de l'expérience utilisateur, les objectifs d'éviter les redondances de conception et de partager la connaissance et les bonnes pratiques sont tout aussi importants.
Fonctionnement
Le système reposait sur :
des décisions collégiales entre designers,
une répartition claire des tâches,
des phases de tests et de validation des composants,
des itérations suite aux mises à jour de Figma,
des échanges réguliers avec les développeurs pour garantir la faisabilité technique (et adapter en conséquence).
Le périmètre de ce système de design concernait principalement le web, l’application mobile ayant des contraintes spécifiques (techniques, OS), néanmoins, une attention particulière était portée à limiter les écarts et à maintenir une expérience la plus homogène possible entre les produits.
Évolution de la cartographie : un chantier structurant
La cartographie a été l’un des chantiers majeurs sur lesquels j'ai travaillé.
Nous sommes partis du constat initial suivant : Pendant plusieurs années, un écart important existait entre : la carte de l’application mobile et celle du site web.
Sur le web, la carte était schématique, quand celle de l'application était géographique. De ce fait, de nombreuses informations étaient éparpillées sur le site, avec des cartes aux présentations souvent différentes les unes des autres. Dans un souci d'homogénéiser l'expérience d'une part et de moderniser l'interface, nous avons opté pour une refonte de la cartographie et des pages qui y étaient liées.
Dans un premier temps, nous avons rassemblé les informations cartographiques qui étaient fragmentées et avons réalisé une veille des pratiques en France et à l'international.
À partir de ces informations, nous avons déterminer le fonctionnement de la carte, avec l'apparition de tel élément à tel niveau de zoom dans le but de conserver une carte lisible et qui ne croule pas sous les icônes. Icônes que nous avons aussi unifier en les standardisant et en comblant les manques.
Ces travaux n'ont pas été réalisés en isolation, nous avons travailler étroitement avec les développeurs pour valider la faisabilité technique. Nous avons également effectuer des études auprès des utilisateurs pour tester des concepts et identifier des informations manquantes. Des prototypes fonctionnels ont aussi été développé pour tester la lisibilité effective et les performances.
Harmonisation avec l’application
En parallèle, des adaptations ont été réalisées pour l’application mobile : les icônes ont été harmonisées, ainsi que leur apparition à un niveau de zoom similaire à celui du web. La carte sur l'application avait un souci d'affichage d'information où, au dézoom, seul un cercle réduit affichait les icônes pour limiter l'impact sur les performances.
Toutefois, certaines différences sont présentes car la carte de l'app et du site web ne sont pas construits de la même manière.
Modernisation de l'interface Web "Me Déplacer"
La mise en avant de la carte sur le web a ouvert la voie à une refonte plus large de la section « Me déplacer ». L'objectif pour nous était multiple : moderniser l'interface et se rapprocher du fonctionnement de l'application en favorisant la navigation transversales plutôt que par silo.
Chaque section a donc été refondue et adaptée au nouveau fonctionnement. Les liens entre chaque section ont favorisé une navigation plus intuitive, dé-silotée.
Autres sujets traités
Pendant 3 ans, j'ai l'occasion de toucher à de nombreux sujets dont je ne pourrais pas faire le tour rapidement. Voici une sélection de travaux :
Audits
Pour pouvoir lancer des projets d'envergure, nous avons régulièrement réalisé des audits : des audits heuristiques (pour évaluer l'utilisabilité des interfaces), des audits d'accessibilité (répondant au critère du RGAA et du WCAG) ainsi que des audits d'éco-conception.
Accessibilité
Les audits d'accessibilité nous ont permis d'identifier des éléments à corriger pour se conformer au RGAA, mais avec la refonte, nous avions déjà intégrés dans nos réflexions la conception de composants qui répondent aux besoins de ce référentiel.
Cela nous a ouvert par la suite la voie pour une étude auprès des utilisateurs déficients visuels de l'application qui nous ont amené à concevoir le fonctionnement idéal de la navigation des pages via lecteur vocal.
Éco-conception
Concernant l'éco-conception, nos réflexions ont concerné par exemple :la charge générée par l’affichage systématique de la carte sur le site web et proposé d'opter pour un affichage minimaliste excluant la carte.
Sur l’application, des pistes ont été explorées autour d’une version allégée s'appuyant moins sur la carte et limitant les fonctionnalités gourmandes en ressources pour une expérience plus sobre.
Communication dans l’application
Si la communication sur le site web (et en extérieur) est directement régi par le pôle Communication, celle de l'application d'Île-de-France Mobilités est dévolue au pôle Information Voyageurs avec une consultation du pôle Communication. Dans ce contexte, j'ai régulièrement proposé des formulations et des illustrations pour des communications liées à la circulation ou non des transports (horaires modifiés pour la Fête de la Musique ou le Nouvel An, impact des grèves) ou liées à de nouvelles fonctionnalités.
Transport Public Paris 2024
L'année 2024 aura été celle des Jeux Olympiques et Paralympiques de Paris. J'ai eu la chance de participer à la conception de l'application dédiée à l'aide au déplacement. Vous pouvez retrouver le projet sur cette page : Transport Public Paris 2024.
Année
2022—2024
Durée
3 ans
Outils
Figma, UserTesting, Testapic, Suite Adobe
Catégorie
UX/UI @ PwC The Experience Center Paris
