PLP - Documentation

Owned by Dan Flynn
Last updated: Aug 30, 2019
6 min read


▷ Figma Developer Training Material

Figma Tutorial: Developer Handoff


https://www.youtube.com/watch?v=tVPHB7gOAGs

Figma Demo - Developer Handshake


https://web.microsoftstream.com/video/1f227aae-4455-4b20-953a-331f739deabd

PLP UI/UX Deliverables

User Testing Prototype:

https://www.figma.com/proto/k6jd9O6y1amgF83JhobcLx/PLP-Autocomplete?node-id=3429%3A19&scaling=min-zoom



Tickets


Name

Ticket Details

Documentation / Deliverables

Notes



Below you'll find the deliverable detailed for each ticket in sprint 

Boba Sprint 45 8/13-9/2


1

Updated UI - Grid View - PLP

EWOK-4014 - Getting issue details... STATUS

User Story

As a customer browsing products on Ferguson.com, I want the product grid view to be visually updated, so that I see more valuable information on the search results page without the need to access the details page.


Acceptance Criteria

  • UI is updated for both B2C and B2B customers

  • 4 products cards displayed per row

    • 3 display per row on tablet because of screen size constraint.

  • Each row height is based on the tallest card in the row

    • Some cards may contain more information than ones next to them...longer web display names, color swatches, pro plus points, etc.)

  • Contains space for the following features

    • Comparison checkbox

    • Product image

      • Uniform size/placement across all cards

    • Color Swatch/Size Drop-down

      • Uniform placement across all cards

    • Product web display name

      • Uniform placement across all cards

      • Card height dependent on web display name length

    • Product code/Fast code

      • Placement dependent on the end of the web display name

    • Product specifications

      • Placement dependent on the end of the web display name

    • Price

      • Uniform placement across all cards

    • Availability

      • Uniform placement across all cards

    • Add to Cart button

      • Uniform placement across all cards

Early Mockups

https://fergusonprod.atlassian.net/44aea8ec-9460-44ab-a4f9-a4cde3f72bde


Deliverables

PLP

  • Additional Requirements

    • "Each row height is based on the tallest card in the row

      • This is to be done automatically through the CSS code.
      • Recommendation to use CSS Grid (and CSS Flexbox)
        • No fixed height on the product list-items — they must support various/dynamic content.

      • See how the line height changes when you select different swatch options
        Left-most product is interactive

Compare (Grid View)

Swatches

Design Comments

Swatches

  • Product swatches will follow the same order as the order they appear on their PDP page.
  • However, if the user has chosen a filter or searched for an additional swatch/option term that is not show in the first x-number of visible options, then the searched for swatch/option would move to become the first option in the option list.
    • Example: If they searched for "kitchen faucets", they may get
      Chrome, Gold, Copper… + more

      But the user could also search for "bronze kitchen faucets", and though "bronze" may initially have been hidden, it would adjust the results to show,

      Bronze, Chrome, Gold… + more

      Bringing the "Bronze" option to the head of the swatches list.
2

Updated UI - List View - PLP
EWOK-4073 - Getting issue details... STATUS

User Story

As a customer browsing products on Ferguson.com, I want the product list view to be visually updated, so that I see more valuable information on the search results page without the need to access the details page.


Acceptance Criteria

  • UI is updated for both B2C and B2B customers

    • Contains space for the following features

      • Comparison checkbox

      • Product image

        • Uniform size/placement across all cards

      • Product web display name

        • Uniform placement across all cards

        • Card height dependent on web display name length

      • Color Swatch/Size Drop-down/Size Selectors

        • Placement dependent on the end of the web display name

      • Product code/Fast code

        • Placement dependent on the end of the web display name

      • Product specifications

        • Placement dependent on the end of the web display name/size selectors

      • Price

        • Uniform placement across all cards

      • Availability

        • Uniform placement across all cards

      • Add to Cart button

        • Uniform placement across all cards

Early Mockups

 

Deliverables

Compare (List View)



3

Updated UI - Sort Drop-down - PLP EWOK-4250 - Getting issue details... STATUS

User Story

As a customer sorting the products on the PLP, I want the “Sort” drop-down UI updated to match the new page style, so that the look and feel is uniform.


Acceptance Criteria

  • UI is updated to match the current site standards for a drop-down.

Early Mockups


4

Updated UI - Items Per Page Drop-down - PLP

EWOK-4257 - Getting issue details... STATUS

User Story

As a customer changing the number of items displayed on the PLP, I want the "Items Per Page" drop-down UI updated to match the new page style, so that the look and feel is uniform.


