Aller au contenu

Hamelin : refonte de l'écosystème Oxford

Hamelin est une entreprise de papeterie française leader dans la fabrication de fournitures scolaires et de bureau pour les étudiants et professionnels. En 2023, le groupe souhaite revoir son écosystème digital lié à la marque Oxford. Cette remise en question concerne la communication et la présentation de la marque aux consommateurs afin de simplifier leur expérience et, au passage, d’uniformiser le socle technique et de moderniser le design.

L’écosystème actuel est composé des sites multilingues suivants :

L’objectif de cette refonte est d’élaborer une stratégie de communication pour mieux exprimer le positionnement de la marque vers les cibles souhaitées : les étudiants, les professionnels, les distributeurs…

Pour cette refonte, plusieurs prestataires ont été choisis en fonction du périmètre d’actions :

  • Dentsu Creative pour la stratégie de communication et la réalisation graphique
  • Imagile pour la mise en place technique, l’intégration graphique et l’accompagnement SEO

Avant de se lancer dans la refonte de l’écosystème actuel, nous avons réalisé un audit technique du site marketing principal My Oxford. Cette étape à son importance car elle permet de repérer les points forts et les faiblesses du site actuel.

Globalement, le site était techniquement bien conçu avec Drupal mais devait cependant pallier à certaines failles de sécurité donc, à court terme, devait être mis à jour. Cela dit, dans une optique d’avoir une même base technique, un back-office et une gestion des contenus plus simple d’utilisation, la question de refonte sur WordPress s’est posée. Il y avait alors deux options à moyen / long terme à ce moment là pour Hamelin :

  • Rester sur la même base et mettre à jour le site actuel tout en gardant les limites dans la gestion du back-office et des contenus
  • Partir sur une base WordPress et pourquoi pas en profiter pour mutualiser ce socle technique sur l’ensemble de l’écosystème Oxford

Ce travail a été réalisé en amont du projet afin de pouvoir donner la ligne directrice à la fois des contenus et du design.

A été convenu à cette phase de cibler principalement les étudiants et leurs parents ainsi que les professionnels, le tout dans les 17 langues déjà en place sur le site actuel.

Afin de simplifier leur expérience et l’écosystème actuel, il a été décidé de regrouper les sites éditoriaux my-oxford.com et scribzee.com pour ensuite rediriger, en fonction des pays, vers les sites e-commerce. Ce regroupement uniformisera le socle technique et permettra à Hamelin de pouvoir éditer les contenus sur un seul site en plus de réduire les coûts en maintenance.

Quant au design, il devra être plus moderne et s’orienté en mobile-first vu que le trafic mobile est dominant.

Regroupement écosystème

Concernant les contenus, les préconisations sont de rédiger pour leurs cibles du contenu plus émotionnel/humanisé avec des visuels soignés et moins de texte, tout en atténuant l’aspect catalogue de l’ancien site pour plus se concentrer sur la marque que sur les produits et d’avoir un aspect plus storytelling tout en veillant à mettre suffisamment en avant Scribzee.

Pour respecter la vocation du nouveau site à ne plus être en partie présenté comme un catalogue, le choix a donc été de retirer les fiches produits pour se concentrer sur la présentation des gammes.

Nous avons été inclus lors de cette phase de création graphique afin que nous puissions indiquer les faisabilités techniques et prévenir en amont de certaines limites ou d’éléments complexes à intégrer pour éviter de potentielles problématiques lors de la phase d’intégration.

Les réalisations graphiques ont été faites sur Figma et ont été divisées en plusieurs catégories :

  • Un styleguide permettant à Hamelin d’avoir un « cahier des charges visuel » afin de valider les premiers éléments et nous permettant d’avoir l’ensemble des règles techniques à intégrer sur tous les éléments de base
  • Une liste de composants pour représenter l’ensemble des blocs qu’il sera possible d’éditer sur le site
  • Une mise en situation de l’ensemble des éléments précédents sur des maquettes

Une fois les maquettes validées, nous avons pu commencer le travail d’intégration graphique.

CMS

Un CMS (Content Management System) est un système de gestion de contenu qui permet de créer, gérer et modifier un site web ou des applications digitales sans avoir besoin de compétences techniques en développement. Grâce à une interface utilisateur intuitive, les utilisateurs peuvent ajouter ou modifier du texte, des images, des vidéos, des articles, des pages ou d’autres types de contenus facilement.

Le site marketing Oxford précédent était développé sur Drupal avec un autre prestataire et l’ancien site Scribzee sur WordPress avec nos outils. Hamelin nous ayant déjà confié la refonte du site de leur groupe qui est sur WordPress avec nos outils également, le choix s’est naturellement porté vers ce CMS afin d’avoir un même socle technique et éditorial qui est connu des équipes d’Hamelin.

Drupal à WordPress

De plus, les articles Scribzee devront être migrés sur le nouveau site et cela est plus simple techniquement de migrer des contenus d’un WordPress à un autre utilisant les mêmes outils.

Si vous souhaitez plus de détails concernant le choix et préconisation du CMS WordPress par rapport à Drupal, nous avons écrit un article qui explique notre point de vue :

La principale difficulté vient de la quantité de pays dans laquelle Oxford souhaite se positionner du fait de gammes proposées dans certains pays et pas d’autres. L’ancien site marketing était disponible en 17 langues et le nouveau devra à minima conserver ses langues et en prévoir de nouvelles par la suite.

Pour éviter de développer une gestion de zone qui apporterait une couche de géolocalisation complexe, nous avons opté pour la simplicité avec un sélecteur de langues classique. De cette façon, même si plusieurs langues sont disponibles dans un pays, elles sont représentées par deux items différents dans le sélecteur de langue. Cela oblige à être consciencieux dans la gestion des contenus car pour certains pays il faudra traduire le contenu dans chacune des langues parlées mais cela offre à l’utilisateur final de la simplicité dans sa navigation.

