Qualisocial : refonte Webflow pour la santé mentale au travail

Qualisocial accompagne les organisations sur la santé mentale au travail et la prévention des risques psychosociaux. Son repositionnement exigeait de mieux présenter les services aux directions RH.

Qualisocial a travaillé avec Gemeos, agence web pour la santé au travail, pour faire évoluer sa direction artistique, l'UI, Webflow et la structure SEO du site.

Faire évoluer la marque autour de la santé mentale au travail

Qualisocial accompagne les organisations sur la prévention des risques psychosociaux, le bien-être et la qualité de vie au travail. Son repositionnement élargissait la manière de présenter cette expertise : le site ne devait plus donner l'impression d'une succession de prestations isolées, mais rendre lisible un accompagnement global pour les directions RH et les organisations.

Gemeos a transposé cette évolution dans une direction artistique et des interfaces UI cohérentes avec le nouveau positionnement. Le développement Webflow a permis de structurer les différentes offres et les contenus associés. Les fondations SEO ont été prises en compte pour accompagner la visibilité des expertises liées à la santé mentale et aux risques psychosociaux.

Industrie

Santé

Services

Intégration

SEO

UX/UI Design

Design aligné sur un repositionnement stratégique fort

Le nouveau positionnement de Qualisocial — passant d'un prestataire sectoriel à un partenaire stratégique de la santé mentale — nécessitait une direction artistique à la hauteur. Gemeos a traduit cette ambition en un système visuel cohérent : [palette sobre centrée sur des bleus froids et des tons neutres], typographie sans-serif moderne à fort indice de lisibilité, gestion rigoureuse des espaces blancs pour dégager clarté et autorité. L'enjeu était d'incarner à la fois la rigueur d'un acteur institutionnel et la chaleur d'une marque centrée sur l'humain — un équilibre structurant dans le secteur de la santé mentale au travail.

Sommaire

Direction Artistique Web Design Développement SEO

"On a changé de métier sans changer de nom. Passer de prestataire à acteur de transformation, c'est facile à dire en interne, impossible à montrer. Le site a été le premier endroit où ce repositionnement est devenu concret. Un DRH de grand groupe et une mairie y trouvent chacun leur porte d'entrée."

Constance Guyon

Directeur Marketing @Qualisocial

UI orientée conversion sur des parcours visiteurs multiples

Qualisocial s'adresse à des profils aux intentions de visite radicalement différentes : DRH de grands groupes, responsables QVCT, mutuelles et collectivités. L'architecture UI a été conçue pour servir ces parcours sans les confondre. La navigation principale expose six offres de solutions accessibles en deux clics, tandis que la hiérarchie des pages articule clairement les niveaux de prévention (primaire, secondaire, tertiaire). Des modules de preuve sociale — témoignages grands comptes (Allianz France, SNCF Réseau, Groupama), chiffres d'impact — ont été positionnés aux points de friction pour appuyer la décision. La homepage intègre un calculateur d'impact sur-mesure : chaque DRH peut estimer en temps réel le coût annuel d'une mauvaise santé mentale au sein de son organisation, transformant la proposition de valeur en argument financier directement actionnable.

Sommaire

Direction Artistique Web Design Développement SEO

Constance Guyon

Directeur Marketing @Qualisocial

Développement Webflow sans compromis sur la performance

L'intégration Webflow de Qualisocial a mobilisé un ensemble de solutions techniques sur-mesure pour répondre à la complexité fonctionnelle du projet. La structure repose sur un CMS multi-collections (blog, guides, formations, témoignages) avec injection de contenu dynamique via Finsweet fs-inject (CDN) pour afficher du contenu dans des zones non natives de Webflow — incluant la résolution d'un bug de double instance (fs-inject-instance). Un calculateur JavaScript sur-mesure a été développé pour la page handicap/inclusion emploi : range slider entièrement personnalisé avec paramètres configurables directement en attributs HTML (range-slider-values, range-slider-initial-value), sans dépendance externe lourde. Les formulaires HubSpot ont été intégrés par embed direct dans les pages pour préserver le tracking et la segmentation CRM, sans page de redirection dédiée. La gestion des interactions visuelles (slider témoignages via Splide.js, lecture vidéo via FlowPlay) a été assurée avec résolution d'un conflit de double appel entre settings projet et settings page. Les scripts analytics (GTM, GA4, LinkedIn Tag) ont été déployés via le head manager natif Webflow.

Composant technique	Solution retenue	Usage
CMS dynamique	Webflow CMS natif (multi-collections)	Blog, guides, formations, témoignages
Injection de contenu	Finsweet fs-inject (CDN)	Affichage de contenu CMS hors zones natives
Calculateur ROI	JavaScript custom + range slider sur-mesure	Estimateur impact santé mentale (homepage)
Calculateur inclusion	JavaScript custom (attributs HTML)	Page handicap / inclusion emploi
Formulaires CRM	HubSpot embed direct	Leads, contacts, newsletter
Slider témoignages	Splide.js	Carrousel clients homepage
Lecture vidéo	FlowPlay (cdn.jsdelivr.net)	Vidéos embarquées sans autoplay forcé
Analytics & tracking	GTM + GA4 + LinkedIn Tag	Suivi conversions et audiences

Sommaire

Direction Artistique Web Design Développement SEO

Constance Guyon

Directeur Marketing @Qualisocial

SEO / GEO

Référencement technique et optimisation pour les moteurs IA

La migration vers le nouveau site a fait l'objet d'une stratégie SEO technique rigoureuse pour préserver l'autorité de domaine acquise. Un plan de redirection 301 complet a été établi et déployé avant la mise en ligne, avec correction post-migration de 343 chaînes et boucles de redirections détectées via SEMrush — dont la redirection du sous-domaine ao.qualisocial.com. Les données structurées Schema.org ont été implémentées sur les principales typologies de pages pour améliorer la couverture en rich snippets. Chaque page a fait l'objet d'une optimisation complète des balises title, meta description, attributs alt et title sur l'ensemble des médias. L'architecture sémantique Webflow a été construite avec une hiérarchie de titres (H1 → H6) cohérente pour faciliter l'exploration par les crawlers.

Sur le plan GEO (Generative Engine Optimization), le contenu a été structuré pour correspondre aux patterns de réponse des grands modèles de langage (ChatGPT, Perplexity, Gemini) : blocs de contenu courts et autonomes, définitions explicites des concepts clés (QVCT, RPS, prévention des risques psychosociaux), réponses directes aux questions fréquentes des DRH. La sémantique des pages a été pensée pour que le contenu soit facilement extractible lorsqu'un LLM répond à des requêtes telles que "meilleur prestataire santé mentale au travail" ou "comment améliorer la QVCT en entreprise" — positionnant Qualisocial comme source de référence dans les réponses générées.

Sommaire

Direction Artistique Web Design Développement SEO

Constance Guyon

Directeur Marketing @Qualisocial