Qualisocial × Gemeos

Qualisocial is France’s go-to name in workplace mental health, supporting more than 1,100 organizations and 1 million employees. For the brand redesign, Gemeos handled the art direction, UI design, Webflow development, and SEO for the new site.

Digital Redesign for France’s Leading Workplace Mental Health Brand

Qualisocial is France’s go-to name in workplace mental health. The platform supports more than 1,100 organizations and over a million employees. As part of a strategic repositioning — moving from a sector-specific provider to a broader QWL transformation partner — they launched a full redesign of their digital presence.

Gemeos led the entire project — art direction aligned with the new positioning, conversion-focused UI design for multiple audiences, Webflow development with a robust technical stack, and SEO/GEO strategy built in from the design phase.

Industry

Healthcare

Services

Artistic Direction

Development

SEO

UX/UI Design

Art Direction

Design aligned with a bold strategic repositioning

Qualisocial’s new positioning — shifting from a sector-specific provider to a strategic mental health partner — called for art direction that matched the ambition. Gemeos translated that vision into a cohesive visual system: [a restrained palette centered on cool blues and neutral tones], modern sans-serif typography with strong legibility, and a disciplined use of white space to create clarity and authority. The challenge was to capture both the rigor of an institutional player and the warmth of a human-centered brand — a defining balance in workplace mental health.

Summary

Art Direction Web Design Development SEO

UI Design

Conversion-focused UI for multiple visitor journeys

Qualisocial speaks to visitors with radically different goals: HR directors at large enterprises, QVCT leads, mutual insurance groups, and public institutions. The UI architecture was designed to support those journeys without blurring them together. The main navigation surfaces six solution offerings in just two clicks, while the page hierarchy clearly maps out the prevention levels — primary, secondary, and tertiary. Social proof modules — enterprise testimonials from Allianz France, SNCF Réseau, and Groupama, plus impact metrics — were placed at key friction points to help drive the decision. The homepage also includes a custom impact calculator: every HR director can estimate, in real time, the annual cost of poor mental health inside their organization, turning the value proposition into a financial argument they can act on immediately.

Summary

Art Direction Web Design Development SEO

Webflow Development

Webflow development without compromising performance

Qualisocial’s Webflow build called for a full stack of custom technical solutions to handle the project’s functional complexity. The structure runs on a multi-collection CMS — blog, guides, training, testimonials — with dynamic content injection via Finsweet fs-inject (CDN) to display content in non-native Webflow areas, including a fix for a double-instance bug (fs-inject-instance). A custom JavaScript calculator was built for the disability/inclusion employment page: a fully custom range slider with configurable parameters set directly in HTML attributes (range-slider-values, range-slider-initial-value), with no heavy external dependency. HubSpot forms were embedded directly into the pages to preserve tracking and CRM segmentation, with no dedicated redirect page. Visual interactions — testimonial slider via Splide.js, video playback via FlowPlay — were handled by resolving a double-call conflict between project settings and page settings. Analytics scripts (GTM, GA4, LinkedIn Tag) were deployed through Webflow’s native head manager.

Technical component	Chosen solution	Use
Dynamic CMS	Native Webflow CMS (multi-collections)	Blog, guides, training, testimonials
Content injection	Finsweet fs-inject (CDN)	Displaying CMS content outside native areas
ROI calculator	Custom JavaScript + custom range slider	Mental health impact estimator (homepage)
Inclusion calculator	Custom JavaScript (HTML attributes)	Disability / employment inclusion page
CRM forms	Direct HubSpot embed	Leads, contacts, newsletter
Testimonials slider	Splide.js	Homepage client carousel
Video playback	FlowPlay (cdn.jsdelivr.net)	Embedded videos without forced autoplay
Analytics & tracking	GTM + GA4 + LinkedIn Tag	Conversion and audience tracking

Summary

Art Direction Web Design Development SEO

SEO / GEO

Technical SEO and optimization for AI engines

The move to the new site called for a rigorous technical SEO strategy to preserve the domain authority already earned. A full 301 redirect plan was mapped out and deployed before launch, with post-migration fixes for 343 redirect chains and loops detected in SEMrush — including the redirect for the ao.qualisocial.com subdomain. Structured data Schema.org was implemented across the main page types to expand rich snippet coverage. Every page got a full optimization pass on title tags, meta description tags, and alt and title attributes across all media. The Webflow semantic architecture was built with a consistent heading hierarchy (H1 → H6) to make crawling easier for search bots.

On the GEO (Generative Engine Optimization) side, the content was structured to match the response patterns of major language models (ChatGPT, Perplexity, Gemini): short, self-contained content blocks, clear definitions of key concepts (QVCT, RPS, psychosocial risk prevention), and direct answers to the questions HR leaders ask most often. The page semantics were designed so the content could be easily extracted when an LLM answers queries like "best workplace mental health provider" or "how to improve QVCT in the workplace" — positioning Qualisocial as a trusted reference in generated answers.

Summary

Art Direction Web Design Development SEO