Laddawn.com : 1. Addresses - COMPLETE

Overview

The purpose of Addresses within the Checkout process is to allow users to be able to review their Bill-to and Ship-to addresses for their order. Addresses is the 1st of 6 steps in the "Checkout" process and they will access this screen after they click "Checkout" in the cart (see screen below). Also, this is the 1st time the user will see a running order total of how much their items will cost, discounts and a cart total. This Order Total will be displayed on all screens in the Checkout process and can change based on choices made during Checkout. There will be multiple options for changing ship-to addresses, including zip codes with multiple matches, adding a new address, and customer pickup orders. Changing the zip code in the checkout will send the user back to the cart where they can update the zip code and reprice their items.

How the user gets to the Checkout - Address screen

The user clicks "Checkout" button and will start the Checkout process.

The Checkout Progress Indicator

The progress indicator helps orient users to where they are in the Checkout process. Addresses is the 1st step in the process and will be the selected state while the remaining options will be disabled until "Save and Continue" has been clicked.

Initial Progress indicator - 1. Addresses
The orange cart icon highlights the step the user is on. The text for the step being worked on is bold (Scala Sans 16px, bold, df7a1c). The user cannot move forward (any part of the progress indicator that is in gray #CCCCCC, text is Scala Sans 16px, regular, #999999) until the user completes the step they are on.
Moving forward 1 step - Shipping & Packaging
The completed Addresses now display an orange dot as well as a an orange line (df7a1c) leading up to the step being started/worked on. The Addresses text now moves to regular (Scala Sans 16px, regular) while the new in focus section (Shipping & Packaging) has the orange cart and bold font.
Moving Back - 1 step - shipping & Packaging
The user can go back to review/update previous step(s). In this scenario, without completing and saving current section it will return to gray indicator.
Moving Back - several steps
The user looks to return several steps and go back to Addresses after completing Addresses, Shipping & Packaging and Labeling. Once the user leaves Payment and returns to Addresses, the user will have to complete the earlier steps again to get back to Payment.
Step 6 Giving not available if user spends under $100
If the user spends under $100, step 6 Giving will be dynamically removed from the Checkout process. This would leave a 5 step process with summary being the final step with the entire checkout process centered on the page.

Bill-to Address

Bill-to Address - common user (See Design 1 below)

The Bill-to address is determined by the org number the distributor is working under. The bill-to address is displayed 1st and followed by the ship-to address.

Ship-to Address - Multiple Scenarios

Acquiring ship-to address data starts back in the widget when a user looks for a Laddawn product and enters a zip code for the location the order is to be shipped to. It carries through into the cart and finally lands here in the Checkout process. Based on the number of addresses a distributor has for a given zip code. These are the ship-to scenarios:

1. User has 1 ship-to address for zip code. (Design 1)

List the 1 address on file for the ship-to zip code. Also, user can add an address for this zip code (See Design 5).

Design 1

2. User has multiple address matches for zip code (Design 2, 2a, 2b)

Display text telling the user how many address matches there are for zip code. The "Save and Continue" button remains disabled until user makes a selection (Design 2). The addresses appear in alpha order within the list box based on Company Name (Design 2a). The user selects an address and the list box closes. The selected ship-to address displays in the dropdown box.

Design 2	Design 2a	Design 2b

3. User has no ship-to address for zip code on file (Design 3, 3a, 3b)

In this scenario, we will display form elements to have the user add a ship-to location for this zip code.

Here is an overview of the form elements:
a. One of my customers/one of my branches (required - needs validation). User must select a radio button or this entry. Note: This field shows up on the Checkout summary screen.

b. Company Name entry field (required - needs validation). User enters a customer company name. Field validates once cursor leaves entry field. Only an empty filed will prompt an error message. All data types accepted.

c. Address 1 (required - needs validation).

d. Address 2 (optional). This field shows up on the Checkout summary screen.

e. Attention. (optional). Display any characters. Note: This field shows up on the Checkout summary screen.

f. The city, state and zip code will display as read only data below the Attention entry box.

g. The user has entered a "tag by location" without an address on file (Design 3b). The user has entered the comnpany name already and has to complete data entry with selecting One of my customers/branches and adding a main address.

Design 3	Design 3a	Design 3b - Saved item, add tag on the fly flow

4. CPU Order (Design 4, 4a, 4b, 4c)

The user has placed a CPU zip code (Sterling, Reno, Atlanta, Iowa, Dallas) into the widget and now this info is carried into the Checkout process. The user needs to enter their destination for the delivery for tax/label purposes. They can find out this information by rolling over the help icon after "Where do you plan to deliver this order?" (Design 4c)

Since we don't know destination, we prompt them to input a zip code to to start a quick search (Design 4). The user will input the zip code and click "Find." (Design 4a) Find button is disabled until data is placed into the zip code entry.

After clicking "Find", the options are:

a. a single ship-to address is available, display address as read only data (Design 1 above). Save and Continue button becomes enabled.

b. multiple ship-to addresses (The designs below display this full scenario, Design 4b), A list box appears for multiple matches. Once user makes a selection the Save and Continue button becomes enabled.

c. no matches found. Have user add a new ship-to address (Design 3 + 3a above).

Design 4	Design 4a	Design 4b	Design 4c

5. Add a new address for this Zip Code Link (Design 5, 5a)

Users can add a new drop ship locations by clicking the "Add a new address for this zip code" link (Design 5). When clicked, new ship-to form fields will slide below existing content. Existing content will become disabled (Design 5a).The user adds data into fields and this becomes Ship-to address of record after the user clicks "Save and Continue." Clicking the "Cancel new address for this zip code" will cause the link to slide up and enable existing functionality.

Design 5	Design 5a

Multi-city zip codes - (not shown in designs)

Some zip codes represent multiple cities (towns). For example 04468 is for:

Alton, ME
Argyle, ME
Indian Island, ME
Old Town, ME

In scenarios 2 and 5 above, we will replace the static city/state/zip code lines in the above designs, with a drop down menu defaulted to "Choose city."

6. Bill-to and Ship-to zip code addresses are the same (Design 6, 6a )

User wants to ship his items to his bill-to address in a quick way. If the Bill-to zip code matches a ship-to zip code then a check box will appear below the Bill-to address (Wireframe 6, 6a). Clicking this check box will automatically select the matching ship-to address in the Ship-to address list box (Design 6a). This drop down remains disabled as long as the check box is selected.

Design 6	Design 6a

Change Zip Code (return to cart) link (All Designs)

Clicking this link will allow users to go back to their cart and change the zip for this order (this will user to reprice the order based on new zip code. They will have to restart checkout process again).