Villebon-sur-Yvette
Date
2025
Client
Ville de Villebon-sur-Yvette
Mon rôle
UI Design
Compté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 en même temps, en conditions réelles
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, sans jamais avoir de contact direct avec lui
DEMARCHE
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
DEMARCHE
Wireframe & maquette UI
À partir du brief et des wireframes fournis par le chef de projet, je concevais 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é
Je livrais une V1, puis j’intégrais 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
DEMARCHE
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
DEMARCHE
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
Villebon-sur-Yvette est le projet qui m’a appris ce que veut dire travailler avec un design system existant. Au début, les composants sont déjà là, les règles sont déjà définies, et la marge de manœuvre semble étroite. Mais très vite, j’ai compris que ce cadre n’était pas une limite. C’était une base solide qui me permettait de me concentrer sur l’essentiel : adapter, personnaliser et livrer quelque chose de cohérent
C’est aussi ce projet qui m’a appris le rythme de l’agence. 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
- NO-CODE, RECHERCHE UTILISATEUR, UI DESIGN, UX DESIGN
Pertusatofilms
- UI DESIGN