Above the Fold, Beyond the Limit

(08) Catalog
optimisation

In this project, I worked as a UX/UI Designer to solve critical issues in Heineken’s Salesforce promotion flow. The existing system couldn’t accommodate all promotion types, resulting in a disjointed user experience. Challenges included complex and offline-only promotions, poor discoverability (no filters and hidden in the main navigation), and a lack of clear communication on how promotions worked. For this project we conducted user reaserach. During the design phase, we also carried out a series of usability tests to validate and refine our solutions. We redesigned the flow to simplify access, improve clarity, and bring all promotions online, helping customers easily find and understand discounts—ultimately increasing average order value.

Client

Heineken

Date

Nov 2023

Industry

Consumer goods

Scope of work

UX Research

Product Design

Problem statement

How might we show users more products on product listing page in a single screen view?

Goal:

See more product cards in the screen view;
Evaluate different solutions to change between list view and gallery view on mobile.

Primary research

We began by reviewing best practices from the Baymard Institute, along with previous research conducted by Heineken on similar products. The research highlighted key product card attributes that are important to users, including Volume, Product Image, Discount Indicator, Subtotal, Price, and Product Name. An A/B test had previously been conducted comparing a vertical product card design to a smaller horizontal version. The results showed that users preferred the control variant (vertical). Based on these insights, we chose to move forward with the vertical layout for our designs.

We also checked how competitors display products in the catalog, and for what type of layout they opt in different cases.

Most of the time, users prefer list view when they are searching with specific requirements while they love grid view for exploring.

The list view

Provides ample space for various textual elements like titles, descriptions, and reviews, allowing users to make informed decisions based on detailed information. For users who read left to right (LTR), the list is typically scanned from left to right. Therefore, it’s crucial to position the most important elements on the left, with less critical information placed to the right.

Provides ample space for various textual elements like titles, descriptions, and reviews, allowing users to make informed decisions based on detailed information. For users who read left to right (LTR), the list is typically scanned from left to right. Therefore, it’s crucial to position the most important elements on the left, with less critical information placed to the right.

The list view

Is about images. It limits the textual elements along with the images. Users usually can scan 4-6 grid items at a time. Making some space around the grid can help users receive information easily.

Is about images. It limits the textual elements along with the images. Users usually can scan 4-6 grid items at a time. Making some space around the grid can help users receive information easily.

Our approach is to let users decide which view works best for them. We aim to make the most of both the list view and the grid view, but without forcing an equal amount of information on each. If both views are treated the same, the grid view may become too lengthy, diminishing the benefit of offering both options. By providing distinct experiences, users can naturally choose the view that best suits their needs, while also discovering the unique advantages of each.

Design phase

We developed several design iterations. In the grid view, four products are displayed within the screen, while the list view shows just one product. To enhance user experience, we introduced new icons at the top of the catalog and added an onboarding tooltip to help users familiarize themselves with the functionality. Check prototype for this design

We also considered adding a stepper overlay in the grid view to create more breathing room and a cleaner, more spacious layout. The goal of this design is to reduce complexity, simplify product card design by removing the stepper. Check prototype for this design

Although we chose not to proceed with the horizontal layout for the list view based on insights from previous experiments, we decided to create and test a prototype anyway. Check prototype for this design

Validating the designs

We launched an experiment consisting of focus groups, with a control group (the existing design) and three prototypes. The goal was to explore how we could show users more products on the product listing page within a single screen view. We aimed to identify which design customers preferred and understand why, through qualitative feedback. Additionally, we re-tested the horizontal card design to gather further qualitative insights. Previously, only a Usability Hub test had been conducted, where users preferred the control condition (the existing design).

Focus Group Details:

  • Duration: 1 hour 30 minutes

  • Location: Warehouses of the Peñuelas Distributor

  • Number of Participants: 4

We tested among different groupd of users with different digitalization level.

