Refining Product Listings Through A/B Testing

A/B Testing initiative to optimize product listing pages for Enhanced User Confidence and Decision-Making when purchasing

Research

I began this project by establishing our baseline for current user experience on the site based on user session recordings and heat maps from HotJar as well as data from Adobe Analytics where I analyzed user journeys from the last year across multiple product listing pages, all for technical products like insulation or composites.

User research revealed several critical issues with the product listing pages. High bounce rates indicated that users were leaving the site without meaningful engagement, and low click-through rates suggested difficulty in finding relevant details. Additionally, the filtering system was unintuitive, leading to underutilization and frustration. Many users experienced cognitive overload due to excessive information, and a lack of clear visual hierarchy made it difficult to scan product details quickly. These barriers prevented users from effectively navigating the product listings and making informed purchasing decisions.

Key Challenges:

• High Bounce Rates: Users were not engaging deeply with product listings.
• Low Click-Through Rates: Users struggled to find and access detailed product information.
• Cognitive Overload: Excessive information made it difficult for users to process details efficiently.
• Poor Filtering System: Users found filtering options unintuitive and avoided using them.

Using usability tests, heatmaps, and user surveys, we identified key pain points: excessive cognitive load, poor visual hierarchy, and an inefficient filtering system. Users expressed frustration over the overwhelming amount of information displayed on the page. Important details like pricing and product ratings were not easily scannable, causing hesitation and disengagement. Additionally, the filtering options were confusing, making it difficult for users to refine their searches effectively. These insights shaped our approach to improving the user experience.

Key Pain Points:

• Heatmaps showed users ignored key details: Product images received more focus than pricing and ratings.
• Usability testing revealed navigation frustrations: Users struggled to locate and refine search results.
• Survey data confirmed user dissatisfaction: 65% of respondents wanted clearer product details and easier filtering.

In addition, I worked with marketing and product leaders to confirm the direction of the project and what features they would like to see as well as any requests they may have.

Initial A/B Test Designs

Based on initial design research, we wanted to test how users would respond to different layouts of information as well as what is more important to them when looking for specific products or businesses. As Owens Corning had many other types of lists including professionals such as roofing contractors or sales people as well as the option for single-SKU or multi-SKU products. Due to this level of complication, we created designs of each kind of listing with A/B tests for each.

All of this forethought and strategy allowed us the ability to conceive updated ideas without being hindered by past branding standards. It gave us a great jumping off point for creating react components that would be used across the site for different reasons including professional listings of businesses, sales individuals and other products with different technical needs.

1. Product Listing Single SKU: Listings for products that are singular in nature without other options. Can include technical products like insulation or composites.
2. Product Listing Multi SKU: Listings for products with multiple options of purchase. Includes insulation, roofing tiles and insulation.
3. Professional Listings: Listings for businesses that are within the network of Owens Corning or sales people within the company.

Results & Findings

Utilizing UserTesting.com, I conducted 24 interviews with homeowners. Initial findings were as follows:

1. Clear Language Increased Confidence: Users felt more assured in selecting the correct product when familiar industry terms were used instead of just brand-specific jargon.
2. Pricing Was Important, But Not the Deciding Factor: While price influenced final selection, users prioritized product fit and specifications.
3. Icons without Context were Ineffective: Users ignored or misunderstood icons unless immediate explanations were provided. Icons are helpful for user when identifying features and attributes but placement within each listing matters for proper viewing.
4. Too Much Information Led to Analysis Paralysis: Users want the most important information presented first or easily identifiable. The most important data for each type of listing varied. For products it was details, description and features while for professional it was business name, location and features. This implies that when a user is searching for either a product listing or location, they are looking specific data points that will help guide their decisions. As long as users could identify what was most important to them, they could make an informed decision
5. Vertical Layout Improved Usability: Stacking UI elements does not a hinder a users ability to find the information they are looking for. Out of the options presented to users, when there were stacking of multiple elements (heading, post head, features, etc), users were still able to find the data they wanted due to the differentiation of each feature.

After a 4-week testing period, the optimized product listing pages yielded substantial improvements. The click-through rate to product pages increased by 12%, indicating greater user interest and engagement. Bounce rates decreased by 8%, demonstrating that users were finding the content more relevant and accessible. Additionally, filter usage increased by 15%, validating the enhancements made to the filtering system. These results confirmed that refining the visual hierarchy and simplifying navigation led to a more effective and user-friendly browsing experience.

Key Metrics

1. +12% Increase in click-through rate to product pages
2. -8% Reduction in bounce rate, showing improved engagement
3. +15% Higher filter usage, validating UI enhancements

Final Designs

After the 4 weeks of multiple testing rounds and iterations, here are the final designs that were landed upon after review and edits from the development and product teams.

Learnings & Next Steps

A data-driven approach proved to be essential in guiding design decisions and ensuring meaningful UX improvements. Prioritizing clarity and essential information enhanced user engagement, making product details more digestible and actionable. Furthermore, simplifying and refining the filtering system boosted usability, leading to increased adoption and improved overall site navigation.

Takeaways:

1. Clarity in design drives engagement: Organizing product details effectively helps users make decisions faster.
2. A/B testing provides actionable insights: Data-driven design iterations led to measurable success.
3. Usability improvements encourage feature adoption: Users were more likely to utilize filters when they were intuitive.

Building on these findings, the next phase of optimization will focus on integrating micro-interactions and personalization to further enhance the shopping experience. By tailoring product listings based on user behavior and preferences, we aim to drive even higher engagement and conversion rates.

Future Enhancements:

1. Personalization: Displaying recommended products based on browsing history.
2. Micro-interactions: Adding hover effects and animations for better user feedback.
3. Internationalization: Data-driven design iterations based on international and globalization of product.