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

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.

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.

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.

• 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é.

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.

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.

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.