Vie de l'agence
10/04/2024

Refonte de la plateforme de sites Drupal du Groupe STEF : l’expérience contributeur à l’honneur

Photo d'entrepôt du Groupe Stef
Le groupe STEF nous a sollicités pour refondre sa plateforme de sites constituée de deux modèles de sites : son site institutionnel et ses sites pays. Un accompagnement complet : UX design, UI design, développement, recette et mise en ligne. Avec une attention toute particulière portée à l’expérience de contribution.

© STEF - © OBO/Clandoeil.fr

STEF, leader européen du transport et de la logistique sous température dirigée

STEF stocke, conditionne et transporte les produits alimentaires du quotidien. Présent dans 8 pays d’Europe, le groupe garantit l’approvisionnement alimentaire de millions de personnes et accompagne ses clients dans la conquête de nouveaux marchés. Créé en 1920, il dispose d'une expertise internationalement reconnue du respect de la chaîne du froid et de l’approvisionnement. Ils connaissent toutes les particularités des produits alimentaires pour préserver leur température et conserver leurs qualités.

Capture d'écran page d'accueil stef.com (nouveau site Drupal)

STEF nous a confié la refonte de sa plateforme de sites

Objectifs de la refonte :

  • Cohérence et visibilité de la marque : offrir une expérience de marque homogène sur tous les sites et développer leur visibilité grâce à au déploiement d'une stratégie d'acquisition SEO.
  • Multilinguisme : pour dialoguer avec ses utilisateurs partout où ils se trouvent.
  • Rationalisation : passer d'une plateforme multi-sites à une plateforme unique dont la contribution est déconcentrée (par pays).
  • Génération de prospects : optimiser les parcours utilisateurs pour attirer les visiteurs et les rediriger vers les formulaires de contact.
  • Recrutement : présenter les opportunités de carrière au sein du groupe STEF et rediriger les candidats vers stef.jobs.
  • Permettre la flexibilité des templates sur les sites : pour une meilleure expérience de contribution.