Logo WPML

Chez Imagile, nous utilisons le plugin de gestion de langues WPML qui, selon nous, est à ce jour la solution la plus adaptée et paramétrable pour la volumétrie de langues et les fonctionnalités attendues, comme la gestion de comptes éditeurs par langue par exemple.

L’ancien site d’Oxford était structuré sur un domaine unique avec une gestion de langues par répertoire : my-oxford.com/fr-fr, my-oxford.com/be-fr, my-oxford.com/de…

Nous avions alors un choix important à faire sur la structure d’URL :

  • Passer sur une gestion en sous-domaine : fr.my-oxford.com, de.my-oxford.com…
  • Ou bien rester sur la gestion de langues par répertoires
Structure url

Les impacts de ce choix sont principalement SEO et nous avons préféré rester sur la gestion de langues par répertoires pour les raisons suivantes :

  • L’autorité du domaine : le domaine actuel et ses backlinks pointent vers le domaine principal. Les répertoires par langues bénéficient donc directement de cette autorité. A l’inverse, un sous-domaine peut être traité comme une entité distincte par les moteurs de recherche et devra donc reconstruire sa propre autorité.
  • La gestion des redirections : en changeant en sous-domaine, toutes les URLs devront être redirigées du répertoire au sous-domaine et cela aurait demandé un travail bien plus conséquent que de rester sur la même structure et de rediriger uniquement les URLs modifiées
  • Suivi de données : le suivi analytique est simplifié avec une gestion en répertoire car on peut tout visualiser d’un seul tableau de bord vu qu’on est sur le même domaine. Par sous-domaine, il aurait fallu autant de tableaux de bord que de sous-domaines

Rester sur la gestion par répertoires nous paraissait donc être la solution la plus efficace, la moins complexe et celle avec le moins d’impacts négatifs pour le SEO.

SEO

Le SEO (Search Engine Optimization), ou optimisation pour les moteurs de recherche, regroupe un ensemble de techniques visant à améliorer la visibilité et le classement d’un site web dans les résultats des moteurs de recherche comme Google par exemple. Son objectif est d’attirer plus de trafic organique (non payé) vers un site en optimisant divers éléments techniques et de contenu.

Avant chaque intégration, nous devons vérifier que chaque design peut être techniquement intégré et veiller à ce que rien ne nuise à l’expérience utilisateur – voir nos articles sur l’ux. Avec le client, nous avons repris les maquettes et le Styleguide fournis par Dentsu et avons repensé certains fonctionnements des composants puis les avons intégrés par la suite.

En plus de la vingtaine de composants disponibles dans notre thème wordpress wp-starter, il était nécessaire d’intégré plusieurs autres composants correspondant aux maquettes.

Une fois mis en place, des transitions ont été ajoutées à différents endroits afin de rendre la navigation plus plaisante et moins statique (défilement horizontal, transparence…).

 

Site responsive Oxford
Le nouveau site responsive My Oxford

La gestion des contenus a été orientée par la stratégie de communication définie en amont du projet. L’un des éléments majeurs qui en ressort par rapport aux contenus de l’ancien site est le fait d’atténuer l’aspect catalogue pour avoir un site plus centré sur la marque et le storytelling avec des visuels soignés. Cela a un impact important puisque l’ancien présentait un grand nombre de fiches produits.

De ce fait, le groupe Hamelin a pu effectuer un tri manuel des contenus et procéder à une ressaisie des informations pertinentes. Cela a permis de se concentrer uniquement sur les contenus essentiels à migrer, tout en évitant le développement d’un script d’import complexe pour l’ensemble des pages.

Seuls les articles Scribzee ont été importés dans un second temps dans le blog du nouveau site dans l’ensemble des langues sur lesquelles ils étaient disponibles.

Une refonte de cette envergure a nécessairement des impacts côté SEO auxquels nous pouvons nous préparer.

Le point le plus important provient du retrait des fiches produits. De ce fait, l’ensemble des pages produits associées ont été retirées sur le nouveau site, ce qui représente un volume de pages important : plus de 6000 pages au total avant la refonte pour un peu plus de 1000 pages maintenant donc une diminution du volume globale par 6.

Avec cette baisse de volumétrie conséquente, nous nous attendions à une chute lors de la bascule sur le nouveau site. Nous avons donc préparé minutieusement les redirections de l’ensemble de ces pages afin d’éviter une chute trop importante.

Grâce aux contenus régulièrement mis en ligne et au socle technique performant et adapté pour le SEO, la chute s’est assez rapidement stabilisée et commence à remonter jusqu’à retrouver le même niveau qu’en début/milieu d’année ce qui est positif. Nous espérons voir le trafic continuer de grimper naturellement.

Pagespeed My Oxford
Rapport PageSpeed Insights My Oxford

Aujourd’hui, nous continuons d’accompagner le groupe Hamelin pour faire évoluer le site et en mettant en place tous les éléments de tracking nécessaire pour suivre l’évolution SEO.

Prochainement, de nouvelles langues vont être publiées afin que la marque Oxford puisse encore plus se mettre en avant à l’international.

Un grand merci à toute l’équipe d’Imagile pour l’accompagnement tout au long du projet de refonte de notre site web. Grâce à leur écoute, leur réactivité et leur expertise, chaque étape a été fluide et agréable. Ils ont su comprendre nos besoins, anticiper nos attentes et transformer notre vision en réalité. Nous sommes ravis du résultat final qui répond parfaitement aux objectifs.
Zineb Fliou, Cheffe de Projet Digital, Hamelin

Notre approche vous séduit ?

Contactez-nous, ou venez nous rencontrer pour discuter de vos projets.