BÉIS Product Listing Page

Redefining how users interact with different collection pages.

TIMELINE:
2 months

TEAM:
BÉIS E-Commerce team and developers

MY ROLE:
Senior UX/UI Designer

TOOLS:
Figma, Asana, Hotjar, Nosto

THE NEED:

An optimized PLP is crucial, as it usually initiates the flow to checkout during the user's consideration phase.

As our product catalog continues to expand, we face challenges in effectively merchandising products across diverse collections. Each collection appeals to different audiences, influenced by factors such as user navigation paths, search history, and past purchases. This complexity necessitates a tailored approach to PLP, yet our current setup lacks the flexibility to adapt to varying merchandising strategies. Our goal is to establish a flexible PLP system that enhances user engagement and maximizes sales opportunities by ensuring that the merchandising approach aligns with the specific needs of each collection.

01. THE PROBLEM + GOALS

02. DISCOVERY

USER RESEARCH:

Based on our data analysis and user research findings, here are the key trends observed in user behavior across our platform:

  1. Cart Activity: Users often add products to their cart directly from collection pages using the Add to Cart button and adjust their choices within the mini cart. In contrast, the wishlist feature is rarely utilized.

  2. Search Preferences: Color is the main criterion for product searches. Many users opt for the search bar instead of sorting and filtering options, likely due to the filtering not being effectively configured for easy navigation.

  3. Shop All Page: Users demonstrate strong browsing intent, but often encounter frustration with pagination, leading them to prefer the search bar when products are difficult to find.

  4. Navigation Enhancements: Engagement with Nosto, our AI-powered merchandising tool for personalized recommendations, improves navigation. Users typically scroll to the bottom of pages, resulting in more clicks on product detail pages.

  5. Desktop vs. Mobile: Desktop users make greater use of hover features to view product videos, which are not available on mobile devices.

  6. User Decision-Making: Returning users and those familiar with the brand tend to make quicker decisions about adding items to their carts compared to new users.

COMPETITIVE ANALYSIS:

I conducted a high-level competitive analysis of 16 brands, revealing the following key trends:

  • Badging: All but one brand utilized badging.

  • Exposed Filtering: Approximately 50% of the brands featured exposed filtering on desktop.

  • Mobile Navigation: About half of the brands used hotlink filtering or subnavigation categories on mobile.

  • Product Grid Optimization: 25% of the brands leveraged the area below the product grid with:

    • Wayfinding suggestions

    • Promotional, educational, or branding blocks

    • A “Load More” call-to-action instead of pagination

STRATEGIC RECOMMENDATIONS:

The following strategic recommendations are based on our user data, competitive analysis, and SEO insights:

  1. Engagement Optimization: Maintain the Add to Cart CTA due to strong user interaction.

  2. User-Friendly Navigation: Implement a "Load More" button for browsing products and increase the product display count to streamline the shopping experience.

  3. Enhanced Visuals: Integrate color swatches and replace product videos with static images to quickly capture user interest in the primary features of the product.

  4. Streamlined Filtering: Enhance the filtering process with robust criteria options and a more organized panel for better user management.

  5. Design Simplification: Remove the wishlist icon from product cards to reduce clutter.

  6. Improved Navigation Structure: Add subcategories and enhance breadcrumbs for better wayfinding and SEO benefits.

  7. Content Enrichment: Expand collection page titles with additional information and introduce sections for user-generated content and branding.

These changes aim to enhance user experience, boost engagement, and improve overall site performance.

03. REDESIGN PROCESS

When planning this redesign, I applied divergent thinking exercises to explore various use cases, ensuring we accommodate a broad range of potential future experiences.

I’ve narrowed down customizability to the following components:

  1. Collection title (H1 and subtext)

  2. Secondary navigation (Filter UI)

  3. Flavor tiles

  4. Bottom of the page components

SORT/FILTER:

Our current sort and filter panel lacks the configuration needed for users to easily navigate product options. To address this, I focused on two key goals: enhancing clarity and prioritizing essential information.

A cleaner interface not only improves the visual experience but also consolidates all filters into a single panel, allowing users to make multiple selections without navigating through multiple layers.

Prioritizing important information involves placing the most frequently used filter categories at the top of the list. I also introduced a toggle feature that allows users to view only in-stock items, and the color filters are now exposed rather than collapsed, as these are typically the primary search criteria for users.

Old filter flyout

04. FINAL WIREFRAMES:

REDESIGN RESULTS

Conversion Rate:
Saw a significant increase from 0.85% in October to 1.38% in December, highlighting improved user engagement and a more effective shopping experience.

Add-to-Cart Rate:
Experienced a slight but positive uptick, rising from 5.49% in October to 5.65% in December, indicating a more seamless path to purchase.

Bounce Rate:
Decreased from 10.38% in October to 7.89% in December, indicating a more engaging experience that kept visitors exploring longer.
Top Clicks:​

  • Load More button

  • Product Cards

  • Filter *highly engaged​​

With our newly re-designed and optimized Sort/Filter functionality, conveniently combined into a single panel, users are now actively utilizing both sorting and filtering options. Previously, users primarily relied on sorting alone due to the lack of optimization in our filtering feature. We saw a 141% increase in time spent using filters due to higher traffic and deeper engagement. A 50% increase in filter application per session, showing higher engagement.

FUTURE A/B TESTING

I'd love to A/B test either removing the CTA on mobile for Phase 2. Our PDPs have shown an upward trend in conversion rates since the overhaul, and encouraging users to engage more deeply with product education could further boost both conversion rates and purchase intent.