Campus Form'Action
Campus Form'Action est un CFA du secteur social, près de Lyon : il forme en alternance des jeunes dès 16 ans aux métiers du lien social, et aide des associations à former leurs équipes. J'ai refait son site pour que chacun trouve, dès l'accueil, ce qui le concerne, dans le vert imposé par sa charte.
- Site vitrine
- Refonte multi-pages
- Une page par formation

En bref
- Client
- Campus Form'Action, CFA du secteur social (alternance, métiers du lien social)
- Avant
- Un site Webflow qui ne s'adressait qu'aux futurs apprenants
- Après
- Un accueil pour deux publics, une page par titre professionnel (AMIS, MSADS, CIP), la prise de rendez-vous
- Refonte livrée en
- mai 2026
- Réalisé par
- Kawn Studio, Nabil Aoulad Sbaa
- Outils
- React, TypeScript, Framer Motion, Lenis, Cal.com, Google Analytics
Un site de CFA pour deux publics
Au premier appel, en avril 2026, Campus Form'Action venait de choisir de se consacrer au seul secteur social. Ce centre de formation d'apprentis prépare à des titres professionnels en alternance, et il parle à deux publics : des jeunes de 16 à 24 ans qui cherchent une qualification, et des structures, associations, mairies, collectivités, qui ont besoin de médiateurs formés.
Les deux ne viennent pas chercher la même chose. Le jeune veut savoir ce qu'il apprendra, ce qu'il gagnera pendant l'alternance et ce qu'il fera ensuite. La structure veut savoir ce que coûte un apprenti et quelles aides elle peut mobiliser. Les nouveaux inscrits arrivaient alors par le réseau de Zakari, le fondateur, et de son associé. Le site devait devenir le premier contact pour les deux, et les amener jusqu'à un rendez-vous.
Ce que la refonte a gardé, ce qu'elle a changé
L'ancien site, fait sur Webflow, ne s'adressait qu'aux futurs apprenants : « notre CFA engagé pour votre réussite ». Une structure qui voulait former ses équipes n'y trouvait rien pour elle. La refonte a gardé l'identité de l'organisme de formation : sa charte, son logo, redessiné en vectoriel, et le nom qu'il donne à ses formations, les « Form'Actions ». Tout le reste a été refait en code.
J'ai d'abord dessiné l'accueil seul, pour valider la direction avec Campus avant d'écrire une ligne de code. Il part d'un constat que les deux publics partagent, les besoins du terrain, puis se sépare en deux colonnes, une par public. Viennent ensuite les formations, une section entière pour les associations, et une FAQ qu'on filtre par sujet, avec un onglet pour les structures. Chaque titre professionnel a maintenant sa propre page.
Un vert imposé, tenu sur des pages longues
La charte de Campus fixait trois verts et une police, Cera Pro, sans marge de manœuvre. Le design ne pouvait donc pas faire la différence à lui seul : le chantier, c'était l'ordre des contenus.
Pour que le vert reste une signature sans fatiguer la lecture, le site alterne des fonds très clairs, des sections vertes et des sections presque noires. Le vert plein habille le haut de page, la colonne des structures, la formation mise en avant et une carte sur deux. Les cartes portent une ombre pleine, décalée, dans un vert plus clair de la charte. Les écrans ci-dessous suivent l'accueil, puis la page d'une formation et la prise de rendez-vous.
Les temps forts du site

Le métier, dit en une phrase
Le haut de page dit ce que fait Campus sans détour : former des acteurs du lien social, opérationnels sur le terrain. La phrase suivante nomme les deux publics, les jeunes dès 16 ans et les structures. Deux boutons : être accompagné, ou découvrir les formations. Dessous défilent les logos des structures partenaires que Campus affiche.

Jeune ou structure, chacun sa colonne
Juste après le constat de terrain, l'accueil se partage en deux : « Vous êtes un jeune », sur fond blanc, et « Vous êtes une structure », sur fond vert. Chaque colonne porte trois promesses écrites pour son public, un métier reconnu d'un côté, des équipes opérationnelles de l'autre. Le visiteur sait d'emblée que le site le concerne.

Trois titres professionnels, côte à côte
Chaque formation diplômante a sa carte : Agent de médiation, information et services (TP AMIS), Médiateur social accès aux droits et services (TP MSADS), Conseiller en insertion professionnelle (TP CIP). Le numéro RNCP est en tête, avant le titre. Deux boutons par carte, le rendez-vous ou la page de la formation. Au téléphone, les cartes défilent au doigt.

