B2B

METRO B2B Online Shop

Client

Metro AG

My Role

Prototyping, UXR

Platform

Desktop, Tablet, Mobile

Duration

2016-2020
M-Shop Rebrush

Streamlining B2B Wholesale Experience for METRO HoReCa Clients

Introduction

In an era where hospitality businesses are facing myriad challenges, METRO, a B2B wholesale company, took on the mission to cater to the needs of HoReCa businesses: Hotel, Restaurant, and Catering as well as bars, canteens and cafés. Understanding the diverse challenges faced by this industry, METRO set out to revamp its user experience to better assist its clientele. This case study chronicles the journey of METRO's UX transformation, emphasizing the user-centric approach adopted to address the unique challenges of gastronomic businesses.

Understanding the Landscape

As METRO delved into the world of HoReCa, it encountered a rich tapestry of establishments, each with its own set of challenges. The HoReCa landscape proved to be a multifaceted environment, comprising large-scale hotels, catering companies, and smaller, independent cafes, bars, and canteens. Here, every business, regardless of its size, played a vital role in shaping the fabric of the industry.

venn diagram agile framework

Diverse Needs

Different businesses within HoReCa faced distinct challenges. For instance, a hotel might require bulk orders of linens and toiletries, while a restaurant might need fresh produce and kitchen supplies.

Time Constraints

Busy kitchen staff and restaurant managers often had limited time to manage inventory and place orders.

Different Ordering Settings

A cook might need to order from a mobile phone in the kitchen, whereas an office manager might order from a desktop in the office, requiring a platform that is flexible and accessible across various devices and settings.

Seasonal Demand

Fluctuating demand for certain items based on seasons and trends made inventory management even more challenging.

Defining the Problem

Armed with insights, we identified these key issues.

double diamond kristin wichern

Inconsistent User Experience

The ordering process was inconsistent across different devices and settings, causing frustration and errors.

Lack of Customization

The one-size-fits-all approach of METRO's platform did not cater to the diverse needs of different businesses.

Complex Price Display

HoReCa businesses found it challenging to understand METRO’s pricing structure, leading to discrepancies and misunderstandings.

Language and Cultural Differences

HoReCa businesses with diverse cultural backgrounds and languages faced challenges navigating and understanding the platform.

Inefficient Ordering Process

Ordering from METRO was often time-consuming and required extensive manual input, causing delays, exacerbated by the varying settings from which orders were placed.

Limited Product Visibility

Customers often struggled to find and compare products due to limited visibility and poor categorization.

Solve the right problem with the right solution.

Jared Spool

Ideation and Prototyping

To address these issues, we brainstormed ideas

design thinking visual

Streamlined Ordering Process

A simplified, user-friendly ordering system that saved time and minimized errors, adaptable to various ordering settings.

Personalized Recommendations

Utilizing data to provide personalized recommendations based on the type of business and previous orders.

Consistent User Experience

Ensuring a consistent and intuitive ordering experience across all devices and settings.

Enhanced Product Visibility

Introducing a smart categorization system and an advanced search function for quicker and more efficient product discovery.

Transparent Pricing Structure

Simplifying the pricing structure and providing clear, transparent pricing information to customers.

Homepage

On the homepage, the goal was to create an easier entry point for different customer types and assist in recurring tasks. During research we found out that small business customers are more likely to respond to marketing assets and actively seek bargains, whereas large businesses using one account can benefit from multiple shopping lists, allowing different employees to efficiently purchase various items using different lists.

small horeca businesses

Promotions & discounts

The customers in this group are quite diverse, but generally more responsive to marketing assets compared to large business customers. They tend to actively seek bargains, making them more amenable to discounts and catalogues compared to larger business clients.

Customization

In a logged-out state, new users will experience little or no personalization, whereas the homepage of a logged-in customer displays their lists and recommendations based on previous purchases.

Inspirational content

Small HoReCa businesses are open to inspirational content; therefore, we introduced a teaser concept to captivate their interest.

