Case study · UX/UI LumApps & direction artistique

MyVeolia
connecter les non-connectés

Refonte de la page d'accueil intranet LumApps de Veolia. Entre l'atelier de cadrage et la mise en production, une piste entière a été abandonnée après avoir contredit sa propre promesse technique — l'histoire la plus instructive du projet est là.

Client
Veolia — direction de la communication
Plateforme
LumApps (client depuis 2015)
Périmètre
Page d'accueil + 2 templates réplicables
Rôle
UX/UI, DA, intégration LumApps
Période
Septembre — octobre 2026
Statut
Prototype en production, arbitrages en attente
La promesse

Connecter les non-connectés

Simplifier la vie des collaborateurs, y compris ceux du terrain. Effet attendu : au premier regard, savoir où trouver l'information.

La contrainte réelle

Des widgets, pas du CSS libre

Chaque bloc de l'interface doit correspondre à un widget LumApps natif — une promesse faite au client dès la présentation, qui a fini par trancher le projet.

Les voix client

Quatre interlocuteurs, quatre logiques

Hiérarchiser, servir par les services, relier le local au Groupe : les trois principes retenus viennent mot pour mot de l'atelier, pas d'une préférence d'agence.

Planche des 9 écrans du prototype MyVeolia : mon espace, services, actualités, communautés, contacts, l'univers Veolia, mega menu ouvert, lanceur de services, mode explicatif.
Planche complète du prototype déployé (9 écrans, desktop 1920×1080) — myveolia-piste-c.vercel.app
Contexte

Un intranet LumApps vieux de dix ans, pensé pour le bureau

Veolia est client LumApps depuis 2015. L'usage réel de la page d'accueil est partagé environ 50/50 entre desktop et mobile, alors que la cible de design initiale ne couvrait que le desktop — le mobile de LumApps restant le standard, non modifiable dans le périmètre du projet.

Interlocuteurs côté Veolia

  • Direction de la communication — attend qu'on propose plutôt qu'elle choisisse.
  • Sciences comportementales — parle en charge cognitive, remarques actionnables en UX.
  • Stratégie digitale — allié lucide sur les limites de l'existant.
  • Marketing/communication — vigilant sur la maintenabilité.

Livrable attendu

2 concepts minimum, 3 si possible, puis déclinaison sur 3 gabarits (accueil, page secondaire, page actualité). Decathlon identifié comme référence benchmark dès l'atelier — notamment pour la navigation à rail gauche.

Atelier du 24 septembre

Trois principes, directement issus des verbatims

Chaque choix de maquette découle de l'atelier — pas d'une préférence d'agence. Trois principes ont été dégagés et ont guidé toute la suite du projet.

Hiérarchiser

Une entrée dominante

Orienter le regard et réduire les sorties, plutôt que tout mettre au même niveau.

Servir

Entrer par les services

Les outils du quotidien en premier (demande à 4 voix sur 4), les actualités ensuite.

Relier

De moi vers le Groupe

La logique d'Alan : mon espace, mon site, puis tout l'univers Veolia — jamais l'inverse.

Marketing/communication
« Ce qui doit être mis en avant ne l'est pas. »
→ Un article à la une unique, choisi par la communication, visible dès l'arrivée.
Marketing/communication
« L'agenda de ma journée »
→ Agenda du jour et actions en attente, en tête de page.
Stratégie digitale
« Mes services / Mes raccourcis »
→ Services du quotidien en premier, accès à toutes les applications en un clic.
Direction de la communication, sur Decathlon
« Les boutons d'accès direct sur la gauche »
→ Rail de navigation toujours visible, repris du benchmark.
Stratégie digitale
« News locales / News globales »
→ Actualités du site d'abord, puis France, puis Groupe.
Sciences comportementales
« Mes contacts : volet personnalisé selon job/BU »
→ Interlocuteurs filtrés par poste et site, avec numéros utiles.

Lire le compte rendu complet de l'atelier → historique du groupe, diagnostic en 3 colonnes, 6 verbatims bruts, trous de la séance

Exploration

Trois pistes, une charte à deux lectures possibles

La charte Veolia admet deux lectures : deux couleurs par page (marine + turquoise, sobre) ou le dégradé « One Veolia » de la couverture institutionnelle (turquoise → violet, plus démonstratif). Les trois premières pistes ont exploré cette tension avant que la contrainte technique ne tranche.

