FO Centrale Bercy : direction artistique, design et site Webflow du syndicat FO de l'administration centrale de Bercy

FO Centrale de Bercy est le syndicat Force Ouvrière des personnels de l'administration centrale des ministères économiques et financiers : titulaires, contractuels, apprentis et retraités, des services administratifs, techniques et médico-sociaux, sur tous les sites qui relèvent de l'administration centrale. Il accompagne les agents sur leur carrière, leur rémunération, leurs conditions de travail et leurs droits, et siège dans les instances de dialogue social.

FO Centrale de Bercy a confié à Gemeos, agence web pour les associations, la direction artistique de son nouveau site, son design, son développement Webflow et sa structure de référencement.

MacBook Pro ouvert sur l'accueil FO Centrale Bercy « Une question, une difficulté ? Ne restez pas seul. », sur un bureau en bois près d'une lampe et d'une tasse de café

Un site où un agent se sent accueilli avant d'être informé

Un agent qui cherche un syndicat a souvent une question précise et un peu d'inquiétude : une évaluation contestée, un contrat à renouveler, une mobilité, une cotisation dont il ignore le montant. Le site devait parler à tous, du jeune sortant d'école à l'agent en fin de carrière, de la secrétaire au chef de service en passant par les équipes techniques, avec un ton chaleureux et accueillant, sans en faire trop. Le logo historique restait en place : il fallait que l'identité du site l'accueille sans être construite autour de lui.

Gemeos a exploré trois pistes de look & feel, toutes en couleurs chaudes, autour des visages des agents et des gestes du syndicat. Le site, conçu puis intégré sur Webflow, part d'une question simple, « Ne restez pas seul », et oriente chacun vers ce dont il a besoin : ses droits, l'agenda des instances, les outils pratiques, les avantages de l'adhésion et un formulaire d'adhésion en ligne qui calcule la cotisation.

Industrie: Service
Services: DA; UX/UI Design; Intégration; SEO

Les trois pistes de page d'accueil explorées pour FO Centrale Bercy, côte à côte sur fond bordeaux

Réchauffer un vocabulaire administratif, sans en faire trop

Droits, statuts, indices, instances : le sujet a tout du guichet. Le brief demandait l'inverse, des couleurs chaudes, des personnes de tous âges et de toutes origines, une ambiance de bureau apaisée où l'on a envie de rester. Les trois pistes partagent cette intention et le rouge FO réservé aux actions ; elles diffèrent par leur façon de montrer les agents et de faire parler la page.

