Versions Compared

Old Version 59

changes.mady.by.user Dan Flynn

Saved on

compared with

New Version 60

changes.mady.by.user Dan Flynn

Saved on

Key

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

...

300px
  • List Item Variations

    • Tickets


    		Name

    Ticket Details

    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

    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

    Early Mockups

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


    Deliverables

    PLP

    Iframe
    srchttps://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fk6jd9O6y1amgF83JhobcLx%2FPLP-Autocomplete%3Fnode-id%3D5925%253A789
    width100%
    height
    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

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

     


    Deliverables

    Compare (List View)



    3

    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


    4

    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

    Pagination




    5

    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

     

    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





    6

    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


    7

    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/A8

    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/A9



    10



    11



    12



    ...