Pour répondre à ces besoins, nous avons accompagné l'équipe projet du Groupe STEF sur :

  • L’UX design : conception de l’expérience utilisateur (architecture de l'information, arborescence, parcours utilisateurs).
  • L’UI design : conception graphique des interfaces du site et enrichissement de la Direction Artistique appliquée au design system numérique du groupe.
  • Développement et intégration Drupal.
  • Test et recette.
  • Mise en production puis maintenance (en cours).

Une plateforme de sites comprenant deux modèles de site

Nous avons travaillé sur deux modèles de site correspondant à différents besoins de communication du groupe.

  • Le site institutionnel stef.com présentant les activités du groupe à l’échelle européenne et s’adressant en priorité aux investisseurs et aux médias.
  • 8 sites pays (France, Portugal, Italie, Espagne, Suisse - 4 langues, Belgique - 2 langues, Pays-Bas - 2 langues, Royaume-Uni) ayant un objectif de business et de recrutement, ciblant donc les prospects, les clients et les candidats.
Captures mobiles du nouveau site Drupal stef.com

Conception UX design : répondre aux besoins de chaque cible

Pour concevoir l’expérience utilisateur du site stef.com et des sites pays, notre accompagnement s’est déroulé en plusieurs étapes :

  • Benchmark : analyse de plusieurs sites comparables en termes de navigation, de menu, de l’architecture, de page RSE, etc.
  • Personas : Clarification des profils type des cibles déjà travaillés en amont (prospects, clients, médias, investisseurs, candidats et contributeurs).
  • Parcours utilisateur : planification des parcours de navigation type pour chaque cible, selon leurs besoins. Par exemple, “Le client souhaite trouver le site de son pays” / “L’utilisateur veut voir ce que propose le groupe pour son secteur, son activité, ses produits”…
  • Wireframes : réalisation de maquettes représentant la structure de chaque page des sites.

Une double navigation pour relier le site institutionnel et les sites pays

Les UX designers ont mené une réflexion approfondie pour permettre aux utilisateurs de changer de site pays ou de visiter le site corporate. Dans cette optique, ils ont intégré un double menu de navigation par pays.

aria-hidden

Conception UI design : valoriser l’identité graphique du groupe

  • Benchmark : analyse graphique des sites concurrents pour s’inspirer des bonnes pratiques et éviter les mauvaises.
  • Direction artistique : définition de l’orientation graphique du site.
  • Réalisation de maquettes graphiques des pages du site.
  • Réalisation d’un design system : une bibliothèque de composants graphiques prêts à l’emploi pour faciliter l’évolution du site dans le temps.

Nous nous sommes appuyés sur les fondamentaux de la charte graphique de STEF (couleurs, logo, etc.) Nous avons également étendu le territoire graphique de la charte actuelle au profit d’un design plus moderne et chaleureux. Les interfaces s'appuient désormais sur des jeux de formes arrondies, une typographie "grasse", des illustrations sur-mesure, des pictogrammes filaires, des aplats de couleurs avec l’ajout du saumon, du jaune et du vert, aux bleus de la charte graphique. Un choix couleur qui permet de s’éloigner légèrement du territoire du froid pour explorer les territoires de l’agroalimentaire, de l’acteur de proximité.

Grille d'images présentant quelques illustrations créées dans le cadre de la refonte du site stef.com

Développement Drupal 10

Le développement est effectué avec Drupal 10 et le thème Gin, particulièrement approprié lorsqu’on souhaite proposer une interface moderne, intuitive et agréable à utiliser.

Un formulaire de contact déclencheur d'actions spécifiques selon la demande

Une attention particulière a été portée au formulaire de contact. Construit en plusieurs étapes, il a la particularité de déclencher des actions spécifiques en fonction de la demande. Par exemple, un renvoi vers le site d'emploi de STEF, un renvoi vers le CRM (API Salesforce) ou l'ouverture d’un ticket dans l’outil dédié du groupe.

aria-hidden=true

Optimisation du référencement

Dans un souci d’amélioration de la stratégie d'acquisition, nous avons également otimisé pour le SEO la carte interactive (localisation des lieux d’implantations de STEF). L’objectif est de faire positionner le site dans les moteurs de recherche lors de la saisie des mots-clés “Transporteur + nom d’une ville”. Nous avons par conséquent créé une page pour chaque grande ville où le groupe est présent.

Améliorer l’expérience de contribution

La contribution a impliqué les équipes digitales du Groupe ainsi que les équipes "pays". Il peut s'agir d'un moment douloureux pour les équipes qui doivent dégager du temps, écrire le contenu et intégrer les logiques du back-office

Nous avons tenté d'optimiser cette expérience de contribution, en répondant parfois aux demandes de personnalisation et de flexibilité exprimées par l'équipe projet du groupe STEF.

Nous avons par exemple eu recours au module Drupal Layout Paragraphs. Il permet aux administrateurs du site de créer facilement et rapidement des mises en page visuelles. Ils peuvent ainsi personnaliser à leur guise la manière dont le contenu est organisé : organisation en colonne, en ligne, choix des blocs, glisser-déposer…

En ce qui concerne l'expérience de Layout Paragraphs, nous avons même proposé une personnalisation en travaillant l’interface graphique du back-office de manière assez poussée, explorant d’autant plus les possibilités de Drupal en la matière (patch du module et personnalisation CSS des interfaces d'administration).

Concrètement, nous avons procédé à :

  • L’amélioration visuelle du Layout Paragraphs pour le rendre plus intuitif ;
  • L’amélioration du positionnement des boutons ;
  • A l'ajout d’illustrations personnalisées pour présenter chaque paragraphe et permettre de les distinguer plus spontanément.

Nous pouvons désormais capitaliser sur ces interventions pour les proposer lors de notre future utilisation du module de Page Builder avec Drupal. 

Capture d'écran de la personnalisation du backoffice Drupal

Vous avez un projet de plateforme de site ?

Si le sujet vous intéresse n’hésitez pas à nous contacter ou à consulter nos autres projets d’usine à sites.

Périmètre : UX Design, UI Design, spécifications et gestion de projet, développement, intégration, déploiement et maintenance.
Mise en production : 14/03/2024
URL du site : https://www.stef.com

Groupe STEF

Pour plus d’informations, vous pouvez consulter notre étude de cas sur le sujet.

« Nous avons choisi bluedrop.fr pour concevoir, produire et maintenir la plateforme de sites web du Groupe STEF. Ce projet structurant pour notre présence digitale s’est bien déroulé et le résultat répond tout à fait à nos attentes. L’expérience utilisateur et contributeur de notre nouvelle plateforme nous fait franchir un cap. L’expertise Drupal de bluedrop.fr et le professionnalisme des équipes de développement ont été les clés de ce succès. »

Photo du témoin
Sébastien Bouquerel Responsable Communication Digitale et Marque