Villebon-sur-Yvette
Date
2025
Client
Ville de Villebon-sur-Yvette
Mon rôle
UI Design
Compétences
UI Design, Accessibilité web, Design System
Collaborateurs
Chef de projet & Développeur front-end
APERCU DU PROJET
Concevoir pour une ville d'Île-de-France en maîtrisant un design system existant
"Arriver dans une agence et livrer dès le premier projet, avec un design system qu'on découvre en même temps"
Villebon-sur-Yvette est une commune d’Île-de-France. C’est le premier projet sur lequel j’ai travaillé en arrivant chez Stratis, une agence de communication et web spécialisée dans le secteur public.
Ma mission était de concevoir l’interface du site en m’appuyant sur le design system de l’agence, en collaborant avec un chef de projet et un développeur front-end, et en respectant les contraintes d’accessibilité web propres aux sites publics.
PROBLEMATIQUE
S'intégrer dans un process et un outil qu'on ne connaît pas encore
Arriver dans une agence et se voir confier un projet dès les premiers jours, c’est une double contrainte. Il faut comprendre le process de l’agence, comment le brief circule, comment les maquettes sont validées, comment la recette se fait, tout en prenant en main un design system qu’on n’a jamais utilisé. Sur ce projet, les deux apprentissages se sont faits simultanément, dès le premier jour.
OBJECTIFS
Livrer une interface cohérente avec le design system et les attentes du client
L’objectif était de concevoir la page d’accueil et une page de contenu type, déclinées en vues responsives, en m’appuyant sur le design system de Stratis et en l’adaptant graphiquement à l’identité de la ville de Villebon-sur-Yvette. Le tout en respectant les contraintes d’accessibilité web et en suivant le process de l’agence : brief créatif, maquette, validation client, recette avec le développeur.
DEMARCHE
Un process structuré, du brief à la recette
Travailler en agence sur un projet public, c’est évoluer dans un cadre bien défini. Chaque étape avait son rôle, chaque intervenant avait sa place. Ma mission était de produire des maquettes qui répondent au brief, aux contraintes d’accessibilité, et aux attentes du client.
BRIEF
Brief créatif
Tout commence par le brief créatif rempli par le client: couleurs, typographie, valeurs, inspirations. C’est mon point de départ pour comprendre l’univers de la ville et définir la direction graphique à adopter dans le respect du design system de Stratis.
MAQUETTE
Wireframe & maquette UI
À partir du brief et des wireframes fournis par le chef de projet, j’ai conçu les maquettes sur Adobe XD. Les wireframes définissaient les fonctionnalités à intégrer et leur ordre: accès rapides, actualités, agenda, chiffres clés, carte interactive, kiosque, et je devais les respecter.
Ma liberté créative s’exprimait dans l’habillage graphique : couleurs, typographie, icônes, éléments graphiques, en adaptant le design system de Stratis à l’identité visuelle de la ville. C’était la première fois que je travaillais avec un design system existant. Comprendre sa logique, respecter ses règles tout en personnalisant graphiquement chaque composant, c’est un exercice qui demande autant de rigueur que de créativité.
J’ai livré une V1, puis j’ai intégré les retours du client transmis par le chef de projet jusqu’à la validation finale. Chaque page était déclinée en vues responsives: desktop, tablette et mobile.
VALIDATION
Validation client
Une fois les maquettes finalisées, le chef de projet les présentait au client. Les retours me parvenaient ensuite sous forme de commentaires, que j’intégrais et ajustais avant une nouvelle validation. Ce circuit d’allers-retours m’a appris à défendre mes choix graphiques tout en restant à l’écoute des besoins du client.
RECETTE
Recette du site web
Une fois le site intégré par le développeur, je réalisais la recette, une comparaison minutieuse entre la maquette et l’intégration, en notant les écarts et en formulant des commentaires précis pour les corrections. C’est une étape essentielle pour garantir que ce qui a été conçu est bien ce qui est livré au client.
CE QUE JE RETIENS
Un design system, ça s'apprend en faisant
Travailler avec un design system existant, c’est accepter un cadre pour mieux se concentrer sur ce qui compte vraiment : la cohérence, la personnalisation et la qualité du livrable. Ce que j’ai perçu au départ comme une contrainte est rapidement devenu une force, une base solide sur laquelle construire avec efficacité.
Ce projet m’a aussi confirmé que le rythme d’une agence s’intègre vite quand on est rigoureux et organisé. Comprendre comment un brief circule, comment les retours remontent, comment une maquette devient un site, tout ça ne s’apprend pas en cours. Ça s’apprend en faisant, sur un vrai projet, avec de vrais interlocuteurs et de vraies contraintes. Arriver dans une agence et livrer dès le premier projet, c’est exigeant. C’est aussi la meilleure façon de progresser.
Voir d’autres projets
- DESIGN SYSTEM, RECHERCHE UTILISATEUR, UX/UI DESIGN
- NO-CODE, RECHERCHE UTILISATEUR, UI DESIGN, UX DESIGN