We launched an experiment consisting of focus groups, with a control group (the existing design) and three prototypes. The goal was to explore how we could show users more products on the product listing page within a single screen view. We aimed to identify which design customers preferred and understand why, through qualitative feedback. Additionally, we re-tested the horizontal card design to gather further qualitative insights. Previously, only a Usability Hub test had been conducted, where users preferred the control condition (the existing design).

Focus Group Details:

  • Duration: 1 hour 30 minutes

  • Location: Warehouses of the Peñuelas Distributor

  • Number of Participants: 4

We tested among different groupd of users with different digitalization level.

We launched an experiment consisting of focus groups, with a control group (the existing design) and three prototypes. The goal was to explore how we could show users more products on the product listing page within a single screen view. We aimed to identify which design customers preferred and understand why, through qualitative feedback. Additionally, we re-tested the horizontal card design to gather further qualitative insights. Previously, only a Usability Hub test had been conducted, where users preferred the control condition (the existing design).

Focus Group Details:

  • Duration: 1 hour 30 minutes

  • Location: Warehouses of the Peñuelas Distributor

  • Number of Participants: 4

We tested among different groupd of users with different digitalization level.

user #1

Digitization level: Low
App experience: Yes

user #2

Digitization level: Medium
App experience: New user

user #3

Managers are placing the orders 
Digitization level: High
App experience: No orders

user #4

Digitization level: Medium
App experience: Yes

Results and learnings

V4 with grid view was the most appretiated by users. Main learnings from testing include:

Maintain current view, save control as the primary view:
All users wanted to keep this option and even more the non-digital user. This option allows to have detailed information about a product. This is especially useful for users less familiar with online shopping, as they can get detailed information about the product at a glance.

Increased visibility:
Displaying multiple products in a single view allows users to explore a wider range of options quickly and efficiently. So, it helps to browse the distributor's catalog.

Time Savings:
Allows to browse more products without having to scroll. Users value the ease and autonomy to place an order whenever they want.

This view creates opportunities for us in the future to:
Can encourage exploration of related or complementary products. In the session, users commented that they would like product recommendations related to their purchases. 

Cross-Selling Potential: The compact view can facilitate cross-selling by displaying related products alongside the main product the user is viewing.

Focus group results deck prepared by user researcher with whom we worked on the project

Adoption

Users using switch to grid view CTA more than switch to list view CTA (21% vs 5% of users)

The adoption rate stands at 45%, surpassing the target of 40%. This suggests that a significant number of users find value in the feature. The key takeaway is that we should explore ways to improve the onboarding process for new features.

Next Project →

Above the Fold, Beyond the Limit

(01) Catalog optimisation

In the world of e-commerce, the product listing page (PLP) is often the first point of real engagement between users and the catalog. It's where browsing begins and decisions are shaped — often in seconds. For this project with Heineken, the challenge was clear:

How might we help B2B customers see more products at a glance without overwhelming them or compromising the browsing experience?

Through a series of iterative design and layout optimizations, our goal was to increase product visibility on the PLP within a single screen view — improving product discovery, reducing scroll fatigue, and supporting faster decision-making.

This case study walks through the thought process, user insights, design principles, and trade-offs behind compacting content without compromising clarity — turning limited space into more meaningful exploration for Heineken's business customers.

Client

Heineken

Date

Nov 2023

Industry

Consumer goods

Scope of work

UX Research

Product Design

Above the Fold, Beyond the Limit

(01) Catalog optimisation

In the world of e-commerce, the product listing page (PLP) is often the first point of real engagement between users and the catalog. It's where browsing begins and decisions are shaped — often in seconds. For this project with Heineken, the challenge was clear:

How might we help B2B customers see more products at a glance without overwhelming them or compromising the browsing experience?

Through a series of iterative design and layout optimizations, our goal was to increase product visibility on the PLP within a single screen view — improving product discovery, reducing scroll fatigue, and supporting faster decision-making.

This case study walks through the thought process, user insights, design principles, and trade-offs behind compacting content without compromising clarity — turning limited space into more meaningful exploration for Heineken's business customers.

Client

Heineken

Date

Nov 2023

Industry

Consumer goods

Scope of work

UX Research

Product Design