large horeca businesses metro

Recently used

For heavy users, accessing the main tools they want to use directly after login is very beneficial. They often restock from previous orders. This is particularly true for restaurants, where customers usually go through their stock and reorder everything that is missing or running low.

Lists

Customers buying from several shopping lists typically indicates that different employees within a business purchase various items using different lists. These lists may categorize items based on different needs, occasions, or preferences, ensuring an efficient and organized shopping experience for the business, all under the same account.

Minimal inspiration

We found out that large HoReCa customers usually buy the same kind of products regularly. In many cases they didn’t care so much for a bargain, but rather on product quality or in-time delivery. Some customers even requested an advertising-free working environment which lets them complete their tasks as fast and efficient as possible.

Search

During our conducted user feedback days, participants were asked to fill out the User Experience Questionnaire form regarding the search function. The results indicated above-average scores for attractiveness, perspicuity, efficiency, and stimulation, with good ratings for dependability and below-average rating for novelty. We found out that we had to tackle different topics.

metro search bar
search metro

Backoffice Rework

Ensure good product findability by implementing a logical and efficient clustering of article data. This organization enhances search results and simplifies navigation, improving the overall user experience.

Search Suggestions Flyout

Optimize the search flyout by providing instant, relevant, and clear suggestions with a concise presentation. Consider adding visual cues for better usability and attractiveness.

Search Results Page

Ensure highly relevant results displayed in a clear, organized layout. Provide filtering options and incorporate visual cues to help users quickly identify relevant items.

search suggestionsmetro search results

Checkout

Through user interviews and surveys, it became evident that customers struggled with various aspects of the checkout flow, from the comment function to product availability and cart management.
METRO's addressed these pain points and enhanced the checkout experience for its B2B customers.

1. Difficulty using the comment function during checkout to specify product characteristics.

2. Frustration when desired products were out of stock.

3. Loss of overview of products in the cart.

metro did you forget feature

Did you forget

A reminder feature to prompt customers about potentially forgotten items based on past shoppping experience, reducing the likelihood of incomplete orders.

Restocking

A streamlined feature allowing customers to initiate a restock order directly from an empty cart, enabling quick replenishment of frequently purchased items with a single click.

Alternatives for Out-of-Stock Articles

Providing customers with alternative product suggestions when their desired items are unavailable, helping them find suitable substitutes quickly.

Side Cart

Introducing a side caddy feature within the checkout flow, allowing customers to view and manage their cart contents easily without losing sight of the checkout process.

Implementation and Results

The "Did you forget?" feature increased cart completion rates, reducing abandoned carts.

Restocking notifications improved customer satisfaction by keeping them informed about product availability.

Alternatives for out-of-stock items and the side caddy feature streamlined the checkout process, enhancing overall user experience.

Conclusion

The effectiveness of user experience research (UXR) has been instrumental in transforming METRO’s online shopping platform for B2B customers in the HoReCa sector. By identifying and addressing specific user challenges, particularly in the checkout process, UXR played a pivotal role in driving significant improvements in customer satisfaction and engagement.

The implementation of a new checkout system, informed by user feedback, resulted in a marked decrease in cart abandonment rates and an increase in conversion rates. These metrics indicate that customers are not only completing their purchases more frequently but also experiencing a more intuitive and user-friendly interface. The positive impact on customer satisfaction scores further underscores the success of these enhancements.

Additionally, the new system facilitated larger purchases through effective upselling and cross-selling strategies, contributing to an increase in the average order value. Enhanced loyalty was also observed, as evidenced by a rise in repeat purchase rates.

Overall, METRO’s commitment to leveraging UXR has yielded measurable benefits, reinforcing the importance of user-centered design in optimizing online shopping experiences. As METRO continues to refine its platform, the insights gained from UXR will remain essential in driving ongoing performance improvements and ensuring the company meets the evolving needs of its customers in the competitive B2B wholesale market.

Continue to next project

Peek & Cloppenburg Product Details Page