A reimagined shopping experience on metro.ca.

In complementarity with the launch of the new loyalty program "Moi" (Me), Metro has recently unveiled a revamped version of its website for Quebec and Ontario.

As long-standing partners of the Metro group, we have been involved in several aspects of this website redesign, including the implementation of new customization tools and the creation of a unique identifier for all Metro group websites.

With this new website, the Metro group aimed to:

• Simplify the grocery journey and online transactional experience.
• Promote conversion by personalizing the user's shopping experience.
• Unify metro.ca with the websites of other Metro group banners.
• Showcase the diversity of products offered, especially local products.

This large-scale project, which spanned over approximately a year, required a multitude of expertise from our strategists and designers.

Design and User Experience

In order to help the Metro group achieve its online objectives, it was essential to align its website with industry standards and best practices.

We relied on the standards and trends of recent years to propose a responsive and clean design that adheres to accessibility best practices (WCAG 2.0 standards). We also streamlined the content to make it more concise and unified the Metro brand image across all pages of its website.

Personalization

The most significant aspect of the work we carried out revolved around personalizing the online grocery experience offered on metro.ca. We specifically addressed the following:

• Suggesting complementary products and recipes aligned with the user's shopping habits.
• Presenting the user with frequently ordered products (or products that align with their preferences) for easy addition to their cart.
• Providing the user with coupons for regularly purchased items.

To achieve personalized offerings throughout the customer journey, we implemented new technological components on metro.ca, using several tools. Here are a few of them:

• Coveo, a new artificial intelligence engine designed to generate targeted advertising content for each user.
• Criteo, a specialized tool for retargeting advertising.
• SAP, a comprehensive 360-degree Customer Relationship Management (CRM) system.
• XCCommerce, a module generating targeted offer coupons using information collected by the CRM.

We also adapted the entire metro.ca website to the Ontario market, as the programs, promotions, and components offered differ from the Quebec version.

Navigation

In order to enhance the user experience offered on the website, our team also streamlined the elements of the navigation menu to make it easier to navigate. Additionally, the menus have been unified across all banners of the Metro group.

Integration

The implementation of the "Moi" program was another important element to consider in our website redesign work. Indeed, this new loyalty program allows consumers to use their reward points across all banners of the Metro group (Metro, Jean Coutu, Super C, Brunet, and Première Moisson).

Thus, we integrated a Single Sign-On (SSO) authentication on metro.ca and all other sites within the Metro group's ecosystem. With this unique identifier, called "moiid," the user enjoys a new unified and secure login method to take advantage of the program benefits across all banners of the Metro group.

Mobile Application

In addition to the "Moi" program, another element that needed to be integrated into the website redesign was the Metro mobile application, which needed to be interconnected with metro.ca. To accomplish this, we collaborated with the NMédia agency to develop the entire Application Programming Interface (API) interface for the application.

In other words, our team translated the entire programming language so that the mobile application would work seamlessly with all the services offered on metro.ca.

A Seamless Grocery Experience

With the multitude of online grocery solutions emerging in the market, it's essential to stand out by providing users with a streamlined transactional experience, minimizing unnecessary elements. The work we've done in this redesign contributes to achieving this objective for the Metro group.

The personalization of the user experience will continue to improve and roll out across all Metro group banners over time. We'll be there to support the Metro group in the upcoming phases of this redesign.