Le projet

 

1ère phase : Cadrage et conception

Analyse des enjeux 

L'analyse des enjeux liés à la refonte du site de Serelys a débuté par un travail de cadrage approfondi avec les équipes. L'objectif a été de comprendre précisément les enjeux business, les contraintes du secteur pharmaceutique et les attentes fonctionnelles liées au futur site e-commerce.
Les échanges ont permis d'identifier plusieurs besoins structurants tels que : 

• le passage d'un site vitrine à un site e-commerce transactionnel, 
• la mise en place d'un système d'abonnement récurrent, 
• la nécessité de rassurer les utilisateurs sur la qualité scientifique des produits, 
• l'importance d'une navigation simple et accessible pour une cible principalement composée de femmes de plus de 40 ans et de prescripteurs médicaux.

Cette phase a également mis en lumière de fortes attentes sur la clarté des contenus, la hiérarchisation de l'information produit et la présence d'éléments de réassurance visibles tout au long du parcours (laboratoire, expertise, avis, moyens de paiement).

Définition du cahier des charges

À partir de cette analyse, YATEO a rédigé les spécifications fonctionnelles du projet, définissant notamment :

• La structure du site et son arborescence (produits, abonnements, laboratoire, conseils, compte client),
  
  
• Les fonctionnalités e-commerce clés (gestion du panier, tunnel de commande, abonnements, moyens de paiement),
  
  
• Les besoins en back-office pour la gestion autonome des produits, contenus, abonnements et commandes,
  
  
• Les contraintes liées au secteur santé (ton éditorial, crédibilité scientifique, conformité des contenus),
  
  
• Les exigences techniques et SEO à intégrer dès la conception.
  
  

Ce cahier des charges a servi de référentiel commun entre SERELYS et YATEO, permettant de sécuriser les choix fonctionnels et d'anticiper les évolutions futures du site.

Conception UX/UI

Sur la base du cahier des charges validé, YATEO a mené un travail approfondi sur la partie UX/UI.

En effet, l'expérience utilisateur a été pensée pour guider naturellement l'utilisateur vers l'achat, avec une navigation fluide, une arborescence simplifiée et des parcours clairs entre découverte des produits, compréhension des bénéfices dans une optique CRO.
Côté UI, la charte graphique s'est appuyée sur des choix précis :

• un design clair et épuré, en concordance avec les codes du secteur pharmaceutique,
• une palette de couleurs cohérente avec la charte SERELYS
• des visuels mettant en scène des professionnelles de santé afin de renforcer la crédibilité scientifique.

La page d'accueil a notamment été conçue comme un point d'entrée stratégique, avec un slider de mise en avant des produits, des accès rapides aux gammes et aux engagements de la marque, et des éléments de réassurance visibles au-dessus de la ligne de flottaison.

Validation des maquettes

Les maquettes graphiques, présentées lors du compte-rendu de présentation de la homepage, ont permis de valider concrètement l'ensemble des choix UX/UI. Cette phase d'échanges a donné lieu à des ajustements précis sur :

• La hiérarchisation des contenus,
  
  
• La mise en avant des produits phares,
  
  
• La lisibilité des messages clés,
  
  
• L'équilibre entre information scientifique et discours accessible.
  
  

Les retours de SERELYS ont été intégrés afin d'affiner les différents éléments avant le développement, notamment sur la homepage, les fiches produits et les blocs éditoriaux. Cette étape a permis de sécuriser l'ensemble des décisions ergonomiques et graphiques, garantissant une parfaite cohérence entre l'identité de marque, les objectifs business et l'expérience utilisateur attendue.

2ème phase : Développement et intégration

Thème Prestashop sur mesure

