PDP

Owned by Jesilyn Barnes (Deactivated)
Last updated: Jun 02, 2019 by Karen Jennings
12 min read

Below is a detailed summary of the current design of the PDP (2019 Redesigned PDP). For information on the previous design from Phase 1 and Phase 2, see this page.

Discoveries

tbd

Notable Changes

  • Page restructured
  • Various information adjustments. Re-organized into more logical pieces. De-cluttered. Boost scannability, offer more customization.
  • Add to cart and quantity steppers interaction enhancement. 
  • Informational additions (more product codes, loyalty indicator, revised purchase history, 
  • UI revamp

Page Variations

  • Permanently discontinued product
  • Replaced product
  • In-store only product (restricted)
  • Ship-only product (online only)
  • Family w/ sizes table
  • Combo product
  • Logged out view
  • UoM (or call this out somewhere else?)


Questions

  1. Discontinued Products:
    1. How should discontinued products be handled?
      1. Clear messaging that it is no longer available, it may still be available from vendor but not sold by us, no add to cart on the page
    2. What are the different messages we display for status?
      1. Replaced or discontinued, web content does replacements manually
    3. Is "This product has been replaced by XYZ" the only messaging we use?
      1. This messaging is preferred since a product may not be discontinued we may just stop selling it.
    4. Example discontinued products:
      1. https://www.ferguson.com/product/flowserve-nordstrom-figure-143-2-in-cast-iron-200-cwp-flanged-wrench-plug-valve-n143k/_/R-1260449?searchKeyWord=n143k
      2.  https://www.ferguson.com/product/do-not-use-replaced-by-db93-01987a-samdb9313396/_/R-7557893?searchKeyWord=replaced
  2. Enrich product description:
    1. What type formatting to product descriptions are needed?
      1. Just to be able to write content, adding product information not necessarily formatting but be able to add paragraphs, graphics, and charts to describe the products.
    2. How will this formatting be used?

Add Status (out of stock vs discontinued)

https://conversionxl.com/blog/out-of-stock-product-pages/

https://baymard.com/blog/handling-out-of-stock-products

  • a product has been discontinued or deprecated, then it is truly unavailable and users should be informed of that fact by clearly marking the product as “discontinued” or “deprecated” – and cross-sells should be heavily promoted.
  • the alternative products should be shown at the very top of the product page, for example as a replacement for the “Buy” section, or even injected between the main navigation and product page contents. Can also link to parent/category page to shop related products.

Identify how much content we should display before we collapse

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

  • Unless all the product page sections are collapsed, do not completely collapse the product description or spec sheet sections, but instead, opt for a truncation, where parts of the section content are shown in the default state.
  • A “Vertically Collapsed PDP Sections”-layout will largely reduce the need to truncate the product specifications sheet, since it’s only users who actively decide to expand the product specifications section who will see the long spec sheet. layouts that have a default expanded product description section can still warrant a truncation.
  • The “Truncation Trigger” acts both as an indicator of the hidden content and as the hit area for revealing it
  • “5 lines of bullet lists” or “500 characters of text” lower than the number that determines a truncation interface should be invoked.

Pricing:

  • PBL - If a product does not have a national sales price the product can not be add to cart and will not show pricing, (will add two disposition flags) once logged in you can see price and add to cart

Product codes:

  • In the Facilities catalog we use the MPID but we have the column titled as item number.   For the website if we align with the way it is in the catalog then it is less confusing to the customer if they use both (catalog and online) because it matches and it helps keep them for price shopping due to a unique identifier.   I hope this helps, please let me know if you have any more questions or if you would like to discuss further.
    • ALT.CODES1 (Alt1 is most often used, but there are alt codes 1-5, but don’t know if the website searches those)
    • S_MASTER.PRODUCT (is the MPID)
    • UPC_CODE (the UPC code)
    • VENDOR_PROD_CODE (vendor/manufacturer product code)


Research

NNG

State the Price to Give B2B Sites a Competitive Advantage

https://www.nngroup.com/articles/show-price/

Vol. 3: Product Pages

  •  Well-designed product pages have the following characteristics:
    • Descriptive product name
    • Recognizable image(s)
    • Enlarged view of image(s)
    • Price, including any additional product-specific charges
    • Product availability
    • Clear way to add an item to the cart
  • Product pages may also offer:
    • Customer or expert ratings or reviews
    • Additional product images (rotated or detailed views)
    • Zoom or pan functionality on product images
    • Clear product options and a way to select them, such as color and finish
  • Product pages that began with a short product summary, highlighting key differentiating features, and then provided more detail or specifications further down the page worked well.

Guidelines

Product Page Navigation

  • Provide a link from each product page to a higher level category page

Product Description

  • Provide adequate space on product page templates to display some product description above the fold
  • Don’t present too much product detail at once. Layer the information
  • Provide consistent product information about similar products to aid product comparison

Product Images

  • Provide images of all products on the site

Price, Other Costs, and Availability

  • Show prices on category pages and product pages.
  • Include availability or inventory information on the product page

 Specifying Product Options, Including Color and Size

  • Show all options on the same page.

Adding Products to the Shopping Cart

  • Clearly name the shopping cart and Buy button
  • Clearly distinguish Add to Cart from other options on the page, such as adding to a wishlist
  • Include an Add to Cart or Buy button on every product page
  • Be cautious if including both checkout and add to cart buttons on product pages
  • Use a simple and clear button for the buy mechanism
    On product pages offering a single product, default the quantity field to one
    If more than one item is available for sale on one page, consider if individual add to cart buttons make sense, or if one button for the full page is preferable

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.

Research labels for different product codes (Alt ID, UPC, Model #)

Product - https://www.us.kohler.com/us/Cachet-Quiet-Close-with-Grip-Tight-elongated-toilet-seat/productDetail/toilet-seats/423376.htm

https://www.ferguson.com/

  • K4636

https://www.amazon.com/

  • K-4636-0 (model # not labeled)

https://www.homedepot.com/

  • Model # K-4636-0
  • Internet #100452041
  • Store SKU #152454
  • Store SO SKU #1000894626

https://www.fergusonshowrooms.com

  • Item: K-4636-0

https://www.wayfair.com

  • SKU: KOH3570
  • Part #: K-4636-0

https://www.faucet.com

  • Model # in product title
  • Item # bci170136

https://www.grainger.com/

  • Item # 45NC74
  • Mfr. Model # K-4636-0
  • Catalog Page # N/A
  • UNSPSC # 30181512

https://www.zoro.com

  • Zoro #: G2017410
  • Mfr #: K-4636-0

https://www.southernpipe.com

  • Mfg.Part # : K-4636-33
  • Mfg.Name : Kohler Company
  • Part # : K4636MS

https://www.overstock.com

  • Model # in product title
  • ITEM# 23971047

https://www.lowes.com

  • Item # 526424
  • Model # 4636-0

https://www.supply.com

  • Model # in product title
  • Manufacturer SKU: K-4636-0

https://www.build.com

  • Model # in product title
  • Item # bci170136

https://www.motionindustries.com

  • Mi Item #:
  • Mfr Description: (Can be model # or model # and description)

https://www.mscdirect.com

https://www.globalindustrial.com/

  • Item #

http://www.hdsupply.com/

  • Mfg#: EK7651H
  • Product#: 140EK7651H

How Manufacturers Handle Product Codes

  • American Standard - Model Number(s): 7353.101.002
  • Kholer - K-7548-4-CP
  • Moen - Model: 7864SRS
  • Mirabelle - Item: MIRSD1166CP
  • ProFlo - Item:PFXC5150BN
  • Delta - MODEL#: 1959LF-CZ
  • Elkay - LKAV4032LS
  • Viega - Model 0616
  • Milwaukee - 48-22-8250
  • Rinnai - V65iP
  • Generac - Model #6998
  • GE - GDE25ESKSS
  • 3M - Part Number 5566601, 3M ID 70020126358, 3M Product Number AP1001, UPC 00016145123405
  • Samsung - QN85Q900RAFXZA
  • Oatey -  Part Number: 21018 , Min. Order QTY: 50, UPC: 038753210186, Case QTY: 50
  • HD Supply - PART 332492


Page Architecture

One of the key design changes introduced with the PDP Redesign project is a revision of the way the information is organized.

The original PDP design (launched as part of Phase 1) laid out the information in a multi-column format. The multi-column design would fall short on product pages where the information wasn't equal in height yielding unwanted white-space. Also, the continual introduction of new content to the page resulted in unrelated information being organized together.

Awkward White-Space

Awkward white-space on classic PDP


The redesign allowed for all information to be reevaluated and reorganized. Related information is placed in sections. The sections can then be easily reordered according to the needs of the user and the business.


Section Breakdown

Choose/Buy

The Choose/Buy section provides users with high-importance information essential to making quick and effective purchase decisions. This includes key details including price, in-store, and shipping availability. The primary action on this page is add to Cart, and secondary actions include adding to list, and print. Users can utilize the gallery and refiners to choose the correct product (SKU) to purchase.



Visual Comp of a Choose/Buy section



The components of the Choose/Buy section


Components
1.

Navigation

Assists the user in keeping track of and maintaining awareness of their location within the catalog

Note: Product title was removed from breadcrumb from the previous design
Type: Text
Format: Home > Category > Subcategory


2.

Controls

Various task-specific product actions

Print

Type: Button
onClick: Activates the browser's print action.

3.

Type: Image
UI Note: Restriction of a max-width: 150px and a max-height: 50px, Margin-bottom: 8px
communicate this in a diagram?

4.

Image

The feature image for the product. The user can change what image is viewed via the Gallery.

5.

Displays a list of images and/or videos associated with the product.

Mismatching styles

6.

Info/History

Additional contextual information about a product  

Purchase history

  • (PH icon) You last purchased this on Month, Day, Year  View Purchase History

Replacement Product

Incorrect PH icon

7.

Title

  • Brand
    • Pulled brand out of product title (design-only)
  • Title
    • Webdisplayname

Variations

Brand


Commodity


Long name

8.

Codes

  • Alt
  • MPID
  • Manufacturer
  • Fast
  • Ex: Alt  |  MPID  |  Manufacturer  |  Fast
  • Variations

9.

Price

  • Label
  • Unit of Measure
  • Price Selector (dropdown)
  • Price Description
  • Loyalty indicator

Mismatching styles



 






10.

Refiner

  • Variations 
    • Radio buttons
    • Dropdown





Need dropdown variation
Mismatching styles

11.

Quantity

  • Steppers
  • Input
  • Label
  • Variations


12.

Actions

  • Add to Cart
  • Add to List
  • Variations

See the interactions section for details on these actions.


13.

Availability

  • In-store availability
  • Shipping availability
  • Variations
    • In-store availability only
    • Shipping availability only

Need restricted product variation




2. Overview

  • Description
  • Combo
  • Feedback
  • Indicators
  • Documents

3. Specs

Components
Specifications

4. Sizes

For more info on the Sizes section, see the Sizes Table page.

Variations

  • Various UoM (ex: pipe)
  • Logged out

5. Help

tbd

6. Merch

tbd

Interactions

List of interactions on the page

  • Image zoom
  • Adding to list
    • Diagram: Click button, show modal
  • Adding to Cart
    • Diagram: Adjust quantity input/stepper, click button, print message
    • Animation?
  • Viewing product thumbnails
  • Refining
  • Price toggling
  • Quantity stepping
  • Printing
  • Viewing purchase history
  • Viewing product availability
  • Viewing documents
  • Sticky header (design-only)

Tablet & Mobile

tbd

User Testing & Customer Feedback

Goal: To identify what we want to understand, and how we want to go about testing it.

  • TOC
  • Layout changes
  • Content changes
  • Quantity stepper
  • Status block
  • Can the user find information there
  • Ask questions about product availability, what does that mean to them

Here you can find more detailed takeaways from user testing. 

Eric Noethig

  • 48:00 - Purchase history is useful will tell when the last time he ordered it and what equipment it was used for.
  • 50:00 - only care about part numbers on Ferguson site because he doesn’t use any other numbers.
  • 51:00 - He thinks item number is manufacturer part number
  • 54:00 - talks about order quantities, it would be helpful to have per foot or per piece

Arnulfo Vargas

  • 30:30 - quantity for single SKU, drop down would be nice
  • 31:05 - when did I buy (includes history and job numbers) this is important for special orders.
  • 33:00 - wants to order in quantities that are NOT in quantities of 100

Lorie Colvin

  • 25:20 - asked about the MSDS
  • 25:50 - box quantity is important
  • 26:55 - would enter 200 (since it was a big number)
  • 27:20 - uses Ferguson product number
  • 28:10 - in store availability is important
  • 30:10 - this experience is about the same, doesn’t make a difference, in store availability gets lost

Mike Rutherford

  • 29:50 - when will the product be available if it is not currently available
  • 30:20 - likes bundle builder
  • 32:30 - Dan use logic check out button should be primary button after adding it to cart


  • 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 catalog 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