Problem Statement

• Its not clear what actions can be taken on a multi-sku PDP
  • Notes: Multisku PDPs do not clearly show buying options or other actions for the user to take. All actions are hidden under the "Buying Options" dropdown.
  • Description: On product details page, user expect to see ADD TO CART for the size they searched for. It is not intuitive to need to open a section of the page to see ADD TO CART.
  • Goal: Users can quickly add 1 or more products of varying quantity to their cart.
• Multisku products aren't in a logical order
  • Description: Products are given a differentiator which has a value assigned to a specific attribute. This drives the sort method. Users find some of the differentiator values incorrect. Example: 3/8 inch size might display in a list of products after 3 1/2 inch.
  • Goal: Products are ordered in a way that makes sense to our primary user.
• When users search for a sku, they can't find it when dropped on a multisku page
  • Description: If the customer does a precise search for a particular size of a product, they expect to see that size at the top of the page with ADD TO CART next to it. I watched one customer search for an exact size, then have to scroll through more than 125 sizes to find it from the list. Same thing happened after selecting the size in the filters - it did not bring that size to the top of the PDP or call attention to it in any way.
    Goal: Help customer to find the size they need without visually scanning long lists of product sizes.
• The existing product details page (PDP) on ferguson.com does not portray information in an organized manner that is friendly for online customers
  • Product indicators and icons are often missed or are misleading when they could clearly articulate meaning to customers
  • Customers cannot differentiate between the SKU web display name and the brand information
  • There is no easy way to check out on a Multi SKU PDP
  • Understanding the specification section (regulation specs vs product attributes) is misleading
• The PDP does not show our customers all the information they need to make informed purchasing decisions
  • Our customers cannot currently view the entire online catalogue without having an account (products before login)
  • The PDP does not display box quantity for customers who are interested in packaging information
  • Not all the product codes for a particular SKU are shown online
  • MSDS and Use and Care PDFs are missing for many SKUs
  • Many products have multiple videos that don't currently show on the PDP

Research

Additional research can be found here: /wiki/spaces/EMPR/pages/147363373

Baymard

Product Page Layout

https://baymard.com/premium/topics/449

• One of the two layouts that can perform well is the “One Long Page with a Sticky TOC” layout (#758), which is used by just 15% of e-commerce sites. However, of these sites, 66% get core implementation details of the actual sticky TOC design wrong (#784), undoing the performance gains possible with the layout. Overlooking the all-important sticky TOC implementation “details” are likely also why some sites have experimented with the sticky TOC design only to quickly move away from it.

• “Vertically Collapsed Sections” (#751) is the second product page layout type found to be consistently capable of performing well. It is used by 23% of sites. While that adoption rate is seemingly good, nearly every single site using the layout has severe oversights in their implementations, causing UX performance issues. The typical pitfall is only using the layout pattern for some of the product page content sections — not all — making it difficult for users to pick up on the navigational pattern.

Place Full-Width Cross-Sell Sections Last on the Product Page

https://baymard.com/premium/guidelines/738

The height of the cross-sell section: Tall cross-sells, in particular multi-line, are worse than narrow, simply because a tall section is a stronger “stop” indication, and because it will take more scrolling for users to notice if there’s anything relevant placed below the section.

The relevance of the cross-sells to the user: There’s also a difference between what the cross-sells are for and how unrelated users will find them. Cross-sells for alternative products (#810) will most often be interpreted as “end of page and onto something new” compared to cross-sells for supplementary products (#811), especially for highly relevant supplementary products such as accessories, upgrades, and parts, simply as users are observed to more perceive the latter as part of the content for the currently viewed product, and not as something new.

Always Place Product Videos in the Main Image Gallery

https://baymard.com/premium/guidelines/770

• If users have trouble finding videos it can be just as bad as not having videos at all.

Ensure the Primary ‘Add to Cart’ Button’s Styling Is Unique and Prominent

https://baymard.com/premium/guidelines/791

• When secondary buttons are styled similarly to the primary ‘Add to Cart’ button, it becomes needlessly difficult for users to add the product to the cart.

Display ‘Price Per Unit’ for Products Sold in Varying Quantities or Amounts

https://baymard.com/premium/guidelines/817

• Without ‘Price Per Unit’ users have a difficult time evaluating and comparing products sold in multi-quantity packaging or of varying amounts.

How to Display Price-Related Special Offers and Discounts

https://baymard.com/premium/guidelines/816

• Users will have difficulty understanding special offers and discounts if the information is confusing or difficult to see.
• When it comes to displaying the actual discount, there are two approaches: displaying the absolute discount (“$5 off”) or the relative discount (“20% off”).

Consider Using Individual ‘Buttons’ for Each Size Variation

https://baymard.com/premium/guidelines/850

• Some users will miss size options when they’re not immediately and directly visible.
• Instead of using a drop-down, with the size options hidden by default, consider exposing the size options by default, by using button-like selectors, to ensure that these crucial, oftentimes required, product variations are seen by users.

How to Improve the Scannability of the Spec Sheet

https://baymard.com/premium/guidelines/835

• It’s difficult for users to locate the attributes they care about in large unformatted specification sheets.
  • Spec sheets of just medium length (for example, anything above 20 specs) will need the group the specifications into sub-sections of related information, each with a title. The groupings and titles allow for much faster scanning, but also have the benefits of making the overall spec sheet less intimidating (by breaking up the “wall of specs”), and have the important benefit of ensuring related specs are always presented next to each other.

Provide ‘Add to Cart’ Functionality for Some ‘Supplementary’ Cross-Sells
https://baymard.com/premium/guidelines/821

• Some supplementary cross-sell require little or no further research for making a purchasing decision.

Testing

Additional Findings

Prototype tested: https://ferguson.invisionapp.com/share/HGQUH8P5VFT

Goals

• To see if users know what actions can be taken on a Multi-Sku PDP page

• Make sure Multi-Sku products are in a logical order

• Is Purchase history clear to our users

• To understand what is the most important information on a multi-sku PDP page

• Is it clear to our users what is available

Summary Findings

• For 4 of 6 testers availability was the most important information, followed by size or price
• 3 of 6 testers noticed the last purchased date and said "that's nice to have."
• All 6 testers said "small to large" is the best order for product sizes to display
• All 6 testers understood that 31 were available for local pickup, but 3 testers did not see the local pick up location (Newport News, VA.)
• All 6 testers could add the product to their list, but 3 of them did not recognize the meaning the small icon (next to Add to Cart).
• 3 of 6 testers had difficulty refocusing the page for a particular size until they clicked precisely on the size.
• 5 of 6 testers said the amount of information is just right. Only 1 tester said it has too much and would prefer the other sizes to be hidden.
• Final comments included: "Hide the other sizes until I click See All Sizes"'; "Let me enter multiple sizes all at once"; "Show the box quantity"; "Offer bulk discounts."