My Suez, refonte de l'intranet

La nouvelle direction visuelle de My Suez, l'intranet du groupe Suez, lu par environ 40 000 salariés, du siège au terrain. Elle a été choisie sur une maquette que le comité pouvait ouvrir et essayer, puis reconstruite dans Figma avec les composants de ServiceNow, l'outil sur lequel l'intranet tourne.

Le point de départ

Suez a changé de logo et élargi sa palette de couleurs en 2022. Son intranet, lui, n'a pas suivi : un bleu et un vert de base, une actualité peu mise en valeur, rien qui ressemble au groupe d'aujourd'hui. Avant de lancer une refonte longue, la communication interne voulait une cible visible, que le comité puisse regarder et tester.

Deux contraintes pèsent sur tout le reste.

• Deux publics très différents. Au siège, à La Défense, on passe la journée devant un ordinateur. Sur le terrain, les ingénieurs de l'eau, les agents d'exploitation et les techniciens des déchets ouvrent l'intranet vite, souvent debout, pour une seule information. L'écran doit servir les deux.
• Un outil imposé. L'intranet final est monté dans ServiceNow par un intégrateur. Un design qui s'éloigne trop des composants prévus par ServiceNow devient impossible à maintenir. Il fallait donc de l'ambition, dans un cadre serré.

Le travail couvre la page d'accueil et les modèles de pages : le support informatique, les démarches RH, les applications métier (sécurité, achats, voyages, formations), l'annuaire et les tableaux de bord.

Décider sur une maquette qu'on peut essayer

Dans une refonte d'intranet, le plus long n'est pas de dessiner, c'est de décider. Un comité qui regarde des planches fixes et des documents PDF a du mal à se projeter : il valide une direction qu'il n'a pas pu toucher, et l'écart avec le résultat se découvre des mois plus tard.

Ici, le comité a reçu un lien. Une vraie page d'accueil, qu'on ouvre dans son navigateur, sur ordinateur ou sur téléphone, en changeant de thème, de mode ou de langue d'un clic.

C'est le principe de la maison témoin. On ne vend pas un lotissement sur plan : on fait visiter une maison, on ouvre les placards, on touche les murs. La maquette joue ce rôle pour la refonte. Deux directions ont été proposées, puis ajustées deux fois, toujours sur la maquette.

Une maquette construite vite, et vérifiée

La maquette est construite avec l'aide de l'IA, à partir d'un système de design déjà établi : les couleurs, la typographie et les composants existaient avant la première ligne. L'IA assemble plus vite, elle n'invente pas le style.

Chaque version passe des contrôles automatiques avant d'être montrée : Lighthouse pour la vitesse, l'accessibilité et le référencement, axe-core pour les règles d'accessibilité WCAG AA, et Playwright pour vérifier chaque écran dans chaque thème et chaque langue. La version de référence obtient 100 sur les quatre notes de Lighthouse.

De la maquette à Figma, sur les composants de ServiceNow

Une fois la direction choisie, la maquette a été reconstruite dans Figma, au plus près, avec les composants d'Horizon, le système de design de ServiceNow. Ce travail a été mené avec Pierre Hatier, designer. La maquette servait alors de modèle, et Figma devait la reproduire.

C'est souvent à ce moment qu'une refonte perd son style, quand il faut passer aux composants imposés. Ici, presque tout est passé tel quel. Le carrousel d'actualités du groupe n'existait pas dans Horizon : il a été construit à part, par-dessus le système. Quelques autres composants ont reçu de petits ajustements. Le client a validé le résultat.

Les couleurs, les tailles et les espacements ont ensuite été rangés en variables dans Figma, et le thème appliqué au système de design lui-même. Les autres pages de l'intranet se déclinent à partir de ce thème, sans être redessinées une par une.

Ce qu'il a fallu tenir

• Les limites de ServiceNow. Aucun composant trop spécifique pour être maintenu par l'intégrateur. Une couleur différente par carte ou un lecteur vidéo sur mesure ont été écartés. Les encadrés et les pictogrammes colorés, que ServiceNow permet, portent le style à la place.
• Plusieurs marques du groupe. Jusqu'à 8 thèmes testés (Suez Group, Eau France, Recyclage & Valorisation, International) sur les mêmes composants : seules les variables changent.
• Deux langues. Tout le site existe en français et en anglais.
• Deux publics. Une hiérarchie claire et des textes lisibles pour le terrain, assez d'information par écran pour le siège.
• La charte Suez. Plus d'air et plus de caractère que l'intranet actuel, sans en sortir d'un pouce.

Résultats

• Deux pistes proposées, ajustées deux fois, et une direction choisie sur la maquette.
• 100 sur 100 en vitesse, accessibilité, bonnes pratiques et référencement sur Lighthouse, et conforme WCAG AA.
• Jusqu'à 8 thèmes et deux langues sur les mêmes composants.
• La direction reconstruite dans Figma sur les composants Horizon, validée par le client.
• Un thème posé sur le système de design, dont découlent les autres pages de l'intranet.

Ce qu'on en retient

Une maquette qu'on peut essayer fait gagner du temps là où une refonte en perd le plus : au moment de choisir. Et comme elle tient compte dès le départ des limites de ServiceNow, la direction choisie survit au passage dans l'outil final.

Outils

• HTML et Tailwind CSS pour la maquette, sans framework
• Figma et Horizon, le système de design de ServiceNow
• Lighthouse, axe-core et Playwright pour les contrôles automatiques
• Vercel pour partager la maquette en privé

Questions fréquentes