Refonte de l'expérience de la landing « Façonner Demain » sur l'intranet MyPlace de Crédit Agricole Assurances. Le parti pris graphique de la maquette est conservé ; ce qui change, c'est la manière d'entrer dans le plan stratégique, de s'y repérer et d'en sortir.
« Façonner Demain » présente le plan stratégique de CA Assurances aux collaborateurs : une vision, quatre engagements, six ambitions et quatorze programmes stratégiques transverses (PST). La V2 de la maquette, longue page animée au scroll, avait un vrai univers graphique — collages, scotchs, papier déchiré, animaux totems — mais une structure qui travaillait contre lui.
Les choix graphiques de la nouvelle maquette sont acquis. Le travail porte sur la structure, la navigation, la lisibilité et l'intégration.
Une expérience animée et ludique, qui fait naviguer entre les 6 ambitions plutôt que de faire descendre le lecteur dans 28 écrans.
Une SPA, des barres fixes de 116 px, un éditeur qui nettoie le HTML, et un contenu que la communication doit pouvoir modifier seule.
« Ambition » devient le mot de l'interface : il titre la page, structure la navigation et nomme les écrans.Arbitrage de vocabulaire, 10/09/2026 — les 14 PST gardent leur numéro et leur titre propre.
Analyse faite sur le fichier Figma lui-même, avant puis après la scission en deux pages : rendu pleine page découpé section par section, relevé programmatique des nœuds de texte, contrastes calculés sur les couleurs réellement utilisées.
Faites défiler : la maquette V2 scindée (13 605 px), réduite à 25 %.
écrans de scroll, sans indicateur de progression ; une nav d'ancres non sticky, libellée en vocabulaire interne.
du scroll avant « Maintenant que vous savez où l'on va » — la phrase arrive après ce qu'elle annonce.
du texte incliné (126 nœuds sur 145) : il ne reste aucune zone de lecture droite.
du texte de la page occupé par les deux mêmes sponsors, répétés sur les 14 cartes.
blanc sur turquoise : échoue même en gros texte.
le CTA « Notre Vision ici », blanc sur vert pomme.
La page existante garde la narration (vidéo, vision, engagements, brochure) ; une page dédiée porte les ambitions et les 14 programmes. La maquette passe de 24 990 à 13 605 px, la narration inversée et la double présentation des ambitions disparaissent d'elles-mêmes.
Plateau, chapitres, main de cartes : chaque proposition est passée en filaire sur les 6 ambitions (18 écrans), puis jaugée côté LumApps — faisabilité, mode d'intégration, charge, risque.
La landing revue tient en six écrans calés au défilement, chacun à la hauteur exacte de la fenêtre. Tous les textes sont conservés mot pour mot ; la page est trois fois plus courte.
Ouvrir un programme ne remplace pas la vue : la fiche se déplie sous les cartes de son ambition, sans perdre le contexte. Sept blocs articulés, servis pour les 14 programmes.
Bibliothèque atomique dans Figma et en code, en deux fidélités (filaire / couleur). Les fiches s'obtiennent en instanciant un gabarit et en changeant des données.
Aucune n'est bloquée par la plateforme. Ce qui les départage, c'est le coût de l'accessibilité et de la déclinaison mobile — un arbitrage de budget, pas de faisabilité.
Les 6 ambitions posées sur un plan ; on entre dans une ambition, on en ouvre les programmes. Simplifiée en popin par ambition pour tenir le clavier et le mobile.
Un rail horizontal piloté au scroll, un chapitre par ambition. La moins risquée, mais elle capte le défilement de la page.
Les 14 programmes en éventail, redistribués au filtre, avec un compteur « 3 / 14 ouverts » qui ne tient que par navigateur.
Charges front indicatives, socle commun de 8 – 12 j inclus, sur une échelle de 0 à 30 jours. Pré-jauge, pas un chiffrage contractuel.
Trois niveaux, toujours dans le même écran : on ne quitte jamais la vue des six ambitions, et on sait à chaque instant où l'on est. Prototype filaire, iso à la maquette, testé sur le tenant LumApps.
Même lucarne de 1 440 × 800, même grille, mêmes composants : la version couleur reprend l'univers de la maquette — aplats vert et cyan, papier déchiré, scotchs — sur l'ossature du filaire. Glissez pour comparer.
scroll-snap), qui tient même sans script ; il cède volontairement sous 1 000 px de large.Les hauteurs des deux aperçus sont à l'échelle l'une de l'autre.
Chaque fiche reprend le modèle « fiche animaux » de la maquette : bandeau du programme, totem, mission et objectifs en cartes de papier, vidéo, porteurs. La couleur suit l'ambition de rattachement.
Trois mises en page de la même fiche, soumises à l'arbitrage du client.
Fondations, atomes, molécules, organismes et gabarits, construits dans Figma et réécrits à l'identique en CSS — mêmes noms des deux côtés, pour qu'un écran se lise pareil dans le fichier et dans le code. Chaque gabarit porte une variante « Fidélité » : filaire pour valider la structure, couleur pour l'interface.
.fdUn bloc autonome, sans framework ni backend, collé dans un widget HTML LumApps. Tout ce qui suit a été éprouvé sur un tenant LumApps de test, avec les pièges qu'il a révélés.
Le mode micro-app en iframe hébergée reste le repli documenté si l'éditeur LumApps réécrit le bloc : il isole le code de l'éditeur, au prix d'un pont postMessage pour l'URL et la mesure.
build-widget.py assemble les sources en blocs collables *-lumapps.html, seuls fichiers à livrer.@media : le bloc vit dans une colonne de gabarit de largeur inconnue. 3 colonnes jusqu'à 780 px de widget, 2 en dessous, 1 sous 520 px.container-type: inline-size, tailles en cqi : le contenu suit la largeur de sa case (titre de 15 à 22 px).scroll-snap-type: y mandatory, hauteur calc(100dvh - 116px) sous le chrome MyPlace.yPercent 110 → 0), réserves graphiques découvertes en clip-path.--par (−1 → 0 → 1) sur les écrans voisins, une fois par image ; tout le mouvement est en CSS, donc réversible à la remontée.translate, rotate et scale et les remet à none en ligne — la règle CSS meurt en silence.prefers-reduced-motion respecté partout ; document masqué (onglet en arrière-plan) rendu directement dans son état final.transform, opacity et clip-path ; jamais top, left ni width./* extrait de landing-b1.css : le script ne pose que --par, tout le mouvement est ici */ #fdl[data-par="1"] .fdl__ecran::before { /* le grain, le plus loin */ transform: translate3d(0, calc(var(--par, 0) * 22px), 0) scale(1.06); } #fdl[data-par="1"] .fd-visuel img { /* les illustrations, à contresens */ transform: translate3d(0, calc(var(--par, 0) * -54px), 0); } #fdl[data-par="1"] .b1__h1 .fdl__ligne { /* le cache de ligne, hors de portée de GSAP */ translate: calc(var(--par, 0) * 76px) 0; }
À chaque ouverture, la popin relit un widget « liste de contenus » de la page. Le contrat est éditorial : un titre de contenu qui contient le numéro du programme.
PST 04 — Entreprises et entrepreneurs
fd-source → component-row--fd-source) : sélecteur en « contient ».<div id="fd-entree"><br></div>.!important du tenant battent tout sélecteur : masquage de la navigation en style en ligne, restitué à l'identique.<meta charset="utf-8"> en première ligne de chaque bloc, sinon mojibake.<dialog> modal, piège de focus, fermeture Échap et croix visible, focus rendu à la carte d'origine.:focus-within.<button>.| Vague | Contenu | Cible |
|---|---|---|
| 1 · coquille | HTML, CSS critique, premier écran | < 150 Ko |
| 2 · expérience | GSAP + 1 plugin, visuels | < 600 Ko |
| 3 · à la demande | lecteurs vidéo (façade, un seul vivant) | 0 Ko avant clic |
Images de la maquette : 22 Mo de PNG ramenés à 511 Ko de WebP. Bloc couleur ≈ 500 Ko en data URI, ≈ 50 Ko une fois les images en médiathèque.
| Fichier | Rôle | Où |
|---|---|---|
landing-lumapps.html | La landing entière, six écrans, animations GSAP | widget HTML, page mère |
widget-lumapps.html | Les 6 ambitions et leur popin, seules | widget HTML, page dédiée |
fiche-pst-lumapps.html | La fiche d'un programme, réglée par data-pst | une page par PST |
composants.html · fd-composants.css | Planche et feuille de la bibliothèque (36 composants) | référence d'intégration |
build-widget.py | Assemble les blocs collables depuis une source unique | poste de travail |
| Figma « Façonner demain V2 » | Filaires, concept couleur, DS · Fondations, DS · Kit UI | référence design |
La structure, le prototype intégré et le design system sont prêts. Ce qui reste dépend surtout de contenus et de décisions côté CA Assurances.