Piste A — « Mon quotidien »

Par univers façon Decathlon : menu Corp à gauche avec ancres de section, services en entrée dominante, registre chaleureux et photographique, actualités locales puis Groupe.

Piste B — « Le bon moment »

Tableau de bord organisé selon le moment de la journée, référence CAA : fond neutre, couleur ponctuelle, outils en onglets, actualités en liste sobre.

Les deux pistes respectaient les zones imposées (barre native LumApps non redessinée, navigation locale, bandeau d'alerte, menu Corp à gauche) et passaient la porte qualité maison : contrastes AA sur toutes les paires de couleurs, audit RGAA/reflow 320px à zéro non-conformité après correction de deux défauts initiaux.

Marine #002D62 Bleu vif #037EA4 Turquoise #05C3DD Fond #EDF0F4
Le pivot

Une piste abandonnée après avoir contredit sa propre promesse

C'est le passage le plus instructif du projet : une piste retenue pour la présentation client s'est révélée incompatible avec l'engagement pris en slide 10 — « chaque bloc correspond à un widget natif ». La détecter et la corriger avant la mise en production a évité de livrer une interface non maintenable.

  1. Piste C retenue pour la présentation

    Dashboard bento avec mode explicatif (46 repères par bloc), trois jeux de couleurs commutables selon l'univers (Eau, Déchets, Énergie), charte officielle relevée dans le Brand Center Veolia.

  2. La contradiction identifiée

    La piste C repose sur 110 classes CSS maison (bento, anneaux de progression, histogrammes, piles d'avatars) qui n'existent comme widgets LumApps nulle part. Elle contredisait directement la promesse faite au client.

    Décision : la piste C est mise de côté. Reprise de la base de Nicolas Comte (rail gauche + mega menu), déjà conçue en widgets LumApps natifs avec une seule classe CSS d'habillage par bloc (mv-*).

  3. Nettoyage vers les widgets natifs

    Retrait des histogrammes, anneaux de progression et bento de forme libre. Remapage sur les widgets standards LumApps : article-list, task, community-list, directory-entries, user-list. Bilan : 21 blocs natifs, 8 à valider, 6 supprimés.

  4. Présentation en slides, pas en ligne

    Choix délibéré : présenter 6 slides plutôt que le prototype Vercel, pour ne pas révéler au client que le développement avait déjà commencé avant validation du parti pris.

Résultat

Deux versions de navigation, à trancher par le client

Le prototype final (piste C nettoyée) a été déployé en production — pas un lien de test, une URL stable pour la validation client.

Écran Mon espace : article à la une, agenda du jour, météo du site, mon équipe.
Mon espace. Article à la une, agenda et actions en attente, météo du site, mon équipe — les quatre points de l'atelier traduits en un seul écran.
Écran Mes services et outils : démarches du quotidien en tuiles photo, outils métier séparés.
Mes services. Le quotidien en tuiles photo, séparé des outils métier — demande à 4 voix sur 4 à l'atelier.
Écran Actualités : mon site d'abord, puis Veolia France, puis Groupe en liste sobre.
Actualités. Mon site, puis Veolia France, puis le Groupe en liste sobre — jamais l'inverse.
Écran L'univers Veolia : grande photo du Groupe en mouvement, redirections et documents de référence.
L'univers Veolia. Grande photo, redirections Groupe, documents de référence — « chaleureux, humain, photo » était le choix le plus net de l'atelier.

Version 1 — Rail à gauche

La règle actuelle de Veolia, conservée. Repères familiers, accès direct par univers façon Decathlon. Contrepartie : deux navigations (locale et Groupe) à faire cohabiter.

Version 2 — Mega menu en haut

Une seule navigation fusionnée, fin de la réplication de l'arbre Groupe. Contrepartie : change les habitudes des utilisateurs du site actuel.

« Ce qui doit être mis en avant ne l'est pas. »Une interlocutrice de la direction de la communication, atelier de cadrage — le principe fondateur de toute la refonte.

LumApps widgets natifsFigmaHTML/CSS/JSVercelAudit RGAA automatisé
État du projet

Prototype livré, quatre arbitrages encore ouverts

Planche mobile du prototype MyVeolia, 7 écrans sur iPhone 14 (390×844).
Déclinaison mobile, testée sur trois tailles d'écran — mêmes widgets LumApps standards, aucun développement spécifique.