In the fiercely competitive landscape of Belgian retail, particularly within the online groceries sector, the imperative to attract new clients is paramount. With the goal of enhancing sales and expanding its customer base, the focus shifts towards pioneering a new shopping experience and journey that not only entices potential customers but also offers innovative journeys for product orders.

Collect&Go is a popular online groceries webshop in Belgium, operated by Colruyt Group. It allows customers to conveniently shop for groceries online and then pick up their orders at designated collection points or have them delivered to their homes.

Recipe 2 basket

Marketing & conversion team from Collect&Go created partnerships with several Belgian recipe websites to be present on each recipe and give the opportunity to convert ingredients from the recipe to orderable products on the Collect&Go webshop.

List 2 basket
‍
On the other hand, they wanted to give the possibility to Colruyt.be customers to convert the shopping lists created on the website to real orders on the Collect&Go webshop.

Define the user experience around the development of a streamlined module aimed at optimising the shopping experience for customers. Central to this solution is the imperative of simplicity, ensuring that the user interface is intuitive, easy to navigate, and requires minimal steps to complete an order. Recognizing the need for efficiency, the module is designed to enable customers to place their orders swiftly, catering to their desire for a quick and hassle-free shopping process.

Crucially, the module offers customers the ability to view a curated list of products meticulously aligned with either the ingredient productisation from selected recipes or the items they have added to their Colruyt online shopping list.

By seamlessly integrating these features, the solution not only enhances user satisfaction but also facilitates the conversion of shopping lists into tangible orders, ultimately fostering increased engagement and loyalty among customers.

In response to the identified challenges of enhancing user experience and increasing conversions for the Collect&Go groceries webshop, a strategic solution has been devised: the integration of an additional module leveraging the solutions and technology provided by Smart with Food.

At the core of this solution lies the innovative capability to seamlessly transform recipes into actionable shopping baskets. The newly developed module extends this functionality to external partners, enabling their customers to place orders directly through the Collect&Go webshop.

Recipe 2 basket
‍
The initial project aimed to create synergy with partners' recipe websites, enhancing sales conversions by enabling users to shop for external recipes and convert them into an orderable shopping list with precise quantities. The process was designed to be completed in just a few clicks, with the integration of the existing Smart with Food products converter as a key requirement.
‍
List 2 basket

Another business requirement was to establish synergy between Collect&Go and Colruyt.be. "Colruyt Laagste Prijzen" aimed to enable customers to convert their shopping lists from the Colruyt.be website into orderable baskets on the Collect&Go webshop with a single click. To enhance efficiency, it was proposed to reuse the flow and pattern developed for the recipe-to-basket conversion process.

The approach begins with the Discovery phase, a fundamental step in UX and product design. During this initial stage, extensive research is conducted to gain a comprehensive understanding of user needs, market trends, and competitor analysis. We analyse the customer journey and look at the insights and analytics of the website to identify the key steps of the purchase process and the most efficient customer journey. This phase served as the bedrock for crafting a user-centric solution that resonates with the customers while addressing pain points and aspirations effectively.

Following the Discovery phase, the project progresses to Business Requirements validation and Minimum Viable Product (MVP) development.

Leveraging the key insights gleaned from the research phase, including identified pain points, technical dependencies, and market trends, the project team collaborates with both the product and marketing teams to validate business requirements. Through this process, a prioritisation framework is established to distinguish between "must-have" functionalities critical for the initial MVP rollout and those deemed suitable for subsequent implementation phases.

By aligning with stakeholders on the core features essential for delivering value to users and achieving business objectives, the project ensures a focused and efficient development trajectory while remaining adaptable to evolving needs and opportunities.

Conceptualisation: Based on the insights gathered during the Discovery phase, UX/UI the designer brainstormed and conceptualised various solutions to address user needs and pain points. It takes the form of mid-fidelity wireframes using existing design system components.

Prototyping: The designer created interactive prototypes based on the assumptions and solutions the business would like to test for MVP.

Usability Testing: Different scenarios were tested with users regarding the two different customers journey applicable for the new module:

- Scenario 1: End-Users from Colruyt.be creates a shopping list on the website and click to place his order directly on the basket page of theCollect&Go webshop.

- Scenario 2: End-Users from external recipe website click on the recipe collect&go button to productise the ingredients from the recipes into products from Collect&go and order them directly from the basket page of Collect&Go web-shop.

Finalisation: The design was finalised based on feedback from user testing and Collect&Go stakeholder input. It involved creating detailed design specifications and assets for development teams to implement.

After validation by the Business, functionalities from the new module were split into pieces to be added in the sprint agile development process for MVP and further implementations.

UX/UI designer was involved in the development phase with the front-end team of Collect&go to translate design in the production environment and test that it corresponds to the expected user experience.

During the exploration phase of our project, we identified the need for a new horizontal product list item to support the "recipe to basket" module. This requirement emerged as we analysed the user experience and determined that an improved list item design would enhance the functionality and usability of the module. Consequently, we developed this new component, ensuring it aligns with the overall design and usability goals of the project.

This new horizontal product list item has been successfully integrated into the "recipe to basket"as for “list to basket” module, contributing to a seamless and efficient user experience.

The new product list item, developed collaboratively by the ColruytGroup Design System team, Collect&Go UX designers, solution analysts, front-end developers, and testers, has been successfully integrated into the design system as a versatile component. This implementation allows designers and front-end developers across all Colruyt Group brands to utilise it. Set to become the default horizontal product tile on the Collect&Go website, this component was thoroughly refined during workshops and design sessions, addressing various features such as promo visualisation, quantity display, handling unavailable products, searching for alternatives, and selection.

The "recipe to basket" and "list to basket" modules have been successfully released and are now operational, with users already adopting these new features.

As of today, Collect&Go customers can have recipes from a number of culinary websites transferred to a shopping list and added to their shopping cart. They are added in the right quantities in one click.

Until now it was already possible to place the recipes on the websites of Collect&Go and Colruyt in the online shopping basket, from today this is also possible with recipes that can be found on culinary websites 15 grams, Lekker van bij ons, Goestjes, Een Lepeltje lekkers, Met 5 aan tafel and Secretos del Sur.

More partners will be added to that list in the future.

Colruyt.be and Bioplanet.be customers are now able to convert their shopping lists into orders in 1 click directly on the Collect&go website.

This project marks a significant milestone for Collect&Go, as it is the first to integrate a component from The Colruyt Group Design System. The newly defined component, initially created for this specific project, will be extended to other parts of the website, replacing the outdated horizontal list component.