Summary Overview - Part 1

Summary is your final point in the checkout process for you to review your order. It combines all 4 checkout sections (Addresses, Shipping & Packaging, Labeling, and Payment) into 1 last collection of info for the user to review before clicking "Place Order Now" button. Part 2 will detail what happens after a user clicks the "Place Order Now" button.

Cart/Order Name

  1. If a cart name exists (Design 1)
    The cart name will continue forward as order name (which the user will view in Order History). It can still be edited here. The order name entry field will remain editable and creating a new name or changing a name will be finalized once the user clicks "Place Order Now."
  2. If no order name exists (Design 1a)
    Then we will use the drop ship location and the current date as the cart name. This can still be edited at any time.

"Copy confirmation summary to"

This will be an optional entry field to allow users to forward order confirmation(s) to selected email addresses. 

  1. Email address input. In putting email addresses will use predictive auto-complete. As the user types, we will recognize both name (dawn) and email address pre-fix (dseiple@...) from the store of contacts associated with the user's sales organization. (Design 2)
  2. Where the addresses com from? "Copy order summary to..." will pre-fill based on a) contact 1 (Jen) placing contact 2's (Bob's) saved item in a cart, or checking out contact 2's (Bob's) saved cart; and b) pre-set notification preferences (Jen always wants to copy Jim on her orders.)
  3. Non-contact pop-up email warning (Design 2a). Give pop-up warning for entering a non-contact email address, to help avoid unintentionally sending a copy of the order with Laddawn pricing to a distributor's end user. This warning is detected when the user clicks the "Place Order Now" button.

    Clicking "Yes" will keep the email and cause this shadowbox to slide off the screen to the right with the "Confirmation" following it in its place. Clicking "No" will close the shadowbox and allow the user to remove it from the "Copy confirmation summary to" entry field.

"Change" links in sections 1-4

Clicking on any of these links will take the user back to the individual sections of the checkout process to be changed/reviewed as needed. Any change to these will require the user to go through the successive checkout steps again.

Section specific design details

  1. Addresses - CPU customer (Design 3)
    Display the CPU pick up data 1st then show the shipping address 2nd.
  2. Shipping & Packaging - Display of multiple bundles (Design 3a) 
    After 1st bundle is displayed, leave 20 px vertical space and then place a 1px gray dashed rule (#eeeeee). After the rule place 20px vertical space and then display 2nd bundle.
  3. Payment (Design 3b)
    Reference PO Sample - Always display Print on Labels 1st if it exists, then add pack slip and bill of lading separated by commas).
    Pay by Credit Card Sample - Sample of pay by credit card layout.
  4. Labeling (Design 3c)
    Users can cycle though multiple item labels by clicking on the left/right arrow button if they are active. 

 

Design 1

Design 1a


Design 2 - email auto-fillDesign 2a - Popup warning about email going to non-contact
Design 3 - Addresses with CPU selectedDesign 3a - Shipping/bundling, display of multiple bundles
Design 3b - Payment, display of credit card dataDesign 3c - Labeling



 

Overview - Part 2 (Confirmation)

This is where we detail the confirmation portion of the process. It will describe what happens after a user clicks "Place Order Now."


Order confirmation on web screen, 2 scenarios (Design 5)

  1. Checkout total is over $100, and cart is being checked out by the distributor (Design 5)
    The confirmation notification will be displayed over the Summary page in a shadowbox. The user gets to make a charity choice and his only option will be to click the "Continue" button which takes the user directly to step 6, Charity page.

    The confirm notification shadowbox will contain the following:

    a. an order number.

    b. email confirmations. The 1st confirmation is always listed as the person who checked out the order. Any following confirmations will be from the "Copy confirmation to" entry fields.

    c. a print confirm link

  2. Checkout total is under $100 or the cart is being checked out by CE (Design 5a)
    The confirmation notification will be displayed over the Summary page in a shadowbox (Design 5a does not reflect this). The user's only option will be to click the "Close" button which will bring the user to the Shop page.
    The confirm notification shadowbox will contain the following:
    a. an order number.
    b. email confirmations. The 1st confirmation is always listed as the person who checked out the order. Any following confirmations will be from the "Copy confirmation to" entry fields.
    c. a print confirm link
Design 5 - Purchase is over $100

Design 5a - Purchase is under $100

Note: On 1-23-14 we decided background would still be summary page, not the Shop page.

Email order confirmation

For release 1, we will rely on the current system for generating email order acknowledgments.

  • Generally speaking we will generate 1 Optio order acknowledgment for each bundle in the overall order; however, under certain circumstances, one bundle may generate two order acknowledgments, and two bundles may be covered by a single order acknowledgment. This has to do with the way orders are defined today in Avante.
  • We will make use of the current sales order acknowledgment format. Should a piece of information need to be added, changed or deleted in order for this format to make sense, we will customize slightly the current form - for example, we may need to add a master order number, to tie the separate bundles/sub-orders together for the customer and CE. 

In a future release we would like to:

  • generate a single order acknowledgment
  • format the acknowledgement to have the look and feel of the new website
  • embed a link within the email that brings the user back to order tracking pop-up in order history

 


 


Old Wireframes - Do Not Use

 

 

 

Attachments:

mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary.png (image/png)
Checkout_Summary.png (image/png)
Checkout_Summary_CPU.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary.png (image/png)
mockup_Summary - Checkout.bmml (text/xml)
mockup_Summary - Checkout.png (image/png)
Checkout_Summary_1.png (image/png)
Checkout_Summary_1.png (image/png)
Checkout_Summary_1a.png (image/png)
Checkout_Summary_2.png (image/png)
Checkout_Summary_2a.png (image/png)
Checkout_Summary_2b.png (image/png)
Checkout_Summary_3.png (image/png)
Checkout_Summary_3a.png (image/png)
Checkout_Summary_3b.png (image/png)
Checkout_Summary_4.png (image/png)
Checkout_Summary_4.png (image/png)
Checkout_Summary_4.png (image/png)
Checkout_Summary_4a.png (image/png)
Checkout_Summary_4b.png (image/png)
Confirm_1.png (image/png)
Confirm_Giving_2.png (image/png)
Confirm_Shop_2b.png (image/png)
Confirm_Shop_3.png (image/png)
Confirm_Shop_3.png (image/png)
Confirm_Shop_3.png (image/png)
Confirm_Giving_2.png (image/png)
Confirm_Shop_2b.png (image/png)
Confirm_Giving_2.png (image/png)
Confirm_Shop_2b.png (image/png)
OrderHistory_Wachusett.png (image/png)
Checkout_Summary_1b.png (image/png)
Checkout_Summary_PlaceCancel_btn.png (image/png)
Checkout_Summary_1c.png (image/png)
Checkout_Summary_1c.png (image/png)
Checkout_Summary_1b.png (image/png)
Checkout_Summary_2.png (image/png)
Checkout_Summary_4.png (image/png)
Chuckout_Summary_emailShadowbox.png (image/png)
Confirm_1.png (image/png)
Checkout_Summary_4b.png (image/png)
Checkout_Summary_4c.png (image/png)
Checkout_Summary_1c[1].png (image/png)
Checkout_Summary_1c[1].png (image/png)
Checkout_Summary_emailShadowbox.png (image/png)
Checkout_Summary_emailShadowbox.png (image/png)
Checkout_Summary_emailShadowbox.png (image/png)