How METRO Markets boosts traffic and conversion rates through automation

• Headquarters: Düsseldorf, Germany
• Framework: Angular, Vue, Symfony, Optimizely

METRO Markets is a wholesale online commerce company. As Germany and Europe’s leading marketplace, they focus on B2C and B2B towards a wide range of non-food products for the hotel, restaurant, and catering industry. Thousands of customers have supported their businesses using METRO Markets as a foundation for their restaurants, food stalls, hotels, bars, and more. With over 600,000 products and a passion for innovation, METRO Markets realized they needed to equip themselves with a robust technological infrastructure that could adapt to the times.

Using Storyblok, METRO Markets has pioneered groundbreaking new projects, such as AI content automation, idea generation, A/B testing, and personalization. As a result, METRO Markets can generate over 200 category pages in just 7 minutes and achieve 10 category pages in 3 different languages in 3 minutes.

METRO Markets’ requirements to efficiently grow and scale

METRO Markets developed an in-house CMS run by its tech team. This allowed them to create SEO content for categories in the marketplace. However, its process for this was basic, creating bottlenecks and limiting innovation in the long run. The team had to make a decision: keep developing this internal system or switch to an external platform.

With multiple product categories running the METRO Markets marketplace, the team decided to search for an external CMS that could handle the growth and innovation they needed. With this in mind, they had a few requirements the new setup would have to provide:

• The ability to build flexible custom components that can be used across multiple projects (like promotional pages, best-seller campaigns, and more) to improve SEO and traffic
• A user-friendly system so that different teams could easily adopt and learn
• Integration capabilities with a best-of-breed selection so the tech team could use various tools for campaigns and promotions, as well as A/B testing and analytics tools
• Centralization of all content pieces in a unified platform, promoting streamlined workflows alongside user roles and permissions

While transitioning a considerable amount of content from their old in-house CMS, the METRO Markets team had to ensure the moving parts could be connected and readily available during the migration. The team identified a headless CMS as the best option for such a move. After an in-depth search, the team settled on Storyblok as their CMS of choice.

Opening opportunities: How Storyblok has transformed content experiences

The move to Storyblok started with a simple Proof of Concept (POC)]: implementing internal content pages. The team started connecting, creating, and integrating more components. Storyblok seamlessly integrated these elements alongside global bloks for main page navigation, including their:

• Search result component
• Product, market, and seller data
• Marketplace translations
• Sitemaps
• SEO content
• Category services
• Personalization features

By this point, METRO Markets' homepage, along with all content for its different markets, was in Storyblok.

They achieved their main requirement: to create a flexible way to add content and visuals to make their business more scalable. In addition to this, METRO Markets was also able to use Storyblok to:

• Onboard new users and content editors easily and efficiently based on Storyblok’s compatibility and user-friendliness
• Quickly create new components to adapt to market needs as efficiently as possible
• Configure flexible content for their website in multiple languages and markets
• Enable a best-of-breed approach to connect within components to enhance the overall content experience for their buyer audience and increase traffic with a click-through-rate (CTR) of 12% for category product pages
• Allow the old in-house-built CMS to be still backed up and connected to Storyblok during the migration process, with a Feature Flags approach (a switch that helps decide where the data should come from) and in-code approach (check if specific data or content is coming from Storyblok or the in-house CMS)

With this vision in mind to streamline content creation and create more components seamlessly, the team maintains both data sources (Storyblok and the in-house CMS) for specific categories and decides what they want to display over time.

However, there was more to METRO Market's implementation journey. The team wanted to go above and beyond in using Storyblok as a tool to enable scalable innovation.

Using Storyblok for innovation projects

METRO Markets' site has many product categories to cater to a wide audience, and most of its traffic comes to these pages. Boosting traffic to those category folders, pages, and sub-pages was important. This created a huge number of pages that needed to be dealt with. The issue became a matter of quantity, not quality: content managers and editors could not tackle the sheer volume of pages in a short time.

This kickstarted a series of innovation projects for the tech team at METRO Markets, defined by three pillars to streamline their content operations and innovate for the market:

• Idea Generation
• A/B Testing & Personalization
• Content Automation with AI

Idea generation: Connecting the Storyblok API

The tech team started another POC through the Storyblok API, with multiple category pages and Stories, using atomic components from earlier stages of their implementation. They fed the API a file with static data and a list of category pages they wanted to update. The command was sent to the API. From there, the team could automatically update bulk pages to Storyblok. As a result, they generated over 200 category pages in just 7 minutes. This was conducted through a PHP web application framework called Symfony.

But they didn’t stop there. METRO Markets wanted to test how granular they could get by targeting specific audience groups that use their services– retailers, hotels, restaurants, event planners, schools, etc. The idea was to create 10 impactful category pages across 3 markets (German, French, and Spanish). Done manually, this takes a lot of time. However, API-driven automation does it all at the click of a button in 3 minutes.

Taking idea generation one step further

While idea generation via an API has streamlined developer and content editor processes, the tech team is working towards rolling out the capabilities to other teams. For example, they’re aiming to repeat the process with product details for the commercial team to utilize towards banners, callbacks, and carousels.

Previously, documents had to be converted into PDFs for guidelines and legal content, then given to the developer team. The element had to be hard coded to be shown on the platform. This became a lengthy and tedious process. By sending this through the API mechanism, the same logic would apply to uploading and converting these documents to exist online automatically. On top of this, translations can easily be made via API to reach all relevant markets.

A/B testing & personalization: Connecting Storyblok with Optimizely

The team also created a custom plug-in component for A/B testing, connected to Optimizely within Storyblok’s Visual Editor. Thanks to this, the content editor can choose which experiment or variation to conduct within the component—for example, putting the same banner component at the top of a page but switching the image inside it to see how it performs with a different audience.

In addition, a personalization component was created for logged-in and non-logged-in users. With the component, editors can show different content to direct users on different customer journeys. This can be extended to B2C and B2B customers and their customer tiering.

Looking to the future: Content automation with AI

The tech team uses artificial intelligence (AI) to automate personalization, content, and idea-generation elements. Data structures are the skeleton of content pages.

With this tool, a status file is created to generate data structures based on YAML files (a human-readable data serialization format used to configure files and data exchange between programming languages). This is then passed through the Storyblok API to generate the data structure in a specific format. From there, the team created templates based on these data structures, ordering the ask to the AI system in different versions (parent categories compared to child categories). While it is in the code, the plan is to have an application integrated inside Storyblok that can enable marketers to create their template/layout to apply to specific pages via AI in the future.

METRO Markets’ ultimate goal is to streamline content operations and processes through innovative projects facilitated by Storyblok, whether idea generation, content automation with AI, A/B testing, or personalization for better user experience and customer journeys.