Mise en production du site eliorgroup.com, un site corporate ambitieux avec Drupal 9 et Aegir

Créé en 1991, Elior Group est un des leaders mondiaux de la restauration collective et des services. Le Groupe a réalisé en 2019-2020 un chiffre d’affaires de 4 milliards d’euros. Référence dans le monde de l’entreprise, de l’enseignement, de la santé et des loisirs, le Groupe s’appuie sur un modèle économique construit autour de l’innovation et la responsabilité sociétale. 

Le nouveau site du Groupe a pour mission de moderniser sa communication institutionnelle et de véhiculer son engagement d'innovation auprès des cibles actuelles et du grand public. Le projet a par conséquent consisté à renforcer le traitement éditorial du site, en empruntant les codes des médias en ligne. 

L'enjeu de la pérennité de la plateforme Drupal / Aegir

Le projet de refonte du site eliorgroup.com s'est intercalé au moment des mises à niveau nécessaires sur la plateforme du Groupe. L'usine à sites, propulsée par Drupal 8 et orchestrée par Aegir, devait être entièrement protée vers Drupal 9 et la dernière version d'Aegir 3. Si la communauté n'était pas rassurante sur les sujets de compatibilité entre ces 2 versions, nous avons fait le choix de développer le site en version 9 tout en conduisant, simultanément, les montées en version des autres profils d'installation et de la plateforme Aegir.

Nous ne manquerons pas de communiquer nos difficultés et le résultat de ces mises à niveau, qui font d'Aegir une plateforme toujours aussi robuste pour exploiter un groupe de sites autonomes avec Drupal.

La conception UI en double aveugle

Pour répondre à la consultation et exposer notre savoir-faire et notre méthode de travail, sur les plans technique et créatif, nous avons challengé au sein de notre équipe de conception 2 groupes composés d'un designer UI et d'un designer UX. Cet exercice nous nous a permis de présenter 2 directions artistiques et 2 approches différentes, malgré une méthodologie commune:

• Benchmark UX/UI - Analyser les interfaces des sites concurrentiels et inspirants.
• Design Studio / Zonings - Générer des solutions de manière collaborative.
• Wireframing - Représenter les zonings de manière fidèle.
• Design d'interface - Incorporer l'identité visuelle aux interfaces et leurs donner vie.
• Prototypage - Evaluer nos solutions auprès des utilisateurs.

La proposition retenue s'inspire du dernier rapport d'activité Elior Group, exemple réussi combinant illustrations et photos. Les aplats aux couleurs adoucies permettent une mise en avant des contenus ainsi qu'un contraste agréable à la lecture. La typographie associe une font serif pour les titres - DM Serif - ainsi qu'une seconde police sans serif - General Sans - qui se rapproche dans sa forme de celle du logo d'Elior. Les séparateurs, issus de la plaquette, sont repris pour délimiter les blocs.

Le choix de la Direction Artistique

La Direction Artistique s'est inspirée des principes suivantes :

• Adopter les codes des sites btob - utiliser davantage de CTA pour créer des parcours de navigation dès la page d’accueil.
• Minimaliser les interfaces - éviter la surcharge des pages, agrandir les titres, réduire la taille des colonnes de contenu pour faciliter la lecture, notamment sur mobile.
• Utiliser des typographies décalées - pour donner un ton unique au site, le ramener dans l’univers des médias, transmettre la notion d’engagement.
• Mélanger photographies et d'illustrations.
• Insister sur l'accessibilité et l'économie de ressources (green it), reflets des engagements du Groupe.

L'enrichissement des paragraphes disponibles sur la plateforme pour disposer d'une bibliothèque de blocs

En dehors de la reprise des contenus, complexe et cruciale, les équipes projet ont travaillé à mutualiser les configurations et développements pour les rendre disponibles à tous les profils d'installation proposés sur la plateforme. Cette logique de mutualisation permet de faire profiter aux autres sites des travaux initiés à chaque évolution. L'objectif principal du projet, orienté sur les contenus, a été de proposer une bibliothèque de blocs manipulables sur les principaux types de contenu. Nous avons utilisé le module Paragraphs, distribué sur tous les profils d'installation et dont les configurations peuvent être adaptées plus rapidement. Au total, nous avons déployé, configuré et thémé 23 types de paragraphes censés répondre à tous les besoins d'intégration de contenu :

• Paragraphe HTML ;
• Paragraphe Texte + image ;
• Paragraphe image ;
• Paragraphe citation ;
• Paragraphe chiffres clés ;
• Paragraphe photo album ;
• Paragraphe grille d'images ;
• Paragraphe links and files ;
• Paragraphe formulaire ;
• Paragraphe 3 blocs ;
• Paragraphe communiqués de presse ;
• Paragraphe 2 blocs ;
• Paragraphe chiffres clés ;
• Paragraphe citation ;
• Paragraphe illustrated downloads ;
• Paragraphe remontée éditoriale ;
• Paragraphe accordéon ;
• Paragraphe vidéo ;
• Paragraphe Métier / personne ;
• Paragraphe À la une ;
• Paragraphe communiqués de presse ;
• Paragraphe Tribune ;
• Paragraphe Bourse.

La reprise des contenus et les contenus liés

Cette reprise a essentiellement concerné les contenus juridiques et légaux (communiqués de presse, informations financières) ainsi que les documents liés, issus du précédent site (Drupal 8). Elle n'a pas nécessité de réécriture, à la différence des autres types de contenu puisque nous nous sommes appuyés sur la structure du précédent site.

De plus, nous avons configuré un service pour récupérer, à partir d'une taxonomie conjointe, les recettes en provenance du site https://foodforgood.eliorgroup.com, qui permet de joindre des contenus enrichis issus de la communication innovante du Groupe.

Nous saluons au passage, la qualité et le soin apporté au webmastering par l'équipe projet du Groupe Elior. Si les procédures de test et de contrôle qualité ont été poussées pendant presque 2 mois, elles ont permis aux contributeurs de rapdiement prendre la mesure de ces nouvelles configurations pour un résultat clair et efficace.

Les illustrations et leurs animations

Les micros interactions proposées ont eu pour objectif de ne pas nuire à l'efficacité de la lecture. Elles ont été réfléchies pour ne pas, en outre, alourdir la fluidité de la navigation et des défilement. Ceci étant, nous avons de nouveau sollicité Gweno, motion designer indépendant, pour prendre en charge l'animation de certaines illustrations, pour la version desktop du site. Inutile que le travail d'animation nous a bluffé, notamment en termes de poids des animations livrées. Nous avons en concertation choisi d'utiliser le format https://lottiefiles.com/web-player qui met à disposition des intégrateurs un fichier json unique et très performant (moins de 100 ko).

En conclusion, nous saluons cette collaboration, les livraisons dans les délais, échelonnées selon un planning cohérent. Ce projet a été un plaisir partagé à concevoir et développer. Nous espérons qu'il remplira ses objectifs de communication et de satisfaction des utilisateurs.

URL : https://www.eliorgroup.com.
Etude de cas : Refonte du site du Groupe Elior.
Mise en production : 03/03/2022.