Versions Compared

Old Version 55

changes.mady.by.user Dan Flynn

Saved on

compared with

New Version 56

changes.mady.by.user Dan Flynn

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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



Tickets


Name

Ticket Details

Deliverables

Notes

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

Boba Sprint 45 8/13-9/2


 


2

Updated UI - Grid View - PLP

Jira Legacy
serverSystem JIRA
serverId6f628555-4e88-3de1-a113-9682348a2f13
keyEWOK-4014

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

Design Comments

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

    Early Mockups

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

    Image Modified


    Deliverables

    List Items

    • Variations

    • More Details

      • List types

        Iframe
        srchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fk6jd9O6y1amgF83JhobcLx%2FPLP-Autocomplete%3Fnode-id%3D4798%253A752
        width100%
        height300px


    • 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

          Iframe
          srchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2Fk6jd9O6y1amgF83JhobcLx%2FPLP-Autocomplete%3Fnode-id%3D5445%253A207054%26viewport%3D517%252C-1035%252C0.3593367040157318%26scaling%3Dmax-zoom
          width100%
          height300px


    Compare (Grid View)

    Swatches

    Rules for swatches 

    Info

    Needing rules for the swatches

    Design Comments

    • 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.
    3

    Updated UI - List View - PLP
    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4073

    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

    Image Modified

    Image Modified


    Deliverables

    Compare (List View)



    4

    Updated UI - Sort Drop-down - PLP
    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4250

    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

    Image Modified


    5

    Updated UI - Items Per Page Drop-down - PLP

    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4257

    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





    6

    Availability Refiner - PLP

    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-3993

    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

    Image Modified

    Image Modified

    Deliverables


    Refiners

    Iframe
    srchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fk6jd9O6y1amgF83JhobcLx%2FPLP-Autocomplete%3Fnode-id%3D4791%253A1315
    width100%
    height300px





    7

    Change Store - Availability Refiner - PLP

    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4000

    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


    8

    DUPLICATE

    Integrate new- Grid View - PLP

    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4326

    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

    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4333

    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