Herman Street Shopping Cart

Tags: Art Direction,Project Management,HTML,CSS,Ecommerce Optimization,A/B Testing,UX


Before I got my hands on it, Herman Street's shopping cart was a UX nightmare. It was annoying, inconsistent, and confusing. Bounce rates were high. Abandoned carts were plentiful.

I was the sole designer tasked with fixing the cart. I drew from research and case studies on shopping cart design, as well as mining years of analytics data. Working within very narrow design parameters (much of the framework of the site couldn't be changed), I redesigned the entire cart from the ground up.

The new checkout process provided a significantly improved user experience. It guided a customer through the processes intuitively, preventing snags and building trust click by click. The end result was a 15-percentage-point, 30% total increase in completed checkouts.


The main cart view. The clear hierarchy provides an easy overview of the contests of the cart, the process of checking out, and the actions a customer can take.

cart-main

The Payment Information Page includes as few form fields as possible so as not to be an intimidating wall of questions. Each field is subtly highlighted until filled out to ensure customers don't miss any. If they do, they are gently directed to the missing information.

The shipping section intelligently displays only what is necessary to get customers their orders. Since many Herman Street orders are for software downloads, shipping information can often be omitted altogether.

cart-payment

The Review Order Page provides the final overview of all information the customer has entered, offering one last chance to make any changes before finalizing the order. All changes can be made right on this page without refreshing or sending the customer to a previous page to keep the checkout process moving forward smoothly.

cart-review

The Confirmation Page displays a well-organized receipt with a custom print stylesheet. If the customer checked out as a guest, the site offers an opportunity to create an account with the information the customer already input.

cart-confirmation