Redesign of the STEF Group's Drupal site platform: contributor experience in the spotlight

STEF stores, packages, and transports everyday food products. Present in 8 European countries, the group ensures the food supply for millions of people and supports its clients in conquering new markets. Founded in 1920, it has internationally recognized expertise in maintaining the cold chain and supply management. They know all the specificities of food products to preserve their temperature and maintain their quality.

We worked on two website models corresponding to the group's different communication needs.

• The corporate website stef.com presenting the group's activities on a European scale and primarily targeting investors and the media.
• 8 country sites (France, Portugal, Italy, Spain, Switzerland - 4 languages, Belgium - 2 languages, Netherlands - 2 languages, United Kingdom) with a business and recruitment purpose, thus targeting prospects, clients, and candidates.

To design the user experience for the stef.com site and the country sites, our support took place over several stages:

• Benchmark: analysis of several comparable sites in terms of navigation, menu, architecture, CSR pages, etc.
• Personas: Clarification of the target profiles already identified beforehand (prospects, clients, media, investors, candidates and contributors).
• User journeys : planning typical navigation paths for each target, according to their needs. For example, “The client wants to find the site for their country” / “The user wants to see what the group offers for their sector, their business, their products”…
• Wireframes: creating mockups representing the structure of each page of the sites.

Dual navigation to connect the corporate site and the country sites

The UX designers conducted an in-depth study to enable users to switch between country sites or visit the corporate site. To achieve this, they integrated a dual country navigation menu.

• Benchmark: graphic analysis of competitor sites to draw inspiration from best practices and avoid pitfalls.
• Art direction: defining the visual orientation of the site.
• Creation of graphic mockups for the site's pages.
• Creation of a design system: a library of ready-to-use graphic components to facilitate the website’s evolution over time.

We relied on the fundamentals of STEF's graphic charter (colors, logo, etc.). We also expanded the graphic territory of the current charter in favor of a more modern and welcoming design. The interfaces are now based on sets of rounded shapes, bold typography, custom illustrations, wireframe pictograms, and blocks of color with the addition of salmon, yellow, and green to the charter's blues. This color choice moves slightly away from the cold territory, allowing us to explore the world of agri-food and being a local player.

Special attention was given to the contact form. Built in several steps, it has the particular feature of triggering specific actions depending on the request. For example, a redirect to the STEF job site, a redirect to the CRM (API Salesforce), or the creation of a ticket in the group’s dedicated tool.

In an effort to improve our acquisition strategy, we have also optimized the interactive map (showing the locations of STEF sites) for SEO. The aim is for the website to appear in search engines when users enter the keywords “Carrier + city name”. Consequently, we have created a page for each major city where the group is present.

The contribution involved the Group’s digital teams as well as the “country” teams. It can be a difficult time for teams who need to free up time, write content, and integrate back-office logic.back-office. 

We tried to optimize this contribution experience, sometimes responding to requests for customization and flexibility expressed by the STEF Group project team.

For example, we used the Drupal Layout Paragraphs module. This allows site administrators to easily and quickly create visual layouts. They can thus personalize as they wish how the content is organized: arranging in columns, rows, choosing blocks, drag-and-drop, and so on.

Regarding the Layout Paragraphs experience, we even offered customization by working on the graphical interface of the back office in a rather advanced way, further exploring the possibilities Drupal offers in this area (patching the module and customizing administration interface CSS).

Specifically, we carried out:

• Visual improvements to Layout Paragraphs to make it more intuitive;
• Better positioning of the buttons;
• Adding custom illustrations to present each paragraph and make them easier to distinguish at a glance.

We can now capitalize on these advancements to offer them during our future use of the Page Builder module with Drupal.