Shopping Cart Checkout

August 2009

Client

Olympus Consumer Product Group

Audience

Olympus Consumers

Goals

Over the years I've seen a lot of terrible shopping carts. Carts that give the user absolutely no indication that their order is successful; carts that force a user through a ridiculous amount of byzantine steps without hinting at where the user is.

Olympus needed this shopping cart to be extremely usable and easy to encourage customers to purchase. We had to keep the process short, providing an opt-in for email newsletters, and very clear what step the user was in.

How it was Done

This project was a lot of fun to code. Our designer, Chris McGinnis, provided me with the PSD and I did the typical breakdown with a print out and some post-it notes. The form sections are coded semantically and with accessibility in mind. Fieldsets and labels are used for each input item. After I set up the initial ASP front end we handed the design over to our programming team to be hooked into the secure processing server.

I think the most important part of this project was the use of a progress bar for each step in the checkout process. I suggested Chris go to Pattern Tap and check out the Breadcrumbs Collection for some inspiration. The final product looks and feels great.

Since launching their online store, Olympus has seen it become a major source of revenue. Marketing efforts through email and Twitter have brought in up to $20k in sales over a week's time.

Link Unavailable