Dans les coulisses de la refonte du site du Planning Familial : analyse étape par étape

Comment transformer un site labyrinthique obsolète en un outil d’accompagnement fluide et accessible ?

Bien au-delà d’un simple lifting graphique, la refonte du site internet du Planning Familial a été un défi de structure et d’usage de grande ampleur.

Plongez dans les coulisses de cette modernisation web : du diagnostic critique de l’ancienne interface à la création d’une identité visuelle forte, découvrez comment nous avons repensé chaque interaction. De la mise en place d’un formulaire de prise de RDV ultra-accessible à l’intégration d’une FAQ dynamique et d’une fonction dictionnaire inédite, parcourez la méthodologie stratégique qui a permis de remettre l’humain au centre de l’expérience utilisateur.

Temps de lecture : 4 minutes.

1. Le challenge : un site existant "bloquant"

Avant d’entamer la refonte, il était essentiel de comprendre pourquoi l’ancienne plateforme ne remplissait plus ses objectifs. Le constat était sans appel : le site agissait comme un frein, tant pour les utilisateurs que pour l’association.

Expérience Utilisateur (UX) dégradée : Arborescence labyrinthique, parcours complexe, et ergonomie défaillante (boutons invisibles, textes peu lisibles, contacts non cliquables).
Administration pénible : Un back-office rigide rendant la mise à jour laborieuse pour les équipes internes, résultant en des pages vides ou obsolètes.
Image de marque non uniforme : Design daté, incohérence éditoriale (tutoiement/vouvoiement), blog peu engageant.
Standard téléphonique saturé : Une mauvaise orientation de l’information entraînait de nombreuses demandes mal qualifiées par téléphone.
Technique & visibilité peu efficaces : Site uniquement en français (une partie du public était laissée de côté), SEO inexistant, non-respect des standards RGPD.

🎬 Pour bien comprendre l’impact de ces blocages sur l’utilisateur, j’ai filmé ce parcours critique avant la refonte :

Découvrez cette super vidéo en cliquant sur un des deux boutons bleus. À savoir : mes vidéos sont hébergées sur YouTube et vos données seront donc partagées avec ce provider.

Lire cette vidéo Lire cette vidéo et débloquer les autres vidéos du site

Plus d'informations

2. L'approche stratégique : remise à plat

Pour lever ces blocages, nous avons opéré une remise à plat totale de l’architecture. L’enjeu était de transformer un labyrinthe d’informations en un parcours fluide et intuitif.

Refonte de l’arborescence : Simplification drastique du parcours utilisateur et suppression des contenus parasites (capsules vidéos inutiles, répétition de textes, formulations hasardeuses).
Hiérarchisation de l’information : Travail de fond pour rendre l’information digeste (renommage des pages et rubriques, lisibilité accrue, mise en exergue des éléments clés, utilisation de visuels de manière intelligente) et restructuration des silos d’information.

3. Les solutions apportées : le cœur du projet

La phase de réalisation a permis de déployer des solutions sur-mesure, pensées pour répondre aux besoins opérationnels de l’association tout en offrant un service de haute qualité aux internautes.

a. Optimisation opérationnelle

L’un des objectifs majeurs était de redonner de l’air aux équipes internes en automatisant les tâches à faible valeur ajoutée.

Standard téléphonique déchargé : Mise en place d’un formulaire de RDV intelligent avec logique conditionnelle.
Autonomie des équipes internes : Création d’un système de template pour alimenter le blog sans contrainte technique.

b. Pédagogie & accessibilité

En tant qu’acteur de santé et de prévention, le Planning Familial se devait d’offrir une accessibilité exemplaire. Nous avons conçu des outils interactifs pour faciliter l’accès au savoir.

Le « dictionnaire » 3.0 (anciennement Sexoogle) :
-Fonctionnalité Tooltip : Définition au survol n’importe où sur le site (contextualisation immédiate).
-Fonctionnalité Annuaire : Champ de recherche, pages dédiées pour chaque terme (définition, synonymes et liens vers des sites reconnus).
Centre de ressources accessible : Intégration des assets print (affiches, dépliants, visuels) rendus téléchargeables.
FAQ dynamique : Gestion de + de 120 questions triées en 4 catégories via un système d’accordéons (sans plugin lourd) pour alléger la lecture.
Internationalisation du site : Traduction intégrale en 3 langues (français, anglais, allemand) pour toucher tous les publics du Luxembourg.

c. Design & engagement

Pour toucher une cible jeune, nous avons cassé les codes institutionnels avec une identité visuelle vibrante qui place l’humain au centre de l’expérience.

Identité visuelle forte : Usage assumé des couleurs de la charte graphique, mix de photos et d’illustrations IA avec pour but de mettre l’accent sur la représentation humaine. La cible principalement composée d’adolescents doit pouvoir se retrouver dans l’iconographie et le design choisis.
Campagnes impactantes : Chaque campagne a sa page dédiée avec son propre design décliné des supports print existants, conçus par Christelle, directrice artistique depuis 20 ans : couleurs, typographies, visuels, illustrations.
Interactivité :
-Sondage interactif (remplacement du PDF figé).
-Micro-animations pour dynamiser la navigation.
-Gestion des contenus longs via des onglets ou des accordéons pour éviter le scroll infini et l’effet « pavé ».
Responsive & mobile first : Le site est aussi agréable à visiter sur ordinateur que sur mobile ou tablette.

4. Les résultats techniques & SEO

Au-delà de l’esthétique, cette refonte a permis de poser des bases techniques saines et performantes, garantissant la pérennité du site et sa visibilité sur le long terme.

SEO & maillage : Optimisation des liens internes (notamment via le dictionnaire ou les boutons de navigation en bas de pages), travail sémantique sur les pages clés, nombreux liens sortants (en nouvel onglet) pour proposer un maximum d’informations.
Performance : Site plus léger et plus rapide pour répondre aux standards de performance.
RGPD : Mise en conformité stricte pour la protection des données des utilisateurs.