Hybrid UI/UX & front-end profile, I turn your product vision into high-performing interfaces, from graphic design through to technical integration.
NicolasCassard
Nicolas Cassard — UI/UX Designer & Front-end Developer
About
With 15 years of experience,I bridge the gap between design and development. By building scalable design systems, I speed up delivery cycles and improve the final product's quality.
Professional Experience
Professional
experience
Originally specialised in building e-commerce platforms at an agency, I grew my expertise toward a more cross-functional Product Design role.
My dual UI/UX and front-end skillset is the common thread of my career: it lets me design complex interfaces while guaranteeing their technical feasibility.
Today, as a Hybrid UI/UX Lead in the geo-digital sector, I handle the design of feature evolutions for a business mapping solution.
Beyond hands-on work, my hybrid profile puts me at the center of the collaboration between UI/UX and development. Day to day, I define the right methods and share them with the Design and Front-End teams to streamline production processes.
My areas
of expertise
Understand & solve
Analytical UX & Secondary research
Analysis of current data and feedback (clients, users) to identify pain points.
Using AI to generate and challenge user scenarios, build synthetic personas, and explore as many creative directions as possible.
Design
UI design & design system
Graphic design of the site’s various screens, based on the data gathered.
Mapping every component built into a design system.
Build
Front-end integration
Pixel-perfect interface integration. Translating design systems into design tokens and AI-assisted front-end implementation.
Design culture & soft skills
Empathy and active listening
Whether it's user needs or team constraints (PMs, developers), I focus on understanding everyone's stakes to find the most fitting solutions.
Selected Work
Selected
work
enermap
A mapping platform that helps local officials make informed energy decisions.
Smart Implantation
A marketing platform for the Île-de-France region focused on driving contact requests.
SCE WEB
A mapping data display solution for local authorities and territorial stakeholders.
Enermap
Design and ship a mapping platform that helps local officials make energy decisions in 4 months — from Figma to production code, with AI as a co-pilot.
01
The project in30 seconds
Item
Detail
Product
EnerMap — public web platform for energy decision support
Ahead of the municipal elections, towns are setting their energy roadmap for the next 6 years.
But between regulatory complexity (PCAET, SRADDET, SCoT, PLUi…), the diversity of energy sources, and climate pressure, local officials have no simple tool to make objective choices.
On the public side : 81 % of French people support installing renewable energy infrastructure near their homes, 68 % want to see it accelerate over the next 5 years (IFOP/ENGIE study, May 2025).
The brief's complexity came down to a triple requirement :
Technical — aggregate heterogeneous public data (IGN, BRGM, Cartofriches, RPG IGN, PVGIS, Natura2000, Enedis…) into readable indicators
Political — stay 100 % free, transparent, independent, with no commercial bias
Educational — give a non-specialist official the means to understand, compare, and decide
Honest note
The artefacts below (personas, journeys, interview questions) are an after-the-fact reconstruction to formalise the approach. On this project, the needs analysis was carried out iteratively between the client (ENGIE), SIRADEL, and the editorial agency Ekno. I did not personally conduct user interviews.
Primary persona
Hélène, 52,Deputy Mayor for Ecological Transition
Context
town of 12,000 residents. Took on the role 2 years ago, background in political science.
Mission
prepare the PCAET (local climate plan) and get an energy roadmap approved by the town council.
Frustration
“I have to make the case to the council and to residents, but I don't know where to start. The data is scattered, jargon-heavy, and every stakeholder pulls the conversation toward their own energy source.”
Key need
a neutral tool that tells me in 5 minutes what my town can do, with rough orders of magnitude.
Secondary persona
Marc, 38,ENGIE Regional Business Developer
Context
reaches out to towns about renewable energy projects (ground-mounted solar, heating networks).
Frustration
“When I arrive at the town hall, I often have to explain the context before I can even talk about the project. I lose 20 minutes just setting the scene.”
Key need
a neutral, shared resource I can lean on to open the conversation without sounding like a sales pitch.
Hypothetical interview questions
Had we been able to interview a dozen officials beforehand, here are the questions I would have asked :
How do you currently describe your area's energy challenges to residents ?
What sources of information do you use to prepare an energy transition case ? Which ones do you trust ?
If you had to explain your town's solar potential in 30 seconds at a council meeting, how would you do it ?
What's stopping you today from launching a concrete renewable energy project ?
Have you ever had to choose between two types of energy (e.g. : solar vs. biogas) ? How did you decide ?
Which concrete equivalence resonates most : “X GWh/year”, “consumption of Y residents”, “Z households powered” ?
Simplified user journey
01Arrival
→ Hélène searches “my town renewable energy” on Google, lands on EnerMap
02Exploration
→ Reads the “Understanding” page to grasp the role of local authorities
03Search
→ Types her town's name into the search bar
04Discovery
→ Overview : climate impact + potential by energy type
05Deep dive
→ Clicks “Solar potential” to see the map of eligible zones
06Sharing
→ Screenshot or URL sent to her team / to the CEO (DGS)
This is the core of what I brought to this project, and the reason we hit the deadline. I was able to bridge design and code myself, integrating designs and components directly from the Figma frames, with AI as a co-pilot.
FigmaUI design / Iterations
MCP FigmaCode generation
Angular + TailwindBase built independently
Handoffto back/front devs for data binding
short loops (iterations)
Whythis changes everything
No “pixel-perfect design” to hand off : I code the foundation directly from the frames, so the design system stays consistent by construction.
Shorter design-dev loops : client feedback turns into design AND code changes on the same day. Several iterations in a few hours rather than one per sprint.
The back-end team gains focus : while I build the UI, the back-end/data devs concentrate on what truly needs their expertise (data processing, APIs, performance).
AI absorbs the time-consuming work : generating CSS tokens, atomic components, a first pass at HTML structure — everything that used to be “mechanical” integration time.
Direct impact on the project
The site could be shown at the Salon des Maires while still in development. Officials walked around with an iPad to show it to their peers — which accelerated institutional buzz and led to a presentation at ENGIE's COMEX (executive committee).
I picked three decisions that feel most representative of the UX work, each with a measurable effect on usage.
5.1 — Editorial → tool architecture
The problem
A raw mapping tool loses a non-specialist official in 30 seconds. Conversely, an editorial site with no tool gives no way to take action.
The decision
Structure the journey into two successive stages, embodied by the home page's 4 entry points :
Understand
Identify
Act
Fund
Editorial pages — education on the role of local authorities
Town search + detailed profile
Editorial pages — steps of a project
Editorial pages — funding levers
Whyit works
The untrained official is reassured first by the editorial content, while the seasoned official goes straight to the search bar. Both profiles are served without fragmenting the interface.
5.2 — Search bar in the hero, no menu
The problem
A visitor arriving on EnerMap has a town name in mind, not a navigation intent.
The decision
Place the search bar at the center of the hero, as the first interactive element. No dropdown menu, no mega menu. A smart autocomplete (city / EPCI / postcode) that resolves ambiguity on the fly.
Whyit works
Less than 2 seconds between arrival and the first useful piece of data. The “Resources” menu in the top right stays discreet for those looking for editorial pages.
5.3 — Semantic color coding on the town profile
The problem
A town's profile shows around twenty indicators (population, climate, potential by energy type, surfaces…). Without visual hierarchy, the official disengages.
The decision
A color code by information family, defined once in the design system and applied consistently everywhere :
Green / turquoise — contextual data (population, area, land available)
An official can scan the page without reading the labels. The brain identifies “families” first, then detail. And it stays consistent between the overview and the detail views (solar potential, wind, etc.).
Hard results
MVP delivered on time
Oct 2025 → Jan 2026, ≈ 4 months
Nationwide coverage
Every municipality from launch
Salon des Maires demos
Officials navigating on iPad, site still in development
ENGIE COMEX presentation
Project escalated to the highest level of management
Press coverage
Comms campaign ≈ €150 k, equivalent to the production budget
MVP stance owned openly
“First version” banner publicly stated on the live site
Three lessons
01 — On this project, removing the boundary between design and integration was an accelerator. It became possible to eliminate an entire cycle of dev loops. Client changes went from mockup to code the same day (or within a few days for more complex feedback).
02 — AI and MCP change the nature of design tasks, not their value. What becomes automatable (tokens, atomic components, base CSS) frees up time for what isn't : understanding the user, arbitrating an information hierarchy, defending a data-viz choice.
03 — The design system industrialises design patterns but doesn't replace human decisions. Semantic color coding, numeric equivalences (“164 GWh/year = the consumption of 71,930 residents”), warming stripes — every visual convention is first an editorial decision. The design system makes it consistent at scale.
What I would dodifferently
Test with real officials earlyeven 3-4 interviews would have solidified assumptions about labels and units.
A/B test the home pagecurrent version (bare search bar) vs. a variant with mini-onboarding directing newcomers to the “Understanding” page.
Plan for mobile earlierthe site was mainly designed for desktop/tablet. Usable on mobile, but not yet optimal.
Smart Implantation
A real-estate platform for businesses across the Île-de-France region. Goal: evolve Smart Implantation into a territorial marketing site while preserving its core features.
Before
After
01
The projectin brief
Item
Detail
Product
Smart Implantation — a platform promoting the Île-de-France region to businesses looking to set up there
Client
Île-de-France Region (Île-de-France Smart Services) · L’Institut Paris Region · Medicen · Choose Paris Region
Target audience
Startups and industrial SMEs (10-200 people) looking to set up or relocate in the Île-de-France region, in strategic sectors (health, aerospace, renewable energy, sustainable mobility, agri-food…)
My role
UI/UX Designer + Front-End Integration
Team
5 people: project manager, Head of Design (advisory), front-end dev (map data binding), ops (deployment), me
Smart Implantation has been live since 2021. Four years after launch, the client's assessment is clear : the service has not met its performance and adoption targets. Every company interviewed during scoping confirms it — the platform is little known, little used, and seen as ill-suited to the needs of the industrial sector. On the UX side, friction points piled up :
What was there
2 competing entry points — "I'm looking for a property" vs "I'm looking for a territory" split intent from the very first second
Overloaded filters — 5 dropdowns in a row plus a "more criteria" button opening 6 additional themes on a separate screen
Full-screen break — clicking a listing wipes out the map, filters and list — the visitor loses their whole exploration
Quality debt — 13 non-compliant RGAA (French accessibility standard) criteria (contrast, ARIA, keyboard navigation…) and a heavy digital footprint under RGESN (French eco-design standard) (equivalent to ≈ 74 km driven per session)
No narrative — no storytelling, no strengths highlighted in the funnel
7-step funnel — finding a property meant going through 7 successive screens, a long, tedious journey that discouraged exploration before discovery even began
What the clientwanted
A study carried out by an external agency (Onepoint) laid out three scenarios :
- (1) improve at the margins,
- (2) reposition around a standalone territorial marketing angle,
- (2bis) reposition around territorial marketing in partnership with France Foncier+ (a portal listing available economic land across the region) for the mapping foundation.
Scenario 2bis is the one that was selected.
Shift the experience from a utility tool to a territorial marketing site, where Île-de-France is showcased as Europe's 2nd-largest industrial region.
Three lines of tension
Political
Getting every decision validated across the Île-de-France Region, its communications team, and partners (Medicen, Choose Paris Region, Institut Paris Region), whose interests sometimes diverge.
Marketing
Shifting from a transactional logic ("fill this in to earn the right to see") toward a conversion funnel : impression → desire → contact.
Technical
Preserving the interactive map and its filters (the core business value) while weaving them into a more narrative, more fluid journey.
Honest note
The personas and user journey below are an after-the-fact reconstruction. On this project, user interviews were conducted upstream by an external agency (Onepoint) (8 interviews with entrepreneurs and target stakeholders, reported in the March 2025 report). I used these materials to formalize the personas — I did not conduct interviews myself.
Primary persona
Startup/industrial SME leader (10-50 people)
Context
Startup or industrial SME in a strategic Île-de-France sector (energy, mobility, aerospace, biotech). Looking for an 800-1,500 m² mixed industrial + office space, for lease.
Mission
Find a site combining transport access, ICPE compliance (French classified-facility regulation), modularity and a tight budget — within a few weeks.
Frustration
"Finding an industrial building with specific technical easements, close to the RER, is a real challenge for a startup with budget constraints."
Key need
Clear visibility into the support role played by the Île-de-France Region, and listings with the right technical criteria (ICPE, ceiling height, modularity, transport).
Secondary persona
Head of development at a more established company (100-200 people)
Context
Established company (retail/luxury or premium services sector). Often delegates the search to a broker, but needs to be able to frame the brief upstream with objective data. Inspired by the Luxury Boutique profile interviewed during scoping.
Frustration
"For us, the address is everything: a showroom has to be prestigious, well located, and attract international customers. But the cost of foot-traffic studies is a real barrier."
Key need
A neutral, institutional resource giving access to contextualized indicators (foot traffic, accessibility, retail density) without paying €5-10k per address for studies.
Criteria that weigh on the decision
Scoping distinguishes between "hard" criteria (mandatory) and "soft" criteria (optional). This hierarchy guides the design of the listing sheet — which data belongs at the top level, and which matters less.
"Hard" criteria (mandatory)
"Soft" criteria (optional)
Rent and charges · Transport access (RER/metro) · Technical capacity (ceiling height, ICPE) · Modularity · Proximity to residential areas · Contractual flexibility (short-term leases)
Local amenities · Urban environment · Proximity to a sector cluster · Area visibility · Food and services (childcare, shops)
Hypothetical interview questions
Had we been able to interview a dozen decision-makers upstream :
When you assess a location to set up in, what really weighs on your final decision ?
At what point in your process do you consult institutional sites ? Before the decision, during, after ?
What builds your confidence in an institutional platform ? What makes you doubt it ?
If you had to convince your board in 3 arguments that Île-de-France is the right choice, which ones ?
The moment you see a property that interests you, what do you want to do in the next minute ?
What contact format do you prefer : form, direct email, phone, online appointment ?
Simplified user journey
01Arrival
→ The business leader arrives via a partner link or a LinkedIn search
02Storytelling
→ Zoom from the world → IDF — "Île-de-France, a land of industry and innovation"
03Sector
→ Picks their business sector from 12 options in a grid
04Exploration
→ Properties displayed as cards
05Digs deeper
→ Properties displayed on the map. Clicks a listing. Side panel opens with the details.
06Reassurance
→ Sees the "Experts who support you" section — CTA to the contact form
07Contact
→ Form with real faces of Île-de-France Region experts — reassurance and matchmaking on a single screen
The functional scope and product strategy were framed upstream by Onepoint (scenario 2bis was selected). My role starts where that scope has to become an interface — from component choices to Angular/Tailwind integration, with no gap between design and code, and acting as a facilitator between the client and the technical team on a project with many stakeholders.
A mandated Design System
The Smart Services / IDF DS was non-negotiable : components, colors and typography set by the Region. Far from being a pure constraint, it structured every UI choice and guaranteed consistency with the wider Île-de-France application ecosystem — without having to reopen the debate on every visual detail.
Fast iterations with UX Pilot, refined in Figma
On complex sections (map + filters, property sheet), UX Pilot made it possible to generate 2-3 directions within minutes. The client could decide based on something concrete rather than a verbal description. Each validated direction was then reworked in Figma — creating new components when needed — for the final, polished, pixel-perfect design.
From design to integration via the Figma MCP and Claude Code
UX PilotWireframes, fast pre-design & user flows
FigmaMandated DS, V3 iterated in loops
MCP FigmaCodebase generation
Angular + TailwindIndependent integration
Why itchanges everything
Skipping mockups for the motion piece — for the GSAP storytelling, AI + MCP Figma enabled clickable prototypes within days, where the classic approach would have taken 2-3 weeks.
Pre-design with UX Pilot — on complex sections (map + filters, property sheet), 2-3 quickly generated directions let the client decide visually rather than from a verbal description.
No pixel-perfect handoff — I code the base directly from the Figma frames, so the DS stays consistent by construction.
Building in RGAA (French accessibility framework) and RGESN (French digital eco-design framework) from the design phase — the audit report flagged 13 non-compliant RGAA criteria and an overly heavy digital footprint. By combining design and integration, I could account for contrast, heading hierarchy, keyboard navigation, and lazy-loading — not as a patch applied afterward, but as constraints built in from the start.
Facilitator role — on this project with many stakeholders, being able to say "I'll show you a clickable version in 72h" defused debates and redirected feedback toward the marketing substance.
Direct consequence
Very little negative feedback despite the plurality of stakeholders with diverging interests. On an institutional project involving the Region, its communications team, and partners, that's far from a given. Short iteration cycles let decisions get made quickly, without stalling on political arbitration.
Three decisions that were far from obvious and posed a real dilemma. Here's how I resolved them, and what changed as a result.
5.1 — Costing the visitor under 1 minute to win their attention
The tension
Making visitors wait less than 1 minute on arrival runs against usual UX rules.
But without a visual hook, the site remains a tool people pass through and leave quickly.
Yet the target audience includes foreign investors for whom Île-de-France is not yet an obvious choice — "land is too expensive, the industrial ecosystem isn't very visible."
The bet
Own the entry delay, but turn it into added value. The GSAP-animated storytelling zooms from the world → Europe → France → IDF in under 1 minute.
By the end of the animation, the visitor is already inside the map — not facing an endless configurator like on the old version. These fast scroll steps become the investment that shifts the perception from "utility tool" to "marketing site."
Users can still choose to skip the animation.
The consequence
This is also the section where the AI + MCP Figma combination was most useful.
Faster visual validation with the Region's communications team, rather than weeks of debate over static mockups.
The storytelling became as much a political-validation argument as a UX choice.
5.2 — Keeping the map in view, from the first click to the last
The tension
On the old site, two philosophies coexisted and clashed : an upfront filter system (5 steps before seeing any properties), and a search engine that took you out of the map the moment you clicked a listing.
Where to draw the line ?
The bet
A two-step compromise: choose a business sector (grid of 12 cards), then land directly on the map with all properties in that sector.
Filters remain in a side panel and optional.
And above all : the property sheet never leaves the context. It opens as a panel inside the map + filters interface.
The consequence
The map stops being a terminal screen and becomes the center of gravity of the experience.
The logic shifts from "fill in these forms to earn the right to see the properties" to "here are the properties, tell us how we can help you choose."
5.3 — Taking a stand for the human element in an institutional context
The tension
A Île-de-France Region site is institutional by nature — neutral, service-oriented, generic forms and footer. Showing team members' faces with first names and roles breaks with a certain conformism.
And so risks a client reaction like "too personal, not official enough." Especially since interviews point to a clear need : "better highlight the Region's role in connecting businesses with territories and its support scheme for companies."
The bet
Bring in the real faces of the Île-de-France Region team — first names, roles, photos — directly inside the contact form.
Not a separate section: the contact step is the human moment.
The consequence
The contact step becomes the natural conclusion of the journey, rather than a forced decision at the end of it.
Client feedback was positive, showing that an institutional site doesn't have to be impersonal, and that trust is also earned through faces.
Factual results
MVP integrated
V3 mockup assembled, launch imminent
Multi-stakeholder validation
Region, Region comms team, Institut Paris Region, Medicen, Choose Paris Region
Motion validated within days
GSAP storytelling validated by the Region's comms team within days via AI/MCP
High satisfaction from the very first iterations on a complex institutional project
Accessibility debt reduced
Redesign built from the outset to address the 13 non-compliant RGAA criteria and lighten the old site's RGESN footprint
DS preserved
Redesign integrated into the Smart Services IDF visual ecosystem with no break
Three takeaways
01 — A clickable mockup beats a slide. Presenting an interactive version at early project stages short-circuits political arbitration. Stakeholders stop debating abstract principles and start reacting to something concrete.
02 — The map isn't a screen, it's the main interface. Treating a mapping tool as an environment that holds everything (side filters, panel sheets, human support), rather than as a results screen, changes the nature of every downstream UX decision.
03 — Solid upstream scoping frees up design. Onepoint's report had done the hard work : 8 interviews, competitive benchmark, RGAA and RGESN audits, arbitration between 3 strategic scenarios. When the scope arrives locked down, design can focus on its real added value : translating into interface, not re-debating the what.
What I'd dodifferently
Conduct 2-3 user interviews myselfEven though Onepoint's scoping had done most of the heavy lifting, running my own interviews would have let me test design hypotheses directly — not just the product strategy.
Prepare the mobile strategy earlierThe journey is designed desktop-first. The GSAP storytelling is far more impressive on a large screen. On mobile, a call will be needed between a reduced version and direct access to the map.
Build in deep-linking from the startFilters in the URL, clean browser back button, long-tail SEO indexing — this is front-end dev work that should have been scoped upstream. Planned for V2.
Document the liberties taken with the DSA few deviations from the Smart Services DS for the sake of marketing tone. Documenting them upstream would have made conversations with the teams maintaining the DS easier.
SCE Web
A collaborative web mapping platform — a digital twin of territory serving two opposite audiences: Siradel’s expert map preparers and end consumers (local authorities, industrial clients). Three years spent driving UI/UX consistency, building an adaptive design system, and laying the foundations for its open-source release.
01
The projectin brief
Item
Detail
Product
SCE Web (Smart City Explorer) — collaborative web mapping platform for a territorial digital twin
Inherited (pseudo-DS in Figma + Bootstrap) in 2022 → tokenized, standalone DS in 2026
Scope
Progressive DS overhaul over 3 years + ongoing product evolution design + laying the groundwork for open source
Differentiators
Proprietary Horizon 3D engine · on-map storytelling · multi-format import · SaaS or on-premise deployment
A positioning between expert and general-public tools, in a market held by well-established players.
SCE operates in a market dominated by ArcGIS (Esri, the expert leader), Felt and Carto (general-public entrants with native collaboration), and Mapbox Studio (technical power for developers).
SCE takes a position between these two worlds: bringing mapping power (3D digital twin, analytical dashboards, territorial storytelling) with accessibility for non-GIS experts.
The mission: make territorial data usable by as many people as possible.
Three guiding lines that shaped 3 years of work
Product — double audience
The PO wants a tool that is “simple to use” for operational business users. The Technical Director wants a platform powerful enough for a community of technicians (and, eventually, OSS contributors).
Two structurally opposed audiences, one single UI.
Technical — debt
The inherited DS rests on Bootstrap + Angular + a pseudo Figma system.
Three years to evolve it without breaking what works, while integrating the evolutions requested by the PO in parallel.
Business — the phase
In 2026, the new leadership wants to better promote the product. That means open-sourcing part of SCE and its ecosystem.
The UI/UX foundations need to be solid enough to carry this shift.
An honest note
The personas and user journey below are partly apost-hoc reconstruction based on feedback from the PO and the Technical Director. On SCE, the product organization did not include systematic user interviews — needs surface through the PO, the preparers, sales demos, and tender feedback.
Preparer persona
Anne-Claire,data engineer / GIS specialist, Siradel team
Context
Internal Siradel team, responsible for preparing datasets and mapping content for end clients.
Mission
Aggregating heterogeneous data (land registry, IGN, BRGM, client feeds), styling maps, building dashboards and storytelling.
Frustration
“When I build a dashboard, I want to include certain indicators and hide others in my legends. Today it’s constraining—I end up showing everything just to avoid multiple conditions.”
Key need
Handling high information density, quick access to advanced tools and native GIS specifics.
Receives content prepared by Siradel and wants to view it, share it, and embed it in his own materials.
Frustration
“I have little time. Sharing and presenting my maps needs to take a minimum of clicks.”
Key need
Readability, simplicity, instant sharing.
Simplified user journey — Preparer (Siradel)
01Connect
→ Client data
02Edit
→ Map styling
03Create
→ Dashboards + 3D Horizon
04Narrate
→ Territorial storytelling
05Publish
→ Dedicated client instance
Simplified user journey — Consumer (end client)
01Access
→ Link shared by Siradel
02Explore
→ Prepared maps, dashboards
03Navigate
→ 2D / 3D / storytelling
04Share
→ URL, embed, QR code
05Act
→ Internal decision / publication
This is the core of what I bring to SCE. My hybridUI/UX + Front-End Integration profile bridges design and code, and AI has, since 2024, reshuffled the deck.
2026Claude → FigmaReversed workflow (bidirectional MCP) → OSS site foundation (see section 7)
What that changed in practice
No pixel-perfect handoff — I code the base directly from the Figma frames
Continuous UI cleanup — “raw” work from back/front devs gets picked up in integration to stay consistent. The product doesn’t drift
Short loops — PO → design → integration: urgent evolutions (tenders) ship on time
AI absorbs the time-consuming work — CSS tokens, Jira ticket processing, DS audits via Figma console + MCP
Case study —the Bootstrap break, 2025
The historical blind spot — Bootstrap, embedded since the early days: deprecation warnings on startup, unused classes. Removing it in 2022 was unfeasible alongside the evolutions to ship.
In 2025, broken in a few weeks with Claude — AI absorbed the mechanical work: isolating actual usages, generating CSS equivalences class by class, auditing dependencies, refactoring in batches, on a separate git branch.
Result: 0 Bootstrap dependency — clean startup console, a more elastic DS, new components no longer inherit external constraints.
Direct consequence
I was able to keep shipping evolutions while refactoring the CSS in parallel, without blocking the product or the team.
“Nicolas played an important role in maintaining SCE Web’s UI and UX as it evolved. Setting up a more robust design system after the departure of the designer he replaced strengthened the product’s visual consistency, while making it easier to integrate new features and to collaborate with the development teams.”
Anthony — Technical & Innovation Director, Siradel
three decisions that helped gain flexibility for both the map preparer and the end user.
5.1 — Two views as an answer to the double audience
Configuration view
Public view — Storytelling
The problem
SCE has to serve, within a single web interface, both an expert preparer (Siradel team or power-user client, long sessions, multiple screens) and an end consumer (elected official, communications officer, sometimes on a tablet during a council meeting).
Competitors split this into two separate applications (ArcGIS Pro vs ArcGIS Online).
SCE holds both in one. More efficient for the team, but noticeably harder to design.
The solution
Two modes embraced within the same UI: high-density editing for the preparer, streamlined publication for the consumer.
On the publication side, designed with the product owner around 4 visual presets — chosen in one click:
Simple map
Map configuration
Story Telling
Custom menu
The preparer doesn't have to rebuild the display every time.
The benefit
The consumer gets a clear view, with no inherited admin-UI baggage.
The preparer stops leaving the product to assemble what the product itself already produced.
And the admin UI becomes usable by some advanced clients — which wasn't viable before the DS overhaul.
5.2 — The native interactive legend
Edit view
Consumer view
The problem
Including a map's legend in a dashboard required manual display conditions — a cumbersome task that pushed people to show everything just to avoid the complexity.
On a product that aims to be accessible, that’s a frustrating signal that the building blocks are still too tightly coupled.
The solution
A native legend component that plugs in directly — you choose what to show, with a clean UI on both sides: editing and publication.
The benefit
The consumer gets a clear view, with no inherited visual baggage from the admin UI. The preparer stops leaving the product to assemble what the product itself already produced.
The admin UI becomes usable by some advanced clients (file uploads, dashboard creation) — which wasn't viable before the DS overhaul.
5.3 — Navigation axes, the pivot of the map ↔ widget dialogue
The problem
In most mapping products, the map and the statistical widgets (pie charts, histograms, KPIs) coexist without talking to each other.
Filtering the map doesn't filter the widgets, and vice versa. ArcGIS Dashboards, Carto, Tableau — they all share this pain point.
The solution
The Navigation axes— a unified filter bar that drives the map and every dashboard widget simultaneously. Click → live update everywhere, at the same time.
Designed as DS components, they adapt to context (attribute picker, date picker, multi-value).
The benefit
The preparer stops configuring 30 filters across 30 widgets — one axis drives everything. The consumer explores by clicking, with nothing to learn.
And it's a concrete argument in a demo or a tender: “here is the projected impact of the project on the district, filtered by usage”. SCE becomes a system where the components talk to each other.
“Nicolas allowed me to quickly translate my product vision into visuals and user journeys. I sketch an idea quickly in Figma and Nicolas picks it up to enrich it and polish it. His responsiveness let us ship the evolutions needed for certain tenders on time. Being able to integrate his designs into the solution also helped clean up the UI of raw development work.”
Antoine — Product Owner, SCE Web, Siradel
Factual results
DS rebuilt over 3 years
Inherited pseudo-DS → tokenized, standalone DS with no framework dependency
0 Bootstrap dependency
Since 2025 — clean console, custom CSS classes, elastic DS
Evolutions delivered on time
Validated by the PO as a direct business-impact channel (tenders)
Consistency preserved
The UI hasn’t drifted despite ~35 evolutions shipped over the period
Smooth collaboration
No design/integration handoff, continuous UI cleanup of raw development work
Foundations ready for open source
OSS DS rebuilt in 2026 with a reversed Claude → Figma workflow
Three lessons
01 — On a niche product, the designer acts as supervisor and orchestrator. The work consists of preventing drift, maintaining quality as evolutions pile up. It's rarely visible, but it's what makes the next commercial phase possible.
02 — The hybrid profile pays off on products where you don’t want to multiply handoffs. The team is compact (5 people). The hybrid profile compresses design → handoff → integration and lets a PO turn an idea into a shipped evolution within the month — when a tender demands it.
03 — AI doesn’t replace, it reshuffles what you do. In 2022, I would have dragged Bootstrap along for two more years. In 2025, I broke it because AI absorbed the mechanical part. In 2026, I no longer draw my DS: I prompt it and validate it. The role shifts toward prompt editing, quality arbitration and system upkeep.
What I would dodifferently
More direct feedback from users and prospectsI talked with the preparers several times. PO feedback is valuable but doesn't replace direct conversation with users.
Continuously document deviations from the inherited DSRather than fixing them silently. A written trail would have made arbitration and the conversation with the Technical Director easier.
Push the Figma console + MCP audit earlierIt is underway in 2026; it could have started as early as 2024, once the tools were available.
Siradel’s recent acquisition brings new momentum: leadership wants to invest in SCE and promote it better. Open-sourcing part of the ecosystem is underway — building a technical community around the product, and using the commercial SaaS as a monetization model for advanced needs.
Building the SCE ecosystem’s open-source sites with an AI-automated design system
For the open-source ecosystem’s DS, Claude autonomously generates the tokens and components, then populates Figma as the visual output.
On the code side, I have it make a few adjustments based on developer feedback: making components more easily editable with a slot system. This allows for deeper customization without having to recreate new ones.
The importance of .md files
I create a claude.md file to help it avoid the most common mistakes (hard-coded values, applying Tailwind classes with@apply in the CSS, component structuring…) and I keep it updated as the work progresses.
Dedicated skills applied to optimize the code (before developer review) and for WCAG accessibility (before QA testing).
A design.md file captures the visual decisions: active tokens, per-component guidelines, typographic choices and spacing rules. It acts as the source of truth so Claude keeps the Figma → code consistency without drifting across iterations.
Token creationComponent creationDesign creation
The benefit
Horizon in a few days — first building block integrated (May 2026), scaled up quickly on the new base
Consistency maintained — when a new building block arrives, it inherits the design system without a hitch
The role evolves — the wall between code and design shrinks; the designer still exists, but through prompts, quality arbitration and system upkeep
“This work will make even more sense once SCE goes open source, delivering a product with UI/UX foundations already firmly in place.”
Anthony — Technical & Innovation Director, Siradel
Contact
Let's stay
in touch?
Got a project, an idea, or a collaboration in mind? I'm available to talk it through and bring your ambitions to life. Don't hesitate to reach out, I'd be glad to chat.
Primary persona
Secondary persona
01Arrival
02Exploration
03Search
04Discovery
05Deep dive
06Sharing
Primary persona
Secondary persona
01Arrival
02Storytelling
03Sector
04Exploration
05Digs deeper
06Reassurance
07Contact
Preparer persona
Consumer persona
01Connect
02Edit
03Create
04Narrate
05Publish
01Access
02Explore
03Navigate
04Share
05Act
2022Figma (inherited DS)Handoff → Angular/Bootstrap dev, consistency drift
2024Figma (tokenized DS)Direct integration (me) → Angular, continuous UI cleanup
2025Figma + MCP + ClaudeBootstrap break → Angular / custom SCSS, 0 CSS framework
2026Claude → FigmaReversed workflow (bidirectional MCP) → OSS site foundation (see section 7)
Configuration viewPublic view — StorytellingThe problem
Edit viewConsumer viewThe problem
Email me