We have managed the Elior Group’s website factory since 2018. Following the upgrade of the sites to Drupal 9 and Aegir 3, we launched the new Group website, the result of original and ambitious design, and a successful collaboration between the two project teams.
Founded in 1991, Elior Group is one of the world leaders in contract catering and services. The Group achieved a turnover of 4 billion euros in 2019-2020. A benchmark in the corporate, education, healthcare and leisure sectors, the Group relies on a business model built around innovation and social responsibility.
The Group's new website aims to modernize its corporate communication and convey its commitment to innovation to current targets and the general public. The project therefore consisted in strengthening the editorial approach of the site, by adopting the codes of online media.
The Challenge of Maintaining the Drupal / Aegir Platform
The revamp of the eliorgroup.com site took place at the same time as necessary upgrades on the Group's platform. The site factory, powered by Drupal 8 and orchestrated by Aegir, needed to be fully migrated to Drupal 9 and the latest version of Aegir 3. While the community did not offer reassuring answers about compatibility between these two versions, we decided to develop the site in version 9 while simultaneously upgrading the other installation profiles and the Aegir platform.
We will not fail to communicate about the difficulties we encountered and the results of these upgrades, which have kept Aegir a robust platform for running a group of autonomous sites with Drupal.
Double-Blind UI Design
In order to respond to the brief and showcase our expertise and working methods, both technically and creatively, we challenged 2 teams made up of a UI Designer and a UX Designer within our design team. This exercise allowed us to present 2 artistic directions and 2 different approaches, despite following a shared methodology:
- UX/UI Benchmarking - Analyze the interfaces of competing and inspiring sites.
- Design Studio / Zoning - Generate solutions collaboratively.
- Wireframing - Accurately represent the zoning.
- Interface Design - Incorporate visual identity into the interfaces and bring them to life.
- Prototyping - Test our solutions with users.
The design chosen is inspired by the latest Elior Group annual report, a successful example combining illustrations and photos. Areas of softened colors allow for highlighting content as well as a pleasant contrast for reading. The typography associates a serif font for the titles—DM Serif—and a second sans-serif font—General Sans—which closely resembles the style of the Elior logo. Dividers, taken from the brochure, are reused to delineate blocks.
The Choice of Artistic Direction
The Artistic Direction drew inspiration from the following principles:
- Adopt B2B website codes – use more CTAs to create navigation paths right from the homepage.
- Minimize interfaces – avoid cluttering pages, enlarge titles, reduce content column width to facilitate reading, especially on mobile.
- Use unconventional typefaces – to give the site a unique tone, bring it closer to the media world, and convey the notion of commitment.
- Mix photographs and illustrations.
- Emphasize accessibility and resource efficiency (green IT), reflecting the Group’s values.
Expanding Available Paragraphs on the Platform to Build a Block Library
Beyond the complex and critical content migration, the project teams worked to share configurations and developments to make them available to all installation profiles offered on the platform. This principle of sharing enables other sites to benefit from improvements created with each update. The main goal of the project, focused on content, was to offer a library of blocks usable in the main content types. We used the Paragraphs module, distributed across all installation profiles and with configurations that can be adapted more quickly. In total, we deployed, configured, and themed 23 types of paragraphs intended to meet every content integration need:
- HTML paragraph;
- Text + image paragraph;
- Image paragraph;
- Citation paragraph;
- Key figures paragraph;
- Photo album paragraph;
- Image grid paragraph;
- Links and files paragraph;
- Form paragraph;
- 3 blocks paragraph;
- Press releases paragraph;
- 2 blocks paragraph;
- Key figures paragraph;
- Citation paragraph;
- Illustrated downloads paragraph;
- Editorial highlight paragraph;
- Accordion paragraph;
- Video paragraph;
- Job / person paragraph;
- Featured paragraph;
- Press releases paragraph;
- Op-ed paragraph;
- Stock market paragraph.
Content Migration and Related Content
This migration mainly involved legal and regulatory content (press releases, financial information) as well as related documents from the previous site (Drupal 8). It did not require rewriting, unlike other content types, as we relied on the previous site's structure.
Additionally, we configured a service to retrieve, using a joint taxonomy, recipes from the site https://foodforgood.eliorgroup.com, which makes it possible to link enriched content from the Group’s innovative communications.
We would also like to acknowledge the quality and care brought to webmastering by the Elior Group project team. Even though testing and quality control procedures were rigorous for almost two months, they enabled contributors to quickly get to grips with these new configurations, for a clear and effective result.
Illustrations and Their Animations
The micro-interactions provided were designed not to compromise readability. Particular care was taken not to hinder smooth navigation and scrolling. That said, we once again called on Gweno, freelance motion designer, to handle the animation of certain illustrations for the desktop version of the site. Needless to say, we were blown away by the animation work, in particular the lightness of the delivered animations. Together, we chose to use the https://lottiefiles.com/web-player format, which gives integrators access to a unique and highly efficient json file (less than 100 KB).
In conclusion, we salute this collaboration, with deliveries on time, staggered according to a coherent schedule. This project was a pleasure to design and develop together. We hope it fulfills its communication and user satisfaction goals.
URL: https://www.eliorgroup.com.
Case study: Elior Group Website Redesign.
Go live: 03/03/2022.