Une porte d'entrée, annoncée telle qu'elle est
Pour qui hésite à s'engager sur un titre professionnel, l'accueil présente une formation courte d'initiation à la médiation sociale. Elle n'est pas encore ouverte : la carte est grisée, marquée « Prochainement », et son bouton ne mène nulle part, au clavier non plus. Le visiteur sait qu'elle arrive, sans tomber sur une page vide.

Ce qui se vérifie, avant les avis
Avant les témoignages, l'accueil rassemble ce qu'un futur apprenti ou une structure peut vérifier par lui-même : la certification de l'organisme, les titres inscrits au RNCP, l'accès dès 16 ans, aucun frais pour l'apprenti. Les cartes se répartissent de part et d'autre d'une ligne qui se remplit à mesure qu'on descend. Le certificat se télécharge depuis le pied de page.

Une section pour ceux qui embauchent
Plus bas, l'accueil s'adresse aux associations seules. Le titre les nomme, et la liste parle de leurs sujets : professionnaliser les équipes, recruter des apprentis à coût maîtrisé, mobiliser les aides, être épaulé sur les démarches administratives. Le bouton aussi est écrit pour elles : « Parler à un conseiller ».

Une page par formation
Chaque titre professionnel a sa page, sur le même modèle : présentation, programme, financement, débouchés, FAQ. Le haut affiche le code du titre, son numéro RNCP et son niveau, ici l'équivalent CAP ou BEP pour le TP AMIS. Sur ordinateur, les compétences du programme défilent à l'horizontale pendant qu'on descend.

Le coût, réglé pour les deux publics
Sur chaque page formation, le bloc financement répond d'abord à la question du coût. En grand : 0 € à payer pour l'apprenant. À côté, le salaire mensuel en alternance selon l'âge, et pour la structure, les aides à l'embauche et ce qu'il lui reste à payer après aide. Le jeune et l'employeur lisent leur réponse au même endroit.

Un rendez-vous plutôt qu'un formulaire
La page contact s'ouvre sur un calendrier : on choisit un créneau de 15 minutes, et un membre de l'équipe rappelle. Les conditions sont écrites à côté, gratuit, sans engagement, réponse sous 24 h. Quand le visiteur accepte la mesure d'audience, chaque rendez-vous pris remonte dans le Google Analytics de Campus.


Au téléphone, le même aiguillage
La version téléphone garde l'ordre de l'ordinateur. Le titre, la phrase qui nomme les deux publics et le bouton principal tiennent dans le premier écran. Les cartes de formation se font défiler au doigt. La barre de navigation se retire quand on descend et revient, sur fond blanc, dès qu'on remonte.
Ce que j'ai livré
- La maquette de l'accueil, validée avec Campus avant le développement
- Le site, en code sur-mesure, sans template ni constructeur de pages : accueil, une page par titre professionnel (AMIS, MSADS, CIP), contact, mentions légales, politique de confidentialité, page 404
- La prise de rendez-vous Cal.com intégrée à la page contact
- La mesure d'audience : Google Analytics au nom de Campus, rendez-vous pris suivis, bandeau de consentement
- Le référencement de base : un titre et une description par page, des données structurées pour l'organisme, les formations et la FAQ, le plan du site
- Le logo de Campus redessiné en vectoriel : le fichier fourni était une image enregistrée en .svg, inutilisable sur un site
- La bannière LinkedIn et les brochures de Campus
- L'accessibilité vérifiée : lien d'évitement, navigation au clavier, rien de cliquable caché, animations figées pour qui réduit le mouvement
« J'ai apprécié travailler avec Kawn Studio. À l'écoute, professionnel et impliqué tout au long du projet. Nous sommes très satisfaits du résultat : un site qui reflète vraiment notre identité et qui parle à nos deux audiences. »
Zakari Y.Fondateur, Campus Form'ActionTon site ne parle qu’à une partie de ceux qui le visitent ? C’est ce qu’on regarde ensemble pendant les 30 minutes de l’appel découverte.
Réserver mon appel · Refaire un site qui parle à tous tes publics · Une autre refonte : Norad Studio
Sois là quand tes clients te cherchent.
Trente minutes, gratuites, pour savoir ce qu'il te faut. Le devis suit sous 24 h, et ton site est garanti trois mois après sa mise en ligne.