Refonte de site, CFA du secteur social

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
Site Campus Form'Action (refonte de site, cfa du secteur social) réalisé par Kawn Studio

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

  1. Accueil du site Campus Form'Action : titre sur le lien social, deux boutons, logos de structures partenaires

    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.

  2. Accueil Campus Form'Action : deux colonnes, « Vous êtes un jeune » sur blanc, « Vous êtes une structure » sur vert

    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.

  3. Les trois titres professionnels de Campus Form'Action en cartes, avec leur numéro RNCP

    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.

  4. Carte grisée « Prochainement » de la formation courte d'initiation à la médiation sociale

    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.

  5. Cartes Qualiopi et RNCP de part et d'autre d'une ligne verticale, sur l'accueil de Campus Form'Action

    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.

  6. Section de l'accueil Campus Form'Action adressée aux associations, avec le bouton « Parler à un conseiller »

    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 ».

  7. Haut de la page du TP AMIS sur le site Campus Form'Action : code, RNCP, niveau et titre

    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.

  8. Bloc financement d'une formation Campus Form'Action : 0 € pour l'apprenant, salaires en alternance par âge

    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.

  9. Page contact de Campus Form'Action : texte à gauche, calendrier de rendez-vous à droite

    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.

  10. Accueil du site Campus Form'Action sur téléphone : titre, phrase sur les deux publics, bouton principal
    Page de la formation Agent de médiation, information et services sur téléphone : le titre, les étiquettes du titre professionnel et les deux boutons.

    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'Action

Ton 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.