La palette pose un bordeaux (#5F1E10) pour le fond et la gravité, le rouge FO (#D83224) pour les boutons et les accents, un abricot (#FFCABA), un grège (#EFEFEB) pour les fonds clairs et une encre (#111111) pour le pied de page. Les textes sont composés dans la police système de chaque appareil : aucune police à télécharger, des pages qui s'affichent tout de suite, sur un poste de l'administration comme sur un téléphone.

Deux registres d'images se répondent. Les portraits des agents sont découpés à la main et bordés de rouge, comme un autocollant posé vite parce qu'on a quelque chose d'important à dire. Des personnages illustrés, un par mission, portent le drapeau, accompagnent, accueillent ou partent en voyage avec les avantages négociés. Et sous les mots qui comptent, un trait rouge tracé à la main.

Piste 1 - Le portrait découpé
Des portraits arrachés à la découpe rouge, une écriture manuscrite en surlignage réservée aux mots qui portent l'émotion, des personnages illustrés en pleine action, un par mission. Rouge FO, bordeaux, crème et encre chaude. Perception visée : on ouvre une porte, on ne redirige pas vers un service.
Piste 2 - Le cadre
Une seule police géométrique, des photos découpées dans des formes irrégulières sur un fond coloré qui déborde, des traits blancs tracés à la main et les bâtiments fondus dans le bordeaux. Perception visée : une organisation structurée qui inspire confiance avant même la première ligne.
Piste 3 - La présence
Une grande photographie éditoriale en pleine largeur, des titres en serif, la mascotte au drapeau FO qui traverse les sections, les sites en photographies et une liste numérotée pour la méthode. Perception visée : le visage d'abord, la structure ensuite.

Piste 1, Le portrait découpé : hero avec un portrait bordé de rouge et cartes des sites Rouen, Chevaleret et Bercy

Concept 1

MacBook Pro ouvert sur la page « Nous rejoindre c'est ne plus rester seul », sur une table ronde avec des biscuits et du café

Une question d'abord, la réponse juste après

L'accueil ne commence pas par la structure du syndicat mais par la situation de l'agent : « Une question, une difficulté ? Ne restez pas seul. » Puis il montre comment les choses se passent vraiment, une conversation entre délégués qui prennent un dossier en main, la présence sur chaque site, ce que l'adhésion apporte et l'équipe qui répond.

Page	Ce qu'elle fait pour le visiteur
Accueil	La promesse « Ne restez pas seul », les sites de l'administration centrale, la conversation des délégués, les raisons d'adhérer, l'accompagnement, les droits et les outils, l'équipe
Qui sommes-nous	L'histoire depuis 1948, l'indépendance du syndicat, sa place dans la Fédération des Finances FO, les instances où il siège et les délégués à contacter
Mes avantages	L'accompagnement tout au long de la carrière, l'appui en cas de litige, les avantages négociés, les quatre réseaux FO et le barème de cotisation selon l'indice
Connaître vos droits	Carrière et parcours pro, contractuels, conditions de travail, diversité et inclusion : une page par thématique, avec les ressources qui s'y rattachent
Agenda social	Le calendrier des comités, formations spécialisées et groupes de travail, une fiche par réunion et un lexique des instances
Boîte à outils	Guides pratiques et formulaires à télécharger, filtrés par type
Actualités	L'actualité de l'administration centrale, l'actualité nationale, l'édito et la revue de presse
Adhésion	Le formulaire en ligne, en cinq étapes, à la place du bulletin papier

Les pages alternent les fonds clairs et les blocs bordeaux, avec les portraits découpés en tête et les personnages illustrés à côté des titres. Les mêmes briques reviennent partout : cartes d'avantage, accordéon numéroté, onglets des sites, cartes de réunion, bloc d'appel « Ne restez pas seul face à votre situation ». Même la page d'erreur garde le ton de la maison : « Cette page est en grève ».

Pro Display XDR ouvert sur le formulaire d'adhésion FO Centrale Bercy « Rejoignez-nous, en 5 minutes. »

Adhérer en cinq minutes, sans bulletin papier

Le formulaire d'adhésion remplace le bulletin papier. Il avance en cinq étapes (cotisation, identité, coordonnées, paiement, validation) et commence par la question que tout le monde se pose : combien ça coûte. L'agent indique qu'il est en activité, saisit l'indice majoré inscrit sur sa fiche de paie, et le site affiche aussitôt sa cotisation annuelle, sa tranche et le coût réel après le crédit d'impôt de 66 %. Le barème complet reste à portée de clic.

Le site est développé sur Webflow. Les réunions de l'agenda, les actualités et leurs catégories, les ressources et les thématiques de droits vivent dans des collections CMS, chacune servie par un gabarit unique : annoncer un groupe de travail ou publier un guide ne demande aucune mise en page. L'agenda se filtre par instance, les outils par type, et la conversation de l'accueil s'écrit au fil du défilement.

MacBook Pro ouvert sur la page « Actualités & informations syndicales », sur une table basse près d'un fauteuil

Des réponses claires aux questions que se posent les agents

Un agent tape « droits des contractuels », « comité social d'administration » ou « cotisation syndicale crédit d'impôt » avant de penser à un syndicat. Le site est structuré pour ces recherches : une page par thématique de droits, une fiche par réunion, un lexique des instances, et des pages qui répondent à une question précise plutôt qu'une plaquette.

Chantier	Détail
Pages d'atterrissage	Une page par thématique de droits (carrière et parcours pro, contractuels, conditions de travail, diversité et inclusion), les avantages et le barème, l'adhésion en ligne
Contenus	48 fiches de réunion à l'agenda, une quarantaine d'actualités réparties en quatre catégories, des guides et formulaires, et un lexique des instances (CSAC, formation spécialisée, groupe de travail, réunion technique élections)
Balises & métadonnées	Title et meta description rédigés pour chaque page principale et chaque hub, un seul H1 par page, fil d'Ariane sur les pages intérieures
Domaine	Balise canonique vers le domaine focentrale-bercy.fr sur chaque page et plan du site généré par le CMS, prêts pour la mise en ligne
Données structurées	WorkersUnion et WebSite sur l'accueil, les pages principales et les hubs, avec le type de chaque page (AboutPage, CollectionPage, ContactPage) et un BreadcrumbList

Lisible par les moteurs comme par les assistants IA

Les données structurées décrivent le syndicat sans ambiguïté : son nom complet, sa date de fondation, son adresse rue de Bercy, son adresse de contact et son appartenance à la Fédération des Finances Force Ouvrière. Le lexique de l'agenda explique en quelques lignes ce que fait chaque instance : des définitions courtes et rattachées à une organisation identifiée, que les moteurs et les assistants IA peuvent reprendre.