YATEO a développé un thème PrestaShop entièrement sur mesure, réalisé from scratch.
L'objectif était d'assurer une intégration fidèle des maquettes et une maîtrise complète de la structure front-end en intégrant tous les composants graphiques définis en amont (structure de la page d'accueil, slider, blocs éditoriaux, vignettes produits).

Au-delà de l'harmonie visuelle obtenue avec la hiérarchisation des contenus, les espacements, les formes arrondies et la logique de lecture, le code respecte aussi scrupuleusement les standards natifs de Prestashop, garantissant l'évolutivité technique de la plateforme.

Le développement a été réalisé en respectant les standards PrestaShop, garantissant la compatibilité avec les mises à jour futures et la possibilité de faire évoluer le site sans contrainte structurelle.

Création du back-office

Le back-office PrestaShop a été configuré conformément aux spécifications fonctionnelles afin de permettre une gestion complète et autonome du site.
Il permet notamment :

• La gestion des produits (création, modification, mise à jour des contenus et visuels),
  
  
• La gestion des déclinaisons produits (formats, quantités, options),
  
  
• L'administration des abonnements, incluant les informations liées aux offres récurrentes,
  
  
• Le suivi des commandes et des comptes clients,
  
  
• La gestion des pages de contenus (pages institutionnelles, pages éditoriales, blog).
  
  

Cette configuration garantit une administration centralisée et structurée, tout en assurant la cohérence des informations affichées sur le front-office.

Tests fonctionnels

Des tests fonctionnels approfondis ont été réalisés sur l'ensemble des fonctionnalités intégrées. Ces tests ont porté sur :

• La navigation globale du site et l'accès aux différentes sections,
  
  
• Le fonctionnement du slider de la homepage et des blocs de mise en avant produits,
  
  
• La consultation des fiches produits, incluant les déclinaisons et les options d'abonnement,
  
  
• L'ajout au panier et le déroulement complet du tunnel de commande,
  
  
• La gestion des paiements et des abonnements récurrents.
  
  

Ces tests ont permis de vérifier la conformité du site avec les spécifications fonctionnelles, d'identifier les ajustements nécessaires et d'assurer un fonctionnement stable avant la phase de mise en ligne.

Optimisation des pages produit

Les pages produit ont également fait l'objet d'un travail d'intégration et d'optimisation spécifique, en cohérence avec les maquettes validées.

Chaque fiche produit intègre :

• Une galerie visuelle permettant de présenter le produit sous plusieurs angles,
  
  
• Des contenus structurés facilitant la compréhension des bénéfices et de l'usage,
  
  
• La présentation claire des options d'abonnement,
  
  
• Des éléments de réassurance, notamment l'intégration des avis clients via Trustpilot

Ces différentes intégrations ont été effectuées dans un souci de guider l'utilisateur et d'optimiser la conversion. 

Optimisation technique

Enfin, des actions d'optimisation technique ont été mises en œuvre afin d'assurer de bonnes performances globales du site. Ces optimisations concernent notamment :

• L'optimisation des temps de chargement,
  
  
• L'optimisation des visuels intégrés dans la homepage et les fiches produits,
  
  
• Faire en sorte que le site soit responsive et performant sur mobile et tablette

Ces optimisations permettent de garantir une navigation fluide, une expérience utilisateur homogène sur l'ensemble des supports et de poser des bases techniques solides pour les phases suivantes, notamment l'optimisation SEO.

3ème phase : Mise en ligne et validation

Tests finaux et validation globale

Avant la mise en production, une phase de tests finaux a été réalisée afin de valider l'ensemble du site dans son environnement quasi définitif. Ces tests ont porté sur la cohérence globale du front-office, la navigation entre les différentes pages, le bon affichage des contenus et le respect des maquettes validées.

Des vérifications ont été effectuées sur l'ensemble des parcours clés, notamment l'accès aux produits depuis la homepage, la consultation des fiches produits, le fonctionnement du panier et le déroulement complet du tunnel de commande. Cette étape a permis de s'assurer que toutes les fonctionnalités e-commerce intégrées lors de la phase précédente fonctionnaient de manière stable et conforme aux spécifications.

Validation multi-supports et compatibilité

Le site a été testé sur différents supports et navigateurs afin de garantir une expérience utilisateur homogène sur desktop, tablette et mobile. Une attention particulière a été portée au rendu responsive des pages structurantes telles que la homepage, les pages produit et les pages de contenu.
Ces tests ont permis de valider l'adaptation des blocs, la lisibilité des contenus et le bon comportement des éléments interactifs (menus, boutons, sliders) sur l'ensemble des formats d'écran.

Sécurisation et préparation à la mise en production

Les éléments nécessaires à la sécurisation du site ont été vérifiés avant la mise en ligne, notamment la configuration HTTPS et le bon fonctionnement des modules de paiement. Cette étape vise à garantir la fiabilité des transactions et la protection des données utilisateurs dans un contexte e-commerce.
La configuration finale de l'environnement de production a également permis de s'assurer de la stabilité du site avant son ouverture au public.

Mise en ligne du site

Une fois l'ensemble des validations effectuées, le site a été mis en ligne. Cette mise en production a été réalisée de manière contrôlée afin d'assurer une transition fluide entre l'ancien site et la nouvelle plateforme e-commerce.
La version en ligne reprend l'intégralité des éléments validés : design, contenus, fonctionnalités e-commerce, système d'abonnement et éléments de réassurance.

Prise en main et accompagnement des équipes

Suite à la mise en ligne, une phase de prise en main a été assurée afin de permettre aux équipes SERELYS d'exploiter pleinement le site. Cette étape comprend la présentation des principales fonctionnalités du back-office, la gestion des produits, des commandes et des abonnements, ainsi que les premières actions de suivi post-mise en ligne.
Cette phase permet d'assurer une exploitation autonome du site dès sa mise en production et de sécuriser le démarrage de l'activité e-commerce.

4ème phase : Optimisation et refonte SEO 

Définition de guides rédactionnels et sémantiques

Dans un premier temps, des guides rédactionnels SEO ont été élaborés afin de poser un cadre clair pour la production et l'optimisation des contenus du site. Ces guides définissent :

• la structure type des pages (pages produits, pages catégories, contenus éditoriaux),
  
  
• les bonnes pratiques de hiérarchisation de l'information (titres, sous-titres, paragraphes),
  
  
• les règles d'intégration des mots-clés stratégiques sans sur-optimisation,
  
  
• l'équilibre entre discours pédagogique, crédibilité scientifique et optimisation SEO.
  
  

Ces guides ont permis d'harmoniser l'ensemble des contenus du site, de sécuriser la qualité éditoriale dans la durée et de garantir une cohérence entre les exigences des moteurs de recherche et les attentes des utilisateurs.

Plan de redirection post-refonte

Une refonte SEO complète a également été menée afin d'assurer la continuité des performances organiques.
Un travail précis a notamment été réalisé sur la cartographie des URLs, permettant d'identifier les anciennes pages à forte valeur SEO et de définir des redirections 301 vers les nouvelles pages correspondantes. Cette démarche a permis :

• de conserver l'historique de référencement existant,
  
  
• d'éviter les pertes de trafic liées à la refonte,
  
  
• de transmettre correctement la popularité des anciennes pages.
  
  

Les pages 404 ont également été analysées et traitées. Des redirections pertinentes ont été mises en place lorsque cela était possible, et des pages d'erreur personnalisées ont été configurées afin de limiter la rupture dans le parcours utilisateur et les impacts négatifs sur le référencement.

Audit SEO complet post-refonte

Plusieurs audits SEO approfondis ont été réalisés afin d'analyser le site selon les trois piliers du référencement naturel :

• Audit technique : analyse de l'indexabilité des pages, de la structure du site, du maillage interne, de la gestion des balises HTML, ainsi que du comportement du site sur mobile. Cet audit a permis d'identifier les points bloquants pour le crawl et l'indexation.
  
  
• Audit de performance : évaluation des temps de chargement, du poids des pages, de l'optimisation des images et des ressources. Ces éléments sont essentiels à la fois pour l'expérience utilisateur et pour les signaux SEO.
  
  
• Audit de popularité : analyse du profil de liens entrants et de la notoriété du site afin d'évaluer son autorité et d'identifier des leviers d'amélioration en matière de visibilité.
  
  

Ces audits ont servi de base à la priorisation des actions SEO à court et moyen terme.

Mise en œuvre des optimisations SEO

À la suite des audits, des optimisations ont été mises en place sur plusieurs niveaux :

• Ajustements techniques pour améliorer l'indexabilité et la performance,
  
  
• Optimisation des contenus existants à l'aide des guides rédactionnels,
  
  
• Amélioration de la structure des pages stratégiques (produits, catégories, contenus clés),
  
  
• Correction des erreurs identifiées (liens cassés, pages non pertinentes, redirections).
  
  

Ces actions ont été déployées de manière progressive afin d'assurer la stabilité du site et de mesurer l'impact de chaque levier.

Suivi des performances et résultats

Un suivi régulier des performances SEO a été mis en place afin d'analyser l'évolution des positions, de la visibilité et du trafic organique. Ce suivi a permis d'ajuster les actions dans le temps et de consolider les gains obtenus.
En 6 mois, le site a augmenté de 142 % ses mots-clés en top 100,  avec une augmentation de 180 % du nombre de mots-clés en top 3, illustrant l'impact positif de la refonte SEO, des optimisations techniques et du travail éditorial mené sur la durée.

Conclusion

À travers ce projet, YATEO a accompagné SERELYS sur l'ensemble de sa transformation digitale, de la refonte fonctionnelle et graphique du site jusqu'à l'optimisation de sa performance SEO. La création d'une plateforme e-commerce sur mesure, reposant sur un thème PrestaShop personnalisé, a permis de proposer une expérience utilisateur fluide, crédible et adaptée aux exigences du secteur de la santé.

La structuration des parcours, l'optimisation des pages produit, la mise en place d'un système d'abonnement et l'intégration d'éléments de réassurance ont contribué à renforcer l'efficacité commerciale du site. En parallèle, l'optimisation SEO a permis d'améliorer durablement la visibilité organique du site.