Profil hybride UI/UX & Front-End, Je transforme votre
vision produit en interfaces performantes, de la conception graphique jusqu'à l'intégration technique.
NicolasCassard
Nicolas Cassard — UI/UX Designer & Intégrateur
A propos
Fort de 15 ans d'expérience,
je réduis la barrière entre design et développemment.
En structurant des Design Systems évolutifs, j'accélère les cycles de livraison
et la qualité du produit final.
Expérience Professionnelle
Expérience
professionelle
D'abord spécialisé dans la création de plateformes e-commerce
en agence, j'ai fait évoluer mon expertise vers un rôle plus
transverse en Product Design.
Ma double compétence en UI/UX et en intégration est le fil
conducteur de mon parcours : elle me permet de concevoir
des interfaces complexes tout en garantissant leur faisabilité
technique.
Aujourd'hui Lead Hybride UI/UX dans le secteur géo-numérique,
je m'occupe du design des évolutions fonctionnelles d'une
solution cartographique métier.
Au-delà de l'opérationnel, mon profil hybride me positionne au
centre de la collaboration entre l'UI/UX et le développement. Au
quotidien, je structure les bonnes méthodes et les partage aux
équipes Design et Front-End afin de fluidifier les processus de
production.
Mes domaines
de compétences
Comprendre & résoudre
UX Analytique & Recherche secondaire
Analyse des données actuelles et retours (clients, utilisateur)
pour identifier les points bloquants.
Utilisation de l'IA pour générer et challenger des scénarios utilisateurs,
créer des personas synthétiques et explorer un maximum de pistes créatives.
Concevoir
Conception UI & design system
Design graphique des différents écrans du site, à partir des
données récoltées.
Cartographie de tous les composants réalisés dans un design system.
Réaliser
Intégration Front-end
Intégration fidèle des interfaces (Pixel Perfect). Traduction
des Design Systems en Design Tokens et implémentation Front-End
assisté par l'IA.
Culture Design & Savoir-être
Empathie et écoute active
Qu'il s'agisse des besoins utilisateurs ou des contraintes de
l'équipe (PM, développeurs), je m'attache à comprendre les
enjeux de chacun pour trouver les solutions les plus justes.
Sélection de travaux
Sélection
de travaux
enermap
Plateforme cartographique d'aide à la décision énergétique pour les
élus locaux.
Smart Implantation
Plateforme de promotion marketing de la région Île-de-France
orientée vers la prise de contact.
SCE WEB
Solution d'affichage de données cartographiques pour les
collectivités et acteurs du territoire.
Enermap
Concevoir et livrer en 4 mois une plateforme cartographique
d'aide à la décision énergétique pour les élus locaux, du Figma au
code intégré, avec l'IA comme co-pilote.
01
Le projet en30 secondes
Élément
Détail
Produit
EnerMap — plateforme web publique d'aide à la décision
énergétique
Commanditaire
ENGIE (Direction des Relations Parlementaires &
Territoires) + SIRADEL
Pour qui
Élus locaux, EPCI, communes — secondairement business
developers ENGIE
Mon rôle
Lead UI/UX & Intégration Front-End
Équipe
~8 personnes — Head of Design, Chef de projet, 1 dev
back, 1 dev back/front, 3-4 data engineers, moi
À l'approche des élections municipales, les communes
définissent leur feuille de route énergétique pour les 6 années à venir.
Mais entre la complexité réglementaire (PCAET, SRADDET,
SCoT, PLUi…), la diversité des sources d'énergie, et la
pression climatique, les élus n'ont pas d'outil simple pour
objectiver leurs choix.
Côté société : 81 % des Français sont favorables à
l'installation d'infrastructures ENR près de chez eux,
68 % souhaitent une accélération sur les
5 prochaines années (étude IFOP/ENGIE, mai 2025).
La complexité du brief tenait dans une triple exigence :
Technique — agréger des
données publiques hétérogènes (IGN, BRGM, Cartofriches, RPG IGN,
PVGIS, Natura2000, Enedis…) en indicateurs lisibles
Politique — rester 100 %
gratuit, transparent, indépendant, sans biais commercial
Pédagogique — donner
à un·e élu·e non-spécialiste les moyens de comprendre, comparer
et décider
Note honnête
Les artefacts ci-dessous (personas, parcours, questions
d'entretien) sont une reconstitution a posteriori
pour formaliser la démarche. Sur le projet, l'expression du besoin
a été conduite de manière itérative entre le commanditaire (ENGIE),
SIRADEL et l'agence éditoriale Ekno. Je n'ai pas conduit d'entretiens
utilisateurs en propre.
Persona principal
Hélène, 52 ans,
Adjointe à la Transition Écologique
Contexte
commune de 12 000 habitants. A pris la délégation
il y a 2 ans, formation initiale en sciences
politiques.
Mission
préparer le PCAET et faire valider une feuille de route
énergétique en conseil municipal.
Frustration
« Je dois argumenter devant le conseil et devant les
habitants, mais je ne sais pas par où commencer. Les
données sont dispersées, jargonneuses, et chaque
interlocuteur tire la couverture vers son énergie. »
Besoin clé
un outil neutre qui me dise en 5 minutes ce que ma
commune peut faire, et avec quels ordres de grandeur.
Persona secondaire
Marc, 38 ans,
Business Developer ENGIE Régions
Contexte
démarche les communes pour des projets ENR (solaire au
sol, réseaux de chaleur).
Frustration
« Quand j'arrive en mairie, je dois souvent expliquer
le contexte avant même de pouvoir parler du projet. Je
perds 20 minutes à poser le décor. »
Besoin clé
un support neutre, partagé, sur lequel je peux m'appuyer
pour ouvrir la conversation sans paraître commercial.
Questions d'entretien hypothétiques
Si on avait pu interroger une dizaine d'élu·es en amont, voici
les questions que j'aurais posées :
Comment décrivez-vous aujourd'hui les enjeux énergétiques de
votre territoire à vos administrés ?
Quelles sources d'information utilisez-vous pour préparer un
dossier de transition énergétique ? Lesquelles vous
semblent fiables ?
Si vous deviez expliquer le potentiel solaire de votre
commune en 30 secondes en conseil municipal, comment
feriez-vous ?
Qu'est-ce qui vous empêche aujourd'hui de lancer un projet
ENR concret ?
Avez-vous déjà eu à arbitrer entre deux types d'énergie
(ex. : solaire vs biogaz) ? Comment l'avez-vous
tranché ?
Quelle équivalence concrète vous parle le plus :
« X GWh/an », « consommation de
Y habitants », « Z foyers
alimentés » ?
User journey simplifié
01Arrivée
→ Hélène cherche « ma commune ENR » sur
Google, atterrit sur EnerMap
02Exploration
→ Lit la page « Comprendre » pour saisir le
rôle des collectivités
03Recherche
→ Tape le nom de sa commune dans la barre de recherche
04Découverte
→ Vue générale : impact climatique + potentiel par
type d'énergie
05Approfondit
→ Clique sur « Potentiel solaire » pour voir
la carte des zones éligibles
06Partage
→ Capture d'écran ou URL envoyée à son équipe / au DGS
C'est le cœur de mon apport sur ce projet et la raison pour
laquelle on a tenu les délais. J'ai pu efectuer la basscule
entre design et code, en intégrant directement les designs et
composants à partir des frames Figma, avec l'IA comme co-pilote
.
FigmaDesign UI / Itérations
MCP FigmaCode generation
Angular + TailwindBase intégrée en autonomie
Handoffaux dev back/front pour data binding
boucles courtes (itérations)
Pourquoiça change tout
Pas de « design pixel-perfect » à transmettre : je code la base directement à partir des frames,
le DS est cohérent par construction.
Boucles design-dev raccourcies : les
retours client se traduisent en modifications design ET
code dans la même journée. Plusieurs itérations en
quelques heures plutôt qu'une par sprint.
L'équipe back gagne en focus :
pendant que je construis l'UI, les devs back/data se
concentrent sur ce qui a vraiment besoin de leur expertise
(traitement des données, API, performance).
L'IA absorbe le chronophage :
génération de tokens CSS, composants atomiques, premier
jet de structure HTML — tout ce qui était autrefois du
temps d'intégration « mécanique ».
Conséquence directe sur le projet
Le site a pu être présenté au Salon des Maires alors qu'il était encore en
développement. Des élus se sont baladés iPad à la main pour le montrer à
leurs pairs — ce qui a accéléré la viralité institutionnelle
et débouché sur une présentation au COMEX ENGIE.
J'ai retenu trois décisions qui me semblent les plus
représentatives du travail UX, et qui ont chacune un effet
mesurable sur l'usage.
5.1 — Architecture éditorial → outil
Le problème
Un outil cartographique brut perd un élu non-spécialiste
en 30 secondes. Inversement, un site éditorial sans
outil ne donne aucune prise pour l'action.
La décision
Structurer le parcours en deux temps successifs, matérialisés par les 4 entrées de la home :
Comprendre
Identifier
Agir
Financer
Pages éditoriales — pédagogie sur le rôle des
collectivités
Recherche commune + fiche détaillée
Pages éditoriales — étapes d'un projet
Pages éditoriales — leviers de financement
Pourquoiça marche
L'élu non-formé se rassure d'abord avec l'éditorial, l'élu
averti se rend directement sur la barre de recherche.
Les deux profils sont servis sans fragmenter
l'interface.
5.2 — Search bar en hero, pas de menu
Le problème
Un visiteur qui arrive sur EnerMap a un nom de commune en
tête, pas une intention de navigation.
La décision
Placer la barre de recherche au centre du hero, comme premier élément interactif. Pas de menu dropdown,
pas de mégamenu. Un autocomplete intelligent (ville / EPCI
/ code postal) qui résout l'ambiguïté à la volée.
Pourquoiça marche
Moins de 2 secondes entre l'arrivée et
la première donnée utile. Le menu « Ressources » en
haut à droite reste discret pour ceux qui cherchent les pages
éditoriales.
5.3 — Code couleur sémantique sur la fiche commune
Le problème
La fiche d'une commune affiche une vingtaine d'indicateurs (population, climat, potentiels par type d'énergie, surfaces…).
Sans hiérarchie visuelle, l'élu décroche.
La décision
Un code couleur par famille d'information, posé une fois pour toutes dans le DS, et appliqué de
façon cohérente partout :
Vert / turquoise — données contextuelles
(population, superficie, surface mobilisable)
Beige — impacts du changement climatique
(canicules, nuits tropicales, grêle)
Blanc — KPIs principaux et indicateurs de
méthodologie
Pourquoiça marche
Un élu peut scanner la page sans lire les libellés. Le cerveau identifie d'abord les
« familles », puis le détail. Et c'est cohérent
entre la vue générale et les vues détail (potentiel
solaire, éolien, etc.).
Résultats factuels
MVP livré dans les délais
oct 2025 → janv 2026, ≈ 4 mois
Couverture France entière
Toutes les communes dès le lancement
Démos Salon des Maires
Élus naviguant sur iPad, site encore en développement
Présentation COMEX ENGIE
Projet remonté au plus haut niveau de la direction
Couverture presse
Campagne comm. ≈ 150 k€, équivalent au budget de
production
Posture MVP assumée
Bandeau « première version » revendiqué
publiquement sur le live
Trois enseignements
01 — Sur ce projet, la suppression de la frontière design
/ intégration a été un accélérateur. Il a été possible d'éliminer un cycle entier de boucles dev.
Les modifications client passaient de la maquette au code dans
la même journée (voire quelques jours pour des retours plus complexes).
02 — L'IA et le MCP changent la nature des tâches design,
pas leur valeur. Ce qui devient automatisable (tokens, composants atomiques,
base CSS) libère du temps pour ce qui ne l'est pas : comprendre
l'utilisateur, arbitrer une hiérarchie d'information, défendre
un choix de data viz.
03 — Le DS industrialise des pattern design, mais ne
remplace pas les décisions humaines. Code couleur sémantique, équivalences chiffrées (« 164 GWh/an = consommation de
71 930 habitants »), warming stripes — chaque convention visuelle est d'abord
une décision éditoriale. Le DS la rend consistante à
l'échelle.
Ce que je feraidifféremment
Tester en amont avec de vrais élusmême 3-4 entretiens auraient solidifié les hypothèses
sur les libellés et les unités.
A/B test la homeversion actuelle (search bar nue) vs. variante avec
mini-onboarding redirigeant les novices vers la page
« Comprendre ».
Préparer plus tôt le mobilele site a surtout été pensé pour le desktop/tablette.
Praticable sur mobile, mais pas encore optimal.
Smart Implantation
Plateforme de biens immobiliers en Île De France pour les
entreprises.
L'objectif: Faire évoluer Smart Implantation vers un site marketing
du territoire, tout en conservant les fonctionnalités essentielles.
Avant
Après
01
Le projeten bref
Élément
Détail
Produit
Smart Implantation — plateforme de promotion du
territoire francilien pour les entreprises qui veulent
s'implanter
Commanditaire
Région Île-de-France (Île-de-France Smart Services) ·
L'Institut Paris Region · Medicen · Choose Paris Region
Cible métier
Startups et PME industrielles (10-200 personnes)
cherchant à s'implanter ou se relocaliser en IDF, sur les
filières stratégiques (santé, aéronautique, ENR, mobilité
durable, agro-alimentaire…)
Mon rôle
UI/UX Designer + Intégration Front-End
Équipe
5 personnes : chef de projet, Head of Design
(consultatif), dev front (data binding map), dev ops
(déploiement), moi
Smart Implantation est en service depuis 2021. Quatre ans après
son lancement, le constat porté par le commanditaire est
clair :
le service n'a pas atteint ses objectifs de performance et
d'adoption. La totalité des entreprises interrogées lors du cadrage le
confirment — la plateforme est peu connue,
peu utilisée, et perçue comme inadaptée aux besoins du
secteur industriel. Sur le plan UX, les frictions
s'empilaient :
Ce qu'il y avait
2 portes concurrentes — « Je recherche un bien » vs « Je recherche un territoire » scindent l'intention dès la première seconde
Filtres surchargés — 5 dropdowns en ligne + bouton « + de critères » ouvrant 6 thématiques supplémentaires sur un écran séparé
Rupture plein écran — cliquer sur une annonce efface la carte, les filtres et
la liste — le visiteur perd toute son exploration
Dette qualité — 13 critères
RGAA en non-conformité (contrastes, ARIA, navigation clavier…)
et empreinte numérique élevée au RGESN (équivalent ≈ 74 km
en voiture par session)
Aucune narration —
pas de storytelling, pas d'atouts mis en avant dans le tunnel
Tunnel en 7 étapes — trouver un bien immobilier imposait de traverser 7 écrans
successifs, un parcours long et fastidieux qui décourageait
l'exploration avant même la découverte
Ce que voulaitle commanditaire
Une étude réalisée par une société externe (Onepoint) a
posé trois scénarios :
- (1) améliorer à minima,
- (2) repositionner sur un angle marketing
territorial autonome,
- (2bis) repositionner sur le marketing territorial en partenariat avec France Foncier+ (portail
recensant l’offre de foncier économique disponible sur
le territoire) pour le socle cartographique.
C'est le scénario 2bis qui a été retenu.
Basculer l'expérience d'un outil utilitaire vers un site
marketing du territoire, où l'Île-de-France est valorisée
comme 2e territoire industriel européen.
Les trois lignes de tension
Politique
Faire valider chaque décision à travers la Région IDF, la
Comm IDF et les partenaires (Medicen, Choose Paris Region,
Institut Paris Region) aux intérêts parfois divergents.
Marketing
Basculer d'une logique transactionnelle (« remplis pour mériter de voir ») vers un tunnel de conversion : impression → désir →
contact.
Technique
Préserver la carte interactive et ses filtres (cœur de la
valeur métier) tout en les intégrant dans un parcours plus
narratif et plus fluide.
Note honnête
Les personas et le user journey ci-dessous sont une
reconstitution a posteriori. Sur le projet, les
entretiens utilisateurs ont été conduits par par une société
externe (Onepoint)en amont (8 entretiens avec des
entrepreneurs et acteurs cibles, restitués dans le rapport de
mars 2025). J'ai exploité ces matériaux pour formaliser
les personas — je n'ai pas conduit d'entretiens en propre.
Persona principal
Dirigeant·e de startup/PME industrielle
(10-50 personnes)
Contexte
Startup ou PME industrielle sur une filière stratégique
francilienne (énergie, mobilité, aérospatial, biotech).
Cherche un local de 800-1 500 m² mixte
industriel + bureaux, en location.
Mission
Trouver un site combinant accessibilité transport,
conformité ICPE, modularité et budget contraint — en
quelques semaines.
Frustration
« Trouver un bâtiment industriel adapté avec des
servitudes techniques spécifiques et proche du RER
reste un vrai défi pour une start-up avec des
contraintes de budget. »
Besoin clé
Visibilité claire sur le rôle d'accompagnement de la
Région IDF et fiches avec les bons critères techniques
(ICPE, hauteur sous plafond, modularité, transport).
Persona secondaire
Responsable développement
d'une entreprise plus établie (100-200 personnes)
Contexte
Entreprise établie (secteur retail/luxe ou services
premium). Délègue souvent la recherche à un broker, mais
doit pouvoir cadrer le brief en amont avec des données
objectives. Inspiré du profil Boutique de Luxe interrogé
lors du cadrage.
Frustration
« Pour nous, l'adresse fait tout : un showroom
doit être prestigieux, bien placé, et attirer des
clients internationaux. Mais le coût des études de
flux piétons est un vrai frein. »
Besoin clé
Un support neutre et institutionnel donnant accès à des
indicateurs contextualisés (flux, accessibilité, densité
commerciale) sans études payantes à 5-10 k€
l'adresse.
Critères qui pèsent dans la décision
Le cadrage distingue critères « hard » (obligatoires) et
critères « soft » (facultatifs). Cette hiérarchisation
guide le design de la fiche bien. Quelles sont les données en premier
niveau, lesquelles le sont moins.
Critères « hard » (obligatoires)
Critères « soft » (facultatifs)
Prix du loyer et charges · Accessibilité transport
(RER/métro) · Capacité technique (hauteur, ICPE) ·
Modularité · Proximité bassins de vie · Souplesse
contractuelle (baux précaires)
Équipements locaux · Environnement urbain · Proximité
cluster sectoriel · Visibilité de la zone · Restauration
et services (crèches, commerces)
Questions d'entretien hypothétiques
Si on avait pu interroger une dizaine de décideurs en
amont :
Quand vous évaluez un territoire d'implantation, qu'est-ce
qui pèse vraiment dans votre décision finale ?
À quel moment dans votre processus consultez-vous des sites
institutionnels ? Avant la décision, pendant,
après ?
Qu'est-ce qui vous donne confiance dans une plateforme
institutionnelle ? Qu'est-ce qui vous fait
douter ?
Si vous deviez convaincre votre board en 3 arguments que
l'Île-de-France est le bon choix, lesquels ?
Au moment où vous voyez un bien qui vous intéresse, que
voulez-vous faire dans la minute suivante ?
Quel format de prise de contact préférez-vous :
formulaire, mail direct, téléphone, RDV en ligne ?
User journey simplifié
01Arrivée
→ Karim arrive depuis un lien partenaire ou une
recherche LinkedIn
02Storytelling
→ Zoom monde → IDF — « L'Île-de-France, terre d'industrie et
d'innovation »
03Secteur
→ Choisit son secteur d'activité parmi 12 options en
grille
04Exploration
→ Affichage des biens en mode cards
05Approfondit
→ Affichage des biens su la carte. Clique sur un bien.
Affichage panel latéral avec les infos.
06Rassurance
→ Voit la section « Des experts qui vous accompagnent » — CTA vers le formulaire
07Contact
→ Formulaire avec visages réels des experts Région IDF —
rassurance et mise en relation en un seul écran
Le périmètre fonctionnel et la stratégie produit ont été cadrés
en amont par Onepoint (scénario 2bis retenu). Mon rôle commence quand ce périmètre doit devenir interface — du choix des composants à l'intégration Angular/Tailwind, sans
rupture entre design et code, et avec un rôle de facilitateur entre
le commanditaire et l'équipe technique sur un projet à acteurs multiples.
Un Design System imposé
Le DS Smart Services / IDF était non-négociable :
composants, couleurs et typographie définis par la Région.
Loin d'être une contrainte pure, il a structuré chaque choix
UI et garanti la cohérence avec l'écosystème applicatif
francilien — sans avoir à rouvrir le débat sur chaque détail
visuel.
Itérations rapides avec UX Pilot, affinement dans Figma
Sur les sections complexes (carte + filtres, fiche bien), UX
Pilot permettait de générer 2-3 directions en quelques
minutes. Le commanditaire tranchait sur du concret plutôt que
sur une description orale. Chaque direction validée était
ensuite retravaillée dans Figma — avec création des nouveaux
composants quand nécessaires — pour le design définitif, plus
abouti et pixel-perfect.
Du design a l'intégration grace au MCP figma et à Claude Code
UX PilotWireframes, pré-design rapide & parcours utilisateur
FigmaDS imposé, V3 itérée en boucles
MCP FigmaGénération de la base code
Angular + TailwindIntégration autonome
Pourquoiça change tout
Skip des maquettes sur la partie motion — pour
le storytelling GSAP, l'IA + MCP Figma ont permis des prototypes
manipulables en quelques jours, là où l'approche classique aurait
pris 2-3 semaines.
Pré-design avec UX Pilot — sur les sections
complexes (carte + filtres, fiche bien), 2-3 directions générées
rapidement permettaient au commanditaire de trancher visuellement
plutôt que sur une description orale.
Pas de pixel-perfect handoff — je code la base
directement à partir des frames Figma, le DS reste cohérent
par construction.
Intégrer RGAA(Référentiel général d’amélioration de
l’accessibilité) et RGESN (Référentiel général
d'écoconception de services numériques) dès la phase
design — le rapport d'audit pointait 13 critères RGAA à corriger
et une empreinte numérique trop lourde. En cumulant design +
intégration, j'ai pu prendre en compte contrastes, hiérarchie
de titres, navigation clavier, lazy-loading — pas comme un patch
après coup, mais comme des contraintes intégrées dès la conception.
Rôle de facilitateur — sur ce projet à acteurs
multiples, pouvoir dire « je vous montre dans 72h une version cliquable » a désamorcé les débats et redirigé les retours vers le fond
marketing.
Conséquence directe
Très peu de retours négatifs malgré la pluralité
d'acteurs aux intérêts divergents.
Sur un projet institutionnel avec Région + Comm + partenaires,
c'est loin d'être évident. Les itérations courtes ont permis aux
décisions de se prendre vite, sans bloquer sur des arbitrages
politiques.
Trois décisions qui ne sont pas des évidences et posaient un
dilemme réel. Voici comment j'ai tranché, et ce que ça a changé
concrètement.
5.1 — Faire perdre moins de 1 minute au visiteur pour gagner
son attention
La tension
Faire patienter moins de 1 minute à l'arrivée sur le site
va à l'encontre des règles UX habituelles.
Mais sans accroche visuelle, le site reste un outil que
l'on traverse et que l'on quitte rapidement.
Or la cible inclut des
investisseurs étrangers pour qui l'IDF n'est
pas encore une évidence
« foncier trop cher, écosystème industriel peu
visible ».
Le pari
Assumer le délai d'entrée, mais le transformer en
valeur ajoutée. Le storytelling animé ave la
librairieGSAP zoome monde → Europe → France → IDF en moins
de 1 minute.
À la fin de l'animation, le visiteur est déjà
dans la carte — pas devant un configurateur interminable comme
sur l'ancienne verion. Ces étapes de scroll rapide deviennent
l'investissement qui bascule l'impression de « site outil »
vers « site marketing ».
On laisse malgré tout la possibilité à l'utilisateur de
passer l'animation.
La conséquence
C'est aussi la section où l'ensemble IA + MCP Figma a le
plus été utile.
Validation visuelle accéléréée avec la Comm IDF plutôt que
des semaines de débats sur des maquettes statiques.
Le storytelling est devenu un argument de validation
politique autant qu'un choix UX.
5.2 — Garder la carte sous les yeux, du premier au dernier
clic
La tension
Sur l'ancien site, deux philosophies cohabitent et sont en
conflits : un système de filtres en amont
(5 étapes avant de voir les biens), et un moteur de
recherche qui nous sort de la carte dès que l'on clique
sur une annonce.
Où placer le curseur ?
Le pari
Un compromis en deux temps: choix du secteur d'activité
(grille de 12 cards), puis arrivée directe sur la carte
avec tous les biens du secteur.
Les filtres restent latéraux et optionnels.
Et surtout : la fiche bien ne sort jamais du contexte. Elle s'ouvre en panel à l'intérieur de l'interface map
+ filtres.
La conséquence
La carte cesse d'être un écran terminal pour devenir le
centre de gravité de l'expérience.
La logique passe de
« remplissez ces formulaires pour mériter de voir les
biens »
à « voici les biens, dites-nous comment nous pouvons vous
aider à choisir ».
5.3 — Prendre parti pour l'humain dans un contexte
institutionnel
La tension
Un site de la Région IDF est par nature institutionnel —
neutralité, services, formulaires, footer générique. Y
faire apparaître des visages de l'équipe avec prénoms et
fonctions, c'est rompre avec un certain conformisme.
Et donc risquer un retour client du type
« trop personnel, pas assez officiel ».
D'autant que les entretiens pointent un besoin
clair :
« mieux valoriser le rôle de la Région dans la
mise en relation avec les territoires et son dispositif
d'accompagnement aux entreprises ».
Le pari
Intégrer les visages réels de l'équipe Région IDF —
prénoms, fonctions, photos — directement dans le
formulaire de contact.
Pas une section à part : la prise de contact
est le moment humain.
La conséquence
La prise de contact devient l'aboutissement naturel du
parcours, et non une décisions contrainte en fin de
parcours.
Le retour client a été positif, montrant qu'un site
institutionnel ne veut pas dire impersonnel, et que la
confiance se gagne aussi par les visages.
Résultats factuels
MVP intégré
Maquette V3 montée, livraison imminente
Validation multi-acteurs
Région, Comm IDF, Institut Paris Region, Medicen, Choose
Paris Region
Motion validé en jours
Storytelling GSAP validé par la Comm IDF en quelques jours
via IA/MCP
Frictions UX traitées
2 entrées → 1 narration, fiche bien dans le contexte,
parcours marketing reconstitué
Peu de retours négatifs
Niveau de satisfaction élevé dès les premières itérations
sur un projet institutionnel complexe
Dette accessibilité réduite
Refonte conçue dès le départ pour adresser les
13 critères RGAA non-conformes et alléger l'empreinte
RGESN de l'ancien site
DS préservé
Refonte intégrée dans l'écosystème graphique Smart
Services IDF sans rupture
Trois enseignements
01 — Une maquette cliquable vaut mieux qu'un slide. Présenter une version interactive à des étapes préliminaires
du projet court-circuite les arbitrages politiques. Les acteurs
ne discutent plus de principes abstraits, ils réagissent à du
concret.
02 — La carte n'est pas un écran, c'est l'interface
principale. Penser un outil cartographique comme un environnement qui contient tout (filtres latéraux, fiches en panel, accompagnement
humain), et pas comme un écran de résultats, change la nature
de toutes les décisions UX en aval.
03 — Un cadrage solide en amont libère le design. Le rapport de la société Onepoint avait fait le travail dur :
8 entretiens, benchmark concurrentiel, audits RGAA et RGESN,
arbitrage entre 3 scénarios stratégiques. Quand le périmètre
arrive verrouillé, le design peut se concentrer sur sa vraie valeur
ajoutée : traduire en interface, pas redébattre du quoi.
Ce que je feraidifféremment
Conduire 2-3 entretiens utilisateurs en propreMême si le cadrage Onepoint avait fait le gros du
travail, mes propres entretiens m'auraient permis de
tester les hypothèses de design directement — et pas
seulement la stratégie produit.
Préparer plus tôt la stratégie mobileLe parcours est pensé desktop d'abord. Le storytelling
GSAP est plus impressionnant en grand. Sur mobile, il
faudra arbitrer entre version réduite et accès direct à
la carte.
Intégrer le deep-linking dès le départFiltres dans l'URL, retour navigateur sain, indexation
SEO longue traîne — c'est un chantier dev front qui
aurait dû être cadré en amont. Prévu pour la V2.
Documenter les libertés prises sur le DSQuelques écarts par rapport au DS Smart Services pour
le ton marketing. Les documenter en amont aurait
facilité la conversation avec les équipes qui
maintiennent le DS.
SCE Web
Plateforme web cartographique collaborative — un jumeau
numérique de territoire qui sert deux publics opposés : les
préparateurs experts de Siradel et les consommateurs finaux
(collectivités, industriels).
Trois ans à porter la cohérence UI/UX, construire un design system
adaptatif et préparer ses fondations pour son ouverture open source.
01
Le projeten bref
Élément
Détail
Produit
SCE Web (Smart City Explorer) — plateforme web
cartographique collaborative pour jumeau numérique de
territoire
Hérité (pseudo-DS Figma + Bootstrap) en 2022 → DS
tokenisé et autonome en 2026
Périmètre
Refonte progressive du DS sur 3 ans + design des
évolutions produit en continu + préparation des fondations
open source
Différenciateurs
Moteur 3D propriétaire Horizon · narration sur carte ·
import multi-formats · déploiement SaaS ou on-premise
Un positionnement entre expert et grand public, sur un marché
tenu par des acteurs bien établis.
SCE évolue sur un marché dominé par ArcGIS (Esri, leader
expert), Felt et Carto (entrants grand public, collaboration
native), Mapbox Studio (puissance technique pour développeurs).
SCE assume un positionnement entre ces deux mondes : apporter la puissance cartographique (jumeau numérique
3D, dashboards analytiques, narration territoriale) avec une
accessibilité pour des non-experts SIG.
La vocation : rendre la donnée territoriale utilisable par
le plus grand nombre.
Trois lignes directrices qui ont structuré 3 ans de travail
Produit — double cible
Le PO vise un outil « simple à utiliser » pour des
opérationnels métier. Le Directeur Technique vise une
plateforme assez puissante pour une communauté de
techniciens (et demain des contributeurs OSS).
Deux publics structurellement opposés, une seule UI.
Technique — dette
Le DS hérité repose sur Bootstrap + Angular + un
pseudo-système Figma.
Trois ans pour le faire évoluer sans casser ce qui
fonctionne, tout en intégrant les évolutions commandées par
le PO en parallèle.
Business — la phase
En 2026, la nouvelle direction veut mieux promouvoir le
produit. Cela passe par la mise en open source d'une partie
de SCE et de son écosystème.
Les fondations UI/UX doivent être assez solides pour porter
cette évolution.
Note honnête
Les personas et le user journey ci-dessous sont partiellement
une
reconstitution a posteriori à partir des retours du
PO et du Directeur Technique. Sur SCE, l'organisation produit n'a
pas inclus d'entretiens utilisateurs systématiques — les besoins
remontent par le PO, les préparateurs, les démos commerciales et
les retours d'appels d'offres.
Persona préparateur
Anne-Claire,
data engineer / SIGiste, équipe Siradel
Contexte
Équipe interne Siradel, en charge de préparer les jeux
de données et contenus cartographiques pour les clients
finaux.
Mission
Agréger des données hétérogènes (cadastre, IGN, BRGM,
flux clients), styliser les cartes, monter dashboards et
narration.
Frustration
« Quand je monte un dashboard, je veux intégrer
certains indicateurs et en masquer d'autres dans mes
légendes. Aujourd'hui c'est contraignant : je
finis par tout afficher pour m'épargner de multiples
conditions. »
Besoin clé
Traiter une grosse densité d'information, accès rapide
aux outils avancés et spécificités SIG natives.
Persona consommateur
Marc,
chargé de communication, territoire Île-de-France
Contexte
Reçoit les contenus préparés par Siradel et veut les
consulter, partager, intégrer dans ses propres supports.
Frustration
« J'ai peu de temps. Il faut un minimum de clics pour
partager et présenter mes cartes. »
Besoin clé
Lisibilité, simplicité, partage immédiat.
User journey simplifié — Préparateur (Siradel)
01Connecter
→ Données client
02Éditer
→ Stylisation des cartes
03Créer
→ Dashboards + 3D Horizon
04Raconter
→ Narration territoire
05Publier
→ Instance dédiée client
User journey simplifié — Consommateur (client final)
01Accès
→ Lien partagé par Siradel
02Explorer
→ Cartes, dashboards préparés
03Naviguer
→ 2D / 3D / narration
04Partager
→ URL, embed, QR code
05Agir
→ Décision interne / publication
C'est le cœur de mon apport sur SCE. Mon profil hybride
UI/UX + Intégration Front-End assure la transition
design et code, et l'IA est venue, à partir de 2024, en redistribuer
les cartes.
Le workflow construit progressivement sur 3 ans
2022Figma (DS hérité)Handoff → dev Angular/Bootstrap, débords sur la cohérence
2026Claude → FigmaWorkflow inversé (MCP bi-directionnel) → base site OSS
(voir section 7)
Ce que ça a changé concrètement
Pas de pixel-perfect — je code la base directement à partir des frames Figma
Cleanup UI continu —
les développements « bruts » des devs back/front sont
repris en intégration pour rester cohérents. Le produit ne dérive
pas
Boucles courtes — PO
→ design → intégration : les évolutions urgentes (appels
d'offres) sortent dans les temps
L'IA absorbe le chronophage — tokens CSS, traitement de tickets Jira, audits DS via Figma
console + MCP
Étude de cas —la cassure Bootstrap, 2025
L'angle mort historique — Bootstrap, embarqué
depuis les débuts : messages de dépréciation au démarrage,
classes inutiles. Le retirer en 2022 était infaisable en parallèle
des évolutions à livrer.
En 2025, cassé en quelques semaines avec Claude
— l'IA a absorbé le travail mécanique : isoler les usages
réels, générer les équivalences CSS classe par classe, auditer
les dépendances, refactor par lot, sur une branche git séparée.
Résultat : 0 dépendance Bootstrap — console
de démarrage propre, DS plus élastique, les nouveaux composants
n'héritent plus de contraintes externes.
Conséquence directe
J'ai pu continuer à livrer les évolutions tout en refactorisant le CSS en parallèle, sans bloquer le produit ni l'équipe.
« Le rôle de Nicolas a été important afin de maintenir
l'UI et l'UX de SCE Web au fur et à mesure des évolutions. La
mise en place d'un design system plus robuste suite au départ
du designer qu'il a remplacé a permis de renforcer la
cohérence visuelle du produit, tout en facilitant
l'intégration des fonctionnalités et la collaboration avec les
équipes de développement. »
Anthony — Directeur Technique & Innovation, Siradel
trois décisions qui ont permis de gagner en souplesse côté
préparateur de carte comme côté utilisateur final.
5.1 — Deux affichages comme réponse à la double cible
Vue paramétrage
Vue publique — Story Telling
Le problème
SCE doit servir dans une seule interface web un
préparateur expert (équipe Siradel ou client power-user,
sessions longues, multi-écrans) et un consommateur final
(élu, chargé de communication, parfois sur tablette en
conseil municipal).
La concurrence sépare en deux applications distinctes
(ArcGIS Pro vs ArcGIS Online).
SCE tient les deux dans une seule. Plus efficace côté
équipe, mais nettement plus dur à designer.
La solution
Deux modes assumés dans la même UI : édition haute densité
pour le préparateur, publication épurée pour le
consommateur.
Côté publication, conception avec le product owner de 4
presets visuels — choisis en un clic :
Simple map
Map configuration
Story Telling
Custom menu
Le préparateur n'a pas à reconstruire l'affichage à chaque
fois.
Le bénéfice
Le consommateur reçoit une vue claire, sans héritage de
l'UI admin.
Le préparateur arrête de sortir du produit pour assembler
ce que le produit a lui-même produit.
Et l'UI admin devient utilisable par certains clients
avancés — ce qui n'était pas viable avant la refonte du
DS.
5.2 — La légende interactive native
Vue édition
Vue consommateur
Le problème
Pour inclure la légende d'une carte dans un dashboard, il
fallait créer des conditions d'affichage manuelles — un
travail contraignant qui poussait à tout afficher pour
s'épargner la complexité.
Sur un produit qui se veut accessible, c'est un signal
frustrant que les briques sont encore trop complexes entre
elles.
La solution
Un composant légende natif qui se branche directement — on
choisit ce que l'on veut afficher, avec une UI propre des
deux côtés : édition et publication.
Le bénéfice
Le consommateur reçoit une vue claire, sans héritage
visuel de l'UI admin. Le préparateur arrête de sortir du
produit pour assembler ce que le produit a lui-même
produit.
L'UI admin devient utilisable par certains clients avancés
(chargement de fichiers, création de dashboards) — ce qui
n'était pas viable avant la refonte du DS.
5.3 — Les axes de Navigation, pivot du dialogue carte ↔
widgets
Le problème
Dans la plupart des produits cartographiques, la carte et
les widgets statistiques (camemberts, histogrammes, KPIs)
cohabitent sans se parler.
Filtrer la carte ne filtre pas les widgets, et
inversement. ArcGIS Dashboards, Carto, Tableau — tous ont
ce point dur.
La solution
Les axes de Navigation — une barre de filtres
unifiée qui pilote simultanément la carte et tous les widgets
du dashboard. Click → mise à jour live partout, en même temps.
Conçus comme composants du DS, ils
s'adaptent au contexte (sélecteur d'attributs, date
picker, multi-valeur).
Le bénéfice
Le préparateur arrête de paramétrer 30 filtres dans
30 widgets — un axe pilote tout. Le consommateur
explore en cliquant, sans rien apprendre.
Et c'est un argument concret en démo ou appel
d'offres : « voici l'impact projeté du projet sur le quartier,
filtré par usage ». SCE devient un système où les composants se parlent.
« Nicolas m'a permis de traduire rapidement ma vision
produit en visuels et parcours utilisateur. Je matérialise une
idée rapide sur Figma et Nicolas la reprend pour l'enrichir et
la mettre au propre. Sa réactivité nous a permis de sortir des
évolutions nécessaires à certains appels d'offres dans les
temps. Pouvoir intégrer ses designs dans la solution a aussi
permis de cleaner l'UI des développements bruts. »
Antoine — Product Owner SCE Web, Siradel
Résultats factuels
DS reconstruit sur 3 ans
Pseudo-DS hérité → DS tokenisé, autonome, sans dépendance
framework
0 dépendance Bootstrap
Depuis 2025 — console propre, classes CSS custom, DS
élastique
Évolutions dans les temps
Validé par le PO comme canal d'impact business direct
(appels d'offres)
Cohérence préservée
L'UI n'a pas dérivé malgré ~35 évolutions livrées sur la
durée
Collaboration fluide
Pas de relais design/intégration, cleanup UI continu des
développements bruts
Fondations prêtes pour l'open source
DS OSS reconstruit en 2026 avec workflow inversé Claude →
Figma
Trois enseignements
01 — Sur un produit niche, le designer fait de la
supervision et de l'orchestration. Le travail consiste à empêcher la dérive, à maintenir la qualité
au fil des évolutions. C'est rarement visible, mais c'est ce qui
rend possible la phase commerciale suivante.
02 — Le profil hybride se justifie sur les produits où on
ne veut pas multiplier les relais. L'équipe est compacte (5 personnes). Le profil hybride
compresse design → handoff → intégration et permet à un PO de
transformer une idée en évolution shippée dans le mois — quand
l'appel d'offres l'exige.
03 — L'IA ne remplace pas, elle reconfigure ce qu'on
fait. En 2022, j'aurais traîné Bootstrap deux ans de plus. En 2025,
je l'ai cassé parce que l'IA absorbait la partie mécanique. En
2026, je ne dessine plus mon DS : je le prompt et je valide.
Le rôle se déplace vers l'édition des prompts, l'arbitrage qualité
et le maintien du système.
Ce que je feraisdifféremment
Plus de retours utilisateurs et prospects en propreJ'ai échangé plusieurs fois avec les préparateurs. Le
retour PO est précieux mais ne remplace pas un échange
direct avec les utilisateurs.
Documenter en continu les écarts au DS héritéPlutôt que de les corriger en silence. Une trace écrite
aurait facilité les arbitrages et la conversation avec
le Directeur Technique.
Pousser plus tôt l'audit Figma console + MCPIl est en cours en 2026 ; il aurait pu démarrer
dès 2024, à la disponibilité des outils.
Le rachat récent de Siradel apporte une dynamique
nouvelle : la direction souhaite investir sur SCE et mieux
le promouvoir. L'ouverture open source d'une partie de
l'écosystème est en construction — créer une communauté
technique autour du produit, et utiliser le SaaS commercial
comme modèle de monétisation des besoins avancés.
Création des sites open source de l’écosystème SCE avec un DS
automatisé par IA
Pour le DS de l’écosystème open source, Claude génère les
tokens et composants en autonomie, puis remplit Figma comme
rendu visuel.
Côté code, je lui fais faire quelques ajustements suite aux
retours développeur : rendre les composants plus
facilement éditables avec un système de slots. Cela permet
d’avoir une customisation plus poussée sans avoir à en recréer
de nouveaux.
L'importance des fichiers .md
Je crée un fichier claude.md pour lui faire éviter
les erreurs les plus courantes (valeurs hard-codées, application
des classes Tailwind avec @apply dans le CSS, structuration
des composants…) et je le fais compléter au fur et à mesure de
l’avancement.
Application de skills dédiés pour optimiser le code (avant
relecture par un développeur) et pour l’accessibilité WCAG
(avant tests par l’équipe assurance qualité).
Un fichier design.md capture les décisions visuelles :
tokens actifs, guidelines par composant, choix typographiques
et règles de spacing. Il sert de source de vérité pour que Claude
maintienne la cohérence Figma → code sans dériver au
fil des itérations.
Création design tokens
Création composants
Création design
Le bénéfice
Horizon en quelques jours — première brique intégrée (mai 2026), montée rapidement sur
la nouvelle base
Cohérence maintenue —
quand une nouvelle brique arrive, elle hérite du design system
sans rupture
Le rôle évolue — la barrière
entre code et design se réduit ; le designer existe toujours,
mais via les prompts, l'arbitrage qualité et le maintien du système
« Ce travail prendra encore plus de sens avec le passage
de SCE en open source, en livrant un produit avec des
fondations UI/UX déjà bien établies. »
Anthony — Directeur Technique & Innovation, Siradel
Contact
On reste
en contact ?
Vous avez un projet, une idée, une collaboration en tête ? Je suis
disponible pour en discuter et donner vie à vos ambitions. N'hésitez pas
à me contacter, je serai ravi d'échanger avec vous.
Persona principal
Persona secondaire
01Arrivée
02Exploration
03Recherche
04Découverte
05Approfondit
06Partage
Persona principal
Persona secondaire
01Arrivée
02Storytelling
03Secteur
04Exploration
05Approfondit
06Rassurance
07Contact
Persona préparateur
Persona consommateur
01Connecter
02Éditer
03Créer
04Raconter
05Publier
01Accès
02Explorer
03Naviguer
04Partager
05Agir
2022Figma (DS hérité)Handoff → dev Angular/Bootstrap, débords sur la cohérence
2024Figma (DS tokenisé)Intégration directe (moi) → Angular, cleanup UI continu
2025Figma + MCP + ClaudeCassure Bootstrap → Angular / SCSS custom, 0 framework CSS
2026Claude → FigmaWorkflow inversé (MCP bi-directionnel) → base site OSS
(voir section 7)
Vue paramétrageVue publique — Story TellingLe problème
Vue éditionVue consommateurLe problème
M'écrire