Skip to end of banner
Go to start of banner

Checkout

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Flow Diagrams (http://bit.ly/FergusonCheckoutFlow)


Recommendations:

  • All icons should be either SVG or utilize an icon font.
  • Auto-focus the user to the first required field on the page, if one is available.



Interaction Design

Edit & Summary Mode

The Single-Page Checkout design incorporates a design pattern where chunks of information gathered (boxes) from the customer are organized into sections that have two modes: Summary and Edit Mode. Below you can see the animation when the boxes change between both modes.

  • The sections that utilize Edit and Summary Mode are Order, Shipping, and Payment Options.
  • If the edit/summary box begins in the edit mode, the cancel button, and toggle link will not be visible until they return to the edit mode again from the summary mode.
  • The edit/summary boxes serve to create a focus for the user. Typically, they would guide the user through the customer flow and ensure the user filled out all required fields.

Since we're focusing on T3+ much of the customer flow will be pre-populated.

  • Each edit/summary box begins in the Edit mode
  • If all of the required fields in an edit/summary box have been pre-populated, it will begin in the Summary mode
  • From the Summary Mode:
    • If the Toggle Link is selected, the values of the currently populated fields must be stored, then the edit/summary box will enter the Edit mode
  • From the Edit Mode:
    • The Call to Action will be disabled until all required fields within the edit/summary box have been adequately filled 
    • If the Call to Action is selected, the fields which have been populated in the Edit Mode will get rendered in the summary text and the edit/summary box will enter the Summary mode.
    • If either the Cancel Button or the Toggle Link are selected, the form fields will revert back to the stored values from the Summary state and the edit/summary box will enter the Summary state.
  • When all required form fields from all the edit/summary boxes have been adequately filled, "Place Order" button will become active
    • It is NOT required that the edit/summary boxes be in summary mode for the "Place Order" button to be active

1. Summary Mode:

This is the mode that 'rolls-up' the information from Edit mode into a plain text version for review

Summary Mode

ElementTypeValueComments

Visible Elements

Section Status IndicatorIcon{check-icon}Background Color: Success Color HEX#1abc81
Title

Background Color: Dark Text Color HEX#595454
Toggle LinkLink
with "Change" visible
Summary Text for that Module

Detailed below

2. Edit Mode:

This is the mode where users can enter values into the form fields, and edit any pre-populated fields.

Edit Mode

ElementTypeValueComments

Visible Elements

Section Status IndicatorIcon{step-number}Background Color: Primary Color HEX#1C88C7
Will present the sequential number of the edit/summary box in relation to the others for {step-number}
Title

Dark Text Color HEX#595454
Toggle LinkLink
with "Cancel" visible
Form Fields for that Module

Detailed below

Call to Action States

Disabled
Remains in this state until all required fields in the section are filled out adequately

Background color: Border Color HEX#AFB0B3
Cursor: not-allowed
All hover/focus styles are cleared

Active

Enters this state when all required fields in the section are filled out adequately

Background color: Primary Color HEX#1C88C7
Cursor: Default
Normal hover/focus styles for button

Cancel Button

Flat Button


Page Sections


ElementTypeValueAction(s)Comments
1

Header

2Ferguson LogoSVG Image
On Click: Takes the user to the homepage
3Continue Shopping


Only visible when flipping a quote to an order.

When clicked, the quote gets added to the cart, allowing the user to add more products to the order.

Utilizes the same business rules/functionality as the current implementation of Continue Shopping.

4Return LinkText Link

default:
"Return to Cart"

If the user has a quote in their order:
"Return to Quote Center"

On Click: Takes the user to the cart which is populated by the items in their order, or to quote center.
5Page TitleHeading with an inline linkCheckout ( " {number of items} " items )On Click: Number of items: auto-scrolls to Product ModuleWill present the number of line-items in the Product Module for {number of items}
6Required Fields IndicatorText


7

Order Options

8

Edit Mode

9Section status indicator
"1"

10Title
"Order Options"

11Toggle Link
"Cancel"On Click: Sets the Options box to summary mode without updating summary textNot visible until opened from summary mode
12Job Name FieldText

Default: empty
Field requirements: Each customer chooses if this is required or not for their orders
Max Length: 

13Purchase Order FieldText

Default: empty
Field requirements: Each customer chooses if this is required or not for their orders
Max Length: 

14Call to Action Button
"Use These Options"On Click: Updates the summary text with entered values and sets the Options box to summary mode
15Cancel Button
"Cancel"On Click: Sets the Options box to summary mode without updating summary textNot visible until opened from the summary mode
16

Summary Mode

17

Section status indicator


Check icon

18Title
"Order Options"

19Toggle Link
"Change"On Click: Stores current values and sets the Options box to edit mode
20Summary Text
{job name}
  • If the user filled in Job Name
    • "Job Name: " {job name}
    • Note: where {job name} is the value that the user entered in the Job Name Field

{po}
  • If the user filled in PO#
    • "PO#: " {po}
    • Note: where {po} is the value that the user entered in the Purchase Order Field
21

Shipping Options

22

Edit Mode: Delivery

23Section status indicator
"2"

24Title
"Ship To"

25Toggle link
"Cancel"On click: Sets the Shipping box to summary mode without updating summary text.Note: Not visible until opened from summary mode
26Shipping Address Radio Group


Shows up to 5 saved addresses.

Sort Order:

  • the users primary address always appears at the top and is preselected.
  • after the primary address, the list is populated by the most recently used saved addresses

If the user selects an address that isn't their primary address, they are shown an option to make that address their primary address

Tax Exempt:

  • Tax Exempt addresses will display the TAX EXEMPT label.

  • if an address has both the TAX EXEMPT label and the PRIMARY label, the TAX EXEMPT label would show first.
27Add New Address Button

On click: Shows the "My Addresses" modal opened to the "New Address" tab.


28

"My Addresses" Modal

28Modal Title

"My Addresses " {info-action-icon}



29"Close Modal" Button
{close-icon}On Click: saves the state of the modal (anything already entered) and closes the modal without applying any changes to the order
30"Saved Address" Tab
31Search Addresses

functionality should match current implementation of the locations search in job board.

  • only searches "all addresses"
  • results replace "recent addresses" and "all addresses"
32Recent Addresses


  • Shows the last 5 most recently used saved addresses.
  • Sort Order: Most Recent first

Questions:

  • TAX EXEMPT label will display in the same position and style as in the radio group.
  • Billy - What is the format for how different saved International Addresses will be saved? (More of a question for IT)
33All Addresses


  • Lists all of the users saved addresses
  • Sort Order: Alphabetical by Name, then Alpha-Numeric by Address

Questions:

  • TAX EXEMPT label will display in the same position and style as in the radio group.
  • Billy - What is the format for how different saved International Addresses will be saved? (More of a question for IT)
34"New Address" Tab
35Full Name Fieldtext

Default: empty


Field requirements: required

36Company Fieldtext

Default: empty


Field requirements: optional

37Address Fieldtext

Default: empty


Field requirements: required

38Address Obscured Field

On Click: will reveal Address Field 2. A close button will be available to remove.
39Address Fieldtext

Default: empty


Field requirements: optional

40

Zip/Postal Code Field

phone

Default: empty

When the user has focus to the field, and enters the 5th digit the following will occur:

  1. The City and State fields will be revealed beneath the Zip Code Field using the same style as the Zip Code Field.
    1. The system will attempt to auto-populate the City, State, and Country fields based upon the zip code
    2. Once the zip code field expands the City, State, and Country fields, they cannot be hidden. They stay visible.
  • Field requirements: Required. Limit characters to 9 numeric digits
  • Use input masking to separate the first 5 characters from the last 4 characters with a "-" if number of characters is greater than 5


41Save this Shipping Address Checkbox

  • If this is checked when the user pushes "Use This Address", it will be added to their saved addresses and will be available in future orders.
  • If this is NOT checked, the address will only be made available for the current order

42End Tabs
43Cancel Button

Same functionality as Close Modal Button


44"Use This Address" Button

On Click: Adds the entered address to the Shipping Address Radio Group beneath their primary address


45End Modal
46
47View More Addresses Button

On click: Shows the "My Addresses" modal opened to the "Saved Address" tab.

Shows when the user has more than 5 saved addresses

48Date Needed Dropdowndropdown

Default: earliest available date

On Click: Opens Date Needed Dropdown
49Date Needed Dropdown
50

Header Section - Left and Right Arrows



On Click: advances or reduces the month by 1


51Month/Year Dropdown

Shows a list of month/year combo's up to a year out.


52Calendar Section


  • Show's a calendar of the selected month/year
  • Days that aren't selectable are disabled
    • What is selectable would be determined by the day of the week, time of day, business hours of selected branch (for pick up), and our business rules around these things.
  • "Today" is marked with a disabled circle
  • The currently selected day is marked with an active circle
53Presets Section

Selecting a preset auto-selects that preset from the calendar.


54General


After selecting a selectable day from the calendar or a preset from the preset section, the dropdown would close

55End Dropdown
56
57Attention to Obscured Field

On click: reveals "Attention To" field and "Contact Phone" field form fields
58"Attention To" Fieldtext

Default: empty


Field requirements: optional

59"Contact Phone" FieldphoneDefault: empty

Field requirements: optional

60Instructions Obscured Field

On click: reveals "Instructions" field
61"Instructions" Fieldtext areaDefault: empty

Field requirements: optional

62Ship Complete Checkboxcheckbox

Default: checked


  • When checked, the subtext will read: "This order will be shipped when all products are available."
  • when unchecked, the subtext will read: "Products from this order will be shipped as they become available."
63CTA Button
"Use This Shipping"

On click: Updates the summary text with entered values and sets the Shipping box to summary mode.


64Cancel Button
"Cancel"

On click: Sets the Shipping box to summary mode without updating summary text.

Note: Not visible until opened from summary mode

65Edit Mode: Pick Up
66Section status indicator
"2"

67Title

"Pick Up From"



68Toggle link
"Cancel"On click: Sets the Shipping box to summary mode without updating summary text.

Note: Not visible until opened from summary mode

69Store Location Dropdowndropdown

Default: Location from Job Board

Same functionality as the Locations Dropdown in Job Board


70Pro Pick-Up 1 Hour Toggle Switch

  • Toggling the switch on will lock the locations dropdown and prevent availability modal from opening.
  • Toggling the switch on will swap out the regular Pro Pick-Up form fields for the 1-hour specific fields, "Contact Name" and "Contact Phone"

follows the same conditions as the current Pro Pick-Up 1 hour

  • 2 conditions must be met for feature visibility:
    • The users account must be eligible for Pro Pick-Up 1 hour
    • The Selected location must be eligible for Pro Pick-Up 1 hour
  • All of the items must be in stock at that location.
    • See 157 for documentation on how to handle problem products in the order.
71"Contact Name" Fieldtext

Default: empty


Field requirements: required

72"Contact Phone" Fieldphone

Default: empty


Field requirements:

  • required
  • Character Limit: 10
    • use input masking to format the phone number
73End Pro Pick-Up 1 Hour Fields
74
75Date Needed Dropdown


same as shipping section

76Contact Phone Obscured Field

On click: reveals Contact Phone form field:
77"Contact Phone" Fieldphone

Default: empty


Field requirements:

  • optional
  • Character Limit: 10
    • use input masking to format the phone number
78Instructions Obscured Field


same as shipping section

79Pickup Complete Checkboxcheckbox

Default: checked


  • When checked, the subtext will read: "I want to pickup this order once, when all products are available."
  • when unchecked, the subtext will read: "I want to pickup products as they become available."
80CTA Button
"Use This Pickup"On click: Updates the summary text with entered values and sets the Shipping box to summary mode.
81Cancel Button
"Cancel"On click: Sets the Shipping box to summary mode without updating summary text.

Note: Not visible until opened from summary mode

82Summary Mode: Delivery
83Section status indicator
{check-icon}

84Title

"Ship To"



85Toggle link
"Change"On click: Stores summarized values and sets Shipping box to edit mode
86Summary Text
87Address

Line 1: {Name}
Line 2: {Company}
Line 3: {Street Address} ","
Line 4: {City} ", " {State} " " {Zip}


The TAX EXEMPT label will be displayed in the summary mode.
88Date Needed
"Needed by: " {date-needed}

89Optional Fields

{field-label} ": " {field-value}

  • {field-label} is the label of the field the user filled out
  • {field-value} is the value that the user entered

If the user filled out any of the hidden optional fields, they would display like this.
90Ship Complete
"Ship Complete"

Note: Only shows if the user checked the ship complete checkbox

91Summary Mode: Pick Up
92Section status indicator
{check-icon}

93Title

"Pick up From"



94Toggle link
"Change"On click: Stores summarized values and sets Options box to edit mode
95Summary Text - Pro Pick-Up
96

Store Location


Line 1: {Store-Street-Address}
Line 2: {Store City} ", " {Store State}



97Date Needed

"Needed by: " {date-needed}

  • {date-needed} is the date they selected from the dropdown


98Optional Fields

{field-label} ": " {field-value}

  • {field-label} is the label of the field the user filled out
  • {field-value} is the value that the user entered

If the user filled out any of the hidden optional fields, they would display like this.
99Pickup Complete
"Pickup Complete"
Only shows if the user checked the pickup complete checkbox
100Summary Text - Pro Pick-Up 1 Hour
101

Store Location


Line 1: {Store-Street-Address}
Line 2: {Store City} ", " {Store State}



102Contact Info

"Contact: " {contact-name} " - " {contact-phone}

  • {contact-name} is the value that the user entered for the Contact Name field
  • {contact-phone} is the value that the user entered for the Contact Phone field


103

Payment Options

104

Edit Mode

105Section status indicator
"3"

106Title
"Pay Using"

107Toggle link
"Cancel"On click: Sets the Payment box to summary mode without updating summary text.Not visible until opened from summary mode
108Selected Account

Heading: "SELECTED ACCOUNT"

Line 1-3: 

  • This should match their most specific selection from Job Board:

Line 4: {info-icon} " You can change your account from the cart."

NoneLine 4 would not be visible if the user has a quote in their order.
109Payment Method Radio Group

Heading: "PAYMENT METHOD"

Credit on Account:

  • {ferguson-weld-el} " Credit on Account " "Learn More"
    • {ferguson-weld-el} is the ferguson logo symbol
    • "Learn More" is a link to a page that explains more about charging to your Ferguson account

Credit Cards

  • {card-type-image} " " {card-nickname} " ending in " {last-4-card-num} " - Exp " {exp-date}
    • {card-type-image} is the logo of the card's card type
    • {card-nickname} is the user-given nickname for the card
      • if a card doesn't have a nickname, use "card"
    • {last-4-card-num} is the last 4 digits of the card number
    • {exp-date} is the expiration date of the card in the format: MM/YY

Sort Order:

  • "Credit on Account" always appears at the top
  • The users Primary Payment method is always preselected
    • New Functionality: user can set "Credit on Account" as their primary payment method
    • If the user has a Credit Card set as their primary payment method, it will be listed after the "Credit on Account" option
  • after the primary payment method, the list is populated by the most recently used payment methods

If the user selects a payment method that isn't their primary payment method, they are shown an option to make that payment method their primary one

Questions/Comments:

  • If user does not have option to Credit on Account and they do not have a saved credit card, they will see this message.
  • If the user has selected Credit on Account on the cart, but they do not have a saved credit card, when they arrive to the checkout page, the payment box would be in summary mode with "Credit on Account" selected. When the user clicks "change" the payment box would change to edit mode and the radio group would be visible but only populated with a single radio button: Credit on Account. The "Add a New Credit Card" button would be visible beneath the radio group to add a credit card.
  • Ferguson.com and Trilogie only accept MC, Visa, AMEX, and Discover, so we won't need to show a "Credit" label

Card Logo files:

  • Future considerations of pickup customers paying with cash on pickup are a possibility.
110Add a New Credit Card Button

On Click: Opens New Credit Card modal
111New Credit Card modal
112Modal Title

"New Credit Card"



113Close Modal Button
{close-icon}On Click: saves the state of the modal (anything already entered) and closes the modal without applying any changes to the order
114Card Information
115"Card Number" FieldphoneDefault: NoneAs soon as the system can detect the card type from the entered card number, it will display the related logo aligned to the right of the input field and centered vertically

Field Requirements:

  • Required
  • Character Limit: 16 characters
    • Input masking to include a " " after every 4 characters

How to handle cards with less than or more than 16 characters:

  • The best way to handle this would be to code the character limit as part of the "card-type" identification. For example, Once you know it's an AMEX card (based on the number they enter), in addition to showing the AMEX logo aligned to the right of the input, you would set the character limit to 15.

See 109 for Card Logos.

Note: Ferguson.com and Trilogie only accept MC, Visa, AMEX, and Discover.

116

"Expiration" Field

phoneDefault: None

Field Requirements:

  • Required
  • 2 inputs styled as one
    • Caracter Limit: 2 numeric characters
    • auto-advance 
117

"Name on Card" Field

textDefault: None
Field Requirements: Required
118

"Security Code" Field

phoneDefault: None

Field Requirements:

  • Required
  • Caracter Limit: 3 numeric characters

For cards that use a different amount of characters.

  • Handle the same as the card type differences discussed on the "Card Number" Field


  • If we're required to ask the user for their security code after they make a change to their card from their account, we would do it here:
  • Tooltips show when the user hovers over the trigger element
  • Tooltips continue to show as long as the user hovers over the trigger element, or the tooltip itself.
    • There should be a 200ms delay before hiding the tooltip when the user is no longer hovering over the trigger element, or the tooltip itself, to account for mistaken mouse-movements.

 

119"Phone" Fieldphone

Default: empty


Field requirements:

  • Required
  • Character Limit: 10
    • use input masking to format the phone number
  • Tooltips show when the user hovers over the trigger element
  • Tooltips continue to show as long as the user hovers over the trigger element, or the tooltip itself.
    • There should be a 200ms delay before hiding the tooltip when the user is no longer hovering over the trigger element, or the tooltip itself, to account for mistaken mouse-movements.

 

120
121

Billing Address

122

"Use Company Address" checkbox

checkboxDefault: checked
  • If checked, will use the same address tied to the current account they're on.
  • If unchecked, will display the same form from the "New Address" Tab of the "My Addresses" Modal

Questions:

  1. Billy - Why was it decided to have this checked by default - seems like this is typically not checked by default?
    1. It's best practice to keep it checked and hide additional form fields until necessary. See "Design" section in Checkout Features
    2. Lina Angel (Deactivated) get with Analytics to discover more about T3 checkout payment methods
      Some comments related to T3 payment methods and behavior that Laurie mentioned (More info):
      1. We know that some T3s might not have good credit, so we rejected them or they knew we wouldn't give it to them and didn't apply for an account.
      2. Some want the points they earn by using credit cards.
      3. Some like to separate the accounting/payments for their jobs (and keep them secure) by paying with different checking accounts or credit cards. Secure as reducing chances of mishandling of funds.
  2. Billy - What if it is a Pro Pick-up order (No Shipping Address)?
    1. T3 users DO have an address tied to their account. "Use Company Address" could be used
    2. The Address customers provide when making a T3 account is assumed to be used for billing.
    3. Recommendation: use the address tied to the account that the user is currently on. (Drew Palko)
  3. International form fields would use the same styling and spacing as the rest of the form fields.


123
124

"Save this payment information" checkbox

checkbox
  • If checked, system will save the payment method to be used on future orders
  • If unchecked, the payment method will only be available to be used on the current order

125

Cancel Button



Same functionality as Close Modal Button


126"Use This Credit Card" Button

On Click: Adds the entered address to the Payment Method Radio Group beneath their primary payment method
127End Modal
128
129CTA Button
"Use This Payment"On click: Updates the summary text with entered values and sets the Payment box to summary mode.
130Cancel Button
"Cancel"On click: Sets the Payment box to summary mode without updating summary text.Not visible until opened from summary mode
131

Summary Mode





132Section status indicator
{check-icon}

133Title

"Pay Using"



134Toggle link
"Change"On click: Stores summarized values and sets Payment box to edit mode
135Summary Text
136Selected Account

Heading: "SELECTED ACCOUNT"

Line 1-3: 

  • This should match their most specific selection from Job Board:

Line 4: {info-icon} " You can change your account from the cart."



137Payment Method
Same as selected radio button label.

138

Note Feature

139Heading
"Need a Special Product?"

140Sub Text
"Add a note to have it reviewed by an associate"

141CTA
{plus-icon} " Add Note"

On Click: Opens the Note modal

Utilize the same modal as current checkout

142

Products Section

143Heading
"Items in Your Order"

144Column-Title Row
145Column 1 - "Select all" Checkboxcheckbox

"Select all (" {number of items} " items)"

  • by checking it, all products become checked
  • by unchecking it, all products become unchecked

146Column 2

 "Net Price"



147Column 3
"Qty"

148Column 4
"Total Price"

149Item Rows
150Column 1
Label: {list-number}

If the list item isn't selectable, it would only show the {list-number} without the checkbox

If user removes items. What will the confirmation with "Undo" option look like:

151Column 2
{Product-image}On Click: Opens the PDP in a new tab

Comment: Billy - I need to check with analytics to know how opening in a new tab will affect datalayer and pathing. I think this is the best option for links away from checkout, but want to make sure it doesn't cause any datalayer issues. Workfront Request: https://ferguson.my.workfront.com/issue/view?ID=5bc0cf8400e6d3e654b81fa8305fbe3e

152Column 3
153Line 1

{web-display-name}

On Click: Opens the PDP in a new tab
154Line 2
{codelabel1}{code-value1} "  |  " {codelabel2}{code-value2}

155Line 3 - Delivery
"[Available] for immediate shipment"Clicking "Available" opens the availability modal on the DC tab

We need the other messages to decide which part is linked

156Line 3 - Pick Up
"[{number-available-at-branch} available] for pickup"Clicking the text within the brackets opens the availability modal on the branch tab

We need the other messages to decide which part is linked

157Line 4/5 - Warnings


Questions/Comments:

  • Lead Law Compliant example: See line item 4 in InVision.
    • Billy - Do we need to show this additional messaging:
      • This additional messaging could be a block-level warning message. We would want the local message on the product to match the severity-level of this block-level message. see Messaging Documentation
    • Billy - If it IS "certified" does that orange message block still display on the site today? (Question for IT)
  • Question: Billy - What will the Prop65 warning look like? We are legally required to show the yellow warning icon followed by "WARNING:" and the message.
    • We would show it the same as any other local messaging on a product, while meeting the requirements for Prop65: instead of our indicator icons for local messaging, we would use the yellow warning icon and bold "WARNING:"
    • The length of messaging wouldn't matter technically speaking because it would fill the rest of the width of the product list item, and just expand the height of the list item as needed maintaining designed padding.
    • Here are 3 examples of different warning message lengths:


For products that prevent an order from being placed:

  • If we know which items can not be placed with the order before the user pushes the "Place Order" button, the severity-level would be warning:
  • If we don't know the products until AFTER the user pushes the "Place Order" button, the severity-level would be error:
    • Also, for this example, since we know the users intent, we can go ahead and select the error products for the user, giving them an easy way to quickly remove them from the order and place it.
158Column 4
{net-price}

159Column 5
160Quantity Fieldnumber

Default: quantity from cart


Field requirements:

  • minimum value is 1
    • if user enters a value that is <= 0, it gets changed to 1 upon leaving the field
  • Maximum value is determined by the product
    • if the user enters a value that is >= the product max, it gets changed to the product max upon leaving the field
  • Steppers increment the quantity based on it's "multiples" requirements
    • If the user enters a value that doesn't match the "multiples" requirements, it gets changed to the next accepted quantity amount that would include the amount the user entered.
      • ex. "must be entered in multiples of 20"
        • user enters 22
        • changes to 40 when the user leaves the field
  • minus stepper is disabled at the minimum value
  • plus stepper is disabled at the maximum value
161Column 6
{total-price}

162

Order Summary

163Heading

"Order Summary"



164Pricing Info

Each Row:

  • Left Aligned:
    • {Price-Label} ":"
  • Right Aligned:
    • "$" {Price-Amount}


165Total

Left Aligned:

  • "Total:"

Right Aligned:

  • "$" {Total-Amount}


166"Place Order" CTA
"Place Order"Submits form/order and links to Confirmation PageIs disabled until all required fields are adequately filled. Does NOT require edit/summary boxes to be in summary mode
167Support Cartridge
168Heading
"Need Help?"

169Branch Number

"For help with orders or products, call "{Branch-Number}"."



170T3/4 Customer Service Number

"For technical help, call (888) 222-1785."



171Web Order Number

"Web order number: " {web-order-number}



172



173Text Block

"Copyright © " {current-year} " Ferguson Enterprises Inc. All rights reserved."



174Links
175

Terms of Site Use



matches current functionality
176

Terms of Sale



matches current functionality
177

Privacy & Security



matches current functionality

 Questions for UX:

  • When does Ferguson ship outside of the United States?
    • What does that process look like?



















Current Multi-page Checkout Design 2014-2019



Page Overview

https://www.ferguson.com/shoppingCart

Vision

Key Features

Strategy





Page History

Version: version_name



Checkout Flow

NameDescription
Shopping Cart PageThis page allows users to view their web order #, selected job, selected store, the items in their cart, copy items to My Lists, Save for Later, Remove those items, choose a delivery method and checkout. 
Payment Information PageThis page allows users to enter their payment method, billing address and continue their checkout process.
Address Verification ModalThis modal pops up and grays out the payment information screen when a change has been suggested for the billing address. The user can either use the address entered as-is or use the suggested address.
Order Information PageThis page allows users to enter order details, enter/update the shipping address or pickup location and continue their checkout process.
Review Order PageThis page allows users to view their web order #, change their payment information, change their order information, view items in their order, and continue to play their order.
Thank you PageThis page allows users to view their web order #, payment information, order information, and view items in their order.


Creative

Below are a list of comps and screenshots for each part of the check-out flow. Click on indiviual images to view larger versions.

 Shopping Cart

 Payment Info

 Address Verification

 Order Info

 Review Order

 Thank you



Page Contents

Shopping Cart Page


NameDescriptionTypeConditionsAddedValueExample

BreadcrumbNavigational element, displays the full taxonomical path from the parent category to it'a lowest level subcategory.text, hyperlink

Home > My Ferguson Dashboard > Quote Center


  • No labels