Optimizing Technical
Product Listings

A/B Testing for Enhanced User Confidence and Decision-Making when finding technical products

Problem

Shopping online for technically complex products confronts users with a multitude of issues. Based on initial research, users were hesitant to buy technical products online without doing research and understanding their purchase. What is the deciding factor for users to click on a product from a product list? How can we increase overall customer confidence in finding and purchasing the correct technical product?

For this case study, I have chosen to write about one part of a very large research and design project. This is the initial phase of a larger design project.

Solution

Increase user confidence by refining language, layout and feature communication as well as offering a simplified solution for multiple types of products.

Company
: Owens Corning, Fortune 500
Role: Lead Strategist & Designer
Tools: Figma, UserTesting.com, Confluence (documentation)

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.

Users struggled to confidently choose the right insulation product due to:

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.

Design Variations

Once initial research was completed, as a team, we developed two versions that would be our first A/B test. Instead of testing our current designs on the site, we chose to create a brand new layout to test as our foundation to iterative design. Due to the high customer recognition of Owens Corning products, we decided to remove OC branding from the initial tests to focus more on features of the specific product listings versus getting feedback on branded elements. In addition, OC was in the process of updating all enterprise site content with a new brand design. As this was taking a long time, we chose this opportunity to understand areas of the site that could be improved through both a brand and a UI refresh.

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.

Version A

  • Product images remained of just the product itself.
  • Icons were updated to be included to match filters. Tooltips were excluded in this design.
  • Option to add to cart within listing page versus only on the product page.
  • Ratings of the product were added to the design as well as the overall product pages.
Desktop and mobile versions of a product listing component.

Version B

  • Product Images were replaced with installation images.
  • Vertical layout to test if this helps simpify the amount of information presented.
  • Cannot purchase from the listing page.
  • Tooltips were added into prototype to assist in understanding icons.
Desktop and mobile versions of a product listing component.

Results & Key Findings

Utilizing UserTesting.com, I conducted 24 interviews with homeowners. Half were shown Version A first and the other group were shown Version B first.

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 Tooltips Were Ineffective: Users ignored or misunderstood icons unless immediate explanations were provided.
  4. Too Much Information Led to Analysis Paralysis: Users struggled to make decisions when overwhelmed with data, reinforcing the need for concise, scannable details.
  5. Vertical Layout Improved Usability: Users found it easier to browse and compare products when listings were presented vertically instead of horizontally.

NExt Steps

As this project was just the beginning, our team presented our initial findings to cross-functional leaders including marketing, development, and product. Based on what we presented, we were able to secure backing for the next part of the project to update all listing pages and create the corresponding react components.