Acceptance Criteria

  • UI is updated to match the current site standards for a drop-down.

Early Mockups

N/A

Deliverables

Pagination



5

Availability Refiner - PLP

EWOK-3993 - Getting issue details... STATUS

User Story
As a customer searching for products, I want the "In My Store" option to be displayed more prominently at the top of the left refinement column of the PLP page, so that I can easily narrow the results to show only products in my selected store.


Acceptance Criteria

  • Labeled "Availability"

    • Always displays at the top of the left refinement section.

    • Load page with “All Products” displayed by default.

    • “In My Store” unselected by default on page load.

    • Selection of “In My Store” checkbox:

      • Displays only products in the selected store.

      • Hides all other products.

      • Updates the “# results for” text on the page.

    • Displays store location

    • Displays Pro Pick-Up 1-Hour availability

      • If not eligible then the PP1H text is not displayed

    • “Search Range” section is no longer displayed above the product section.

Early Mockups

 

Deliverables


Refiners





6

Change Store - Availability Refiner - PLP

EWOK-4000 - Getting issue details... STATUS

User Story

As a customer searching for products, I want the ability to change my selected store location from the Availability refiner, so that I can see the product availability at other locations.


Acceptance Criteria

  • "Change" link displayed below the selected store in the Availability refiner

    • Clicking the link opens the existing Job Board modal.

    • Changing location with “In My Store” selected will update the product list.

      • If no products are available for the selected store it will display the “No Results” messaging.

    • Changing location with “In My Store” unselected will not affect the product list.

Early Mockups

N/A


7Display Add to Cart Modal in PLP Product Card - PLP EWOK-4080 - Getting issue details... STATUS

User Story

As a customer that has searched for products on Ferguson.com, I want the Add to Cart button on the PLP page to open an "Add to Cart" modal, so I can quickly order products without going to each product PDP page.


Acceptance Criteria

  • Clicking the "Add to Cart" button on PLP opens a modal.

  • Modal Contents:

    • Displays modal title “Add to Cart”

    • Product image

    • Product web display name

    • Price (w/UOM price if applicable)

    • Quantity selector (w/ UOM instructions if applicable)

    • Cancel link

    • Add to Cart button

  • Quantity Selector:

    • Uses the same functionality of the existing Quick View quantity box.

  • Closing the modal

    • Modal can be closed by clicking Cancel, (X), or clicking outside the modal.

    • Modal will close after clicking Add to Cart

      • Customer stays on PLP page.

Early Mockups

N/A


Deliverables

Add to Cart Interaction


8

DUPLICATE

Integrate new- Grid View - PLP

EWOK-4326 - Getting issue details... STATUS

User Story

As a customer browsing products on Ferguson.com, I want the product grid view to be visually updated, so that I see more valuable information on the search results page without the need to access the details page.


Acceptance Criteria

  • UI is updated for both B2C and B2B customers

  • 4 products cards displayed per row

    • Each row height is based on the tallest card in the row

      • Some cards may contain more information than ones next to them...longer web display names, color swatches, pro plus points, etc.)

    • Contains space for the following features

      • Comparison checkbox

      • Product image

        • Uniform size/placement across all cards

      • Color Swatch/Size Drop-down

        • Uniform placement across all cards

      • Product web display name

        • Uniform placement across all cards

        • Card height dependent on web display name length

      • Product code/Fast code

        • Placement dependent on the end of the web display name

      • Product specifications

        • Placement dependent on the end of the web display name

      • Price

        • Uniform placement across all cards

      • Availability

        • Uniform placement across all cards

      • Add to Cart button

        • Uniform placement across all cards

N/A

N/A
9

DUPLICATE

Integrate new - List View - PLP

EWOK-4333 - Getting issue details... STATUS

User Story

As a customer browsing products on Ferguson.com, I want the product list view to be visually updated, so that I see more valuable information on the search results page without the need to access the details page.


Acceptance Criteria

  • UI is updated for both B2C and B2B customers

    • Contains space for the following features

      • Comparison checkbox

      • Product image

        • Uniform size/placement across all cards

      • Product web display name

        • Uniform placement across all cards

        • Card height dependent on web display name length

      • Color Swatch/Size Drop-down/Size Selectors

        • Placement dependent on the end of the web display name

      • Product code/Fast code

        • Placement dependent on the end of the web display name

      • Product specifications

        • Placement dependent on the end of the web display name/size selectors

      • Price

        • Uniform placement across all cards

      • Availability

        • Uniform placement across all cards

      • Add to Cart button

        • Uniform placement across all cards

N/A

N/A
10



11



12



13