Laddawn.com : 6. Giving - COMPLETE

Overview

Giving is the 6th and final section of the checkout process and only is shown for orders totaling $100 or more. If the total is less than $100 then only 1st 5 steps of Checkout get displayed and the this step would get skipped. The Giving step has 2 main components, the main charity slider and the charity selection/confirmation functionality. The rotating slider is to give users a quick introduction into each charity while below it you simply select the charity you want Laddawn to donate to.

1 The Charity Rotating Slider (Design 1, 2, 3, 4, 5)

Below the header/subheader text is the rotating charity slider. it is meant to give the user a quick overview of donation options. Each charity will contain a main image/logo and piece of html introductory text. Any selection on slider has no bearing for choosing a charity to donate to. You must click a "Select" button below logos on bottom of page to make a donation. The slider functionality is:

starts on the 1st charity (Easter Seals) and auto rotates to charity 2,3,4,5 every 5 seconds. When all 5 have been cycled through, it will restart on 1st charity.
user can cycle through charities by clicking small circle(s) below.

2 Selecting and Confirming a charity (Design 6 + 6a)

The user clicks a "select" button from 1 of the 5 charities.
The other 4 non-selected charity logos fade out to 20% opacity and all the "Select" buttons fade away.
The selected charity has a small green confirmation check fades in place of the "Select" button. (Design 6a). After 2 seconds, the entire checkout area fades away and the user is taken to the Shop page.

3 What happens when a user clicks a link instead of one of the charity buttons?

For example, a user can click on the Laddawn logo and go straight to the shop page. No Acknowledgement or confirmation will be displayed.

For any non-select button click, we want to capture these independently. We would like to place these into a "You decide" bucket and Laddawn will donate to a charity of its choice . It would be great to know what percentage of people are not selecting our charity buttons. This includes the Laddawn logo, My Account/Log out link, and any footer links.

Final Design Comps
Easter Seals	2. Nature Conservancy	3. Red Cross	4. Boys and Girls Club	5. American Cancer Society

6 - Confirmation - select charity	6a - Confirmation - final			Original Charitable giving page

Old Designs - Do Not Use
Rev 2 - Concept 1	Rev 2 - Concept 1 - Confirmation The main hero image and everything below it would slide down and display the confirmation. After 2 seconds, the user would be taken to the Shop page.	Rev 2 - Concept 2 Use a simple slider to display charity options (along with simple mission statement) and then have user click logo below to make selection. http://unslider.com/	Rev 2 - Concept 2 - 2nd Charity highlighted	Rev 2 - Concept 2 - Confirmation

Old Designs - Giving - Easter Seals	Old Designs - Giving - Red Cross

Laddawn.com : 6. Giving - COMPLETE

Overview

1 The Charity Rotating Slider (Design 1, 2, 3, 4, 5)

2 Selecting and Confirming a charity (Design 6 + 6a)

3 What happens when a user clicks a link instead of one of the charity buttons?

Attachments: