Versions Compared

Old Version 59

changes.mady.by.user Dan Flynn

Saved on

compared with

New Version Current

changes.mady.by.user Dan Flynn

Saved on

Key

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

...

▷ Figma Developer Training Material

Figma Tutorial: Developer Handoff


Widget Connector
width300
urlhttps://www.youtube.com/watch?v=tVPHB7gOAGs
height168

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


Figma Demo - Developer Handshake


Iframe
srchttps://web.microsoftstream.com/embed/video/1f227aae-4455-4b20-953a-331f739deabd?autoplay=false&showinfo=true
width300px
frameborderhide
height168px

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


300px
  • List Item Variations

    • 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

    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


    7Display Add to Cart Modal in PLP Product Card - PLP
    Jira Legacy
    serverSystem JIRA
    serverId6f628555-4e88-3de1-a113-9682348a2f13
    keyEWOK-4080

    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

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

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



    11



    12



    13