Design for Conversion - Checkout Page Redesign

A couple of months back we redesigned our shopping cart checkout page - this was a fairly risky project for us. 

Getting the experience right - while always a big challenge - was even more pronounced in our case.  Our customers can only purchase one product at a time as opposed to having many items in a basket (like you’d see on Amazon).  While this “simplifies” the design, it also makes the user experience tricky in that most folks aren’t used to seeing a checkout process like this.

Furthermore, redesigning our MOST critical page presents a ton of inherent risk.  What if we fuck something up?  What if less people buy now?  This could cost us hundreds of thousands of dollars.

But here’s why we knew we had to give it a shot:

The Stats

The most important metric we watch out for on our cart page is the abandonment rate.  This is the percentage of people who make it to the checkout page and then leave without purchasing.  That’s like being on line at a store, product in hand and then putting it down and walking out.

  • Our shopping cart abandonment rate was at about 80% before the redesign
  • Industry average is closer to 60% - 70%
  • That means for every 100 people who clicked through to purchase, only 20 were actually checking out
  • If we could get that abandonment rate down to 70%, we’d see a 50% increase in sales — and if we could get it down to 60%, our sales would double!

Bottom line:  It was worth the risk!

The Question is “How?”

Now that we all agreed that we HAD to take a shot at doing this, the question became, “How can we redesign this page and mitigate as much risk as possible?”.

Like Warren Buffett says, “risk is not knowing what you’re doing”.  I decided we needed more information before we did anything.  So I started doing research and stumbled on this great post from the guys at 37 Signals:  Design Decisions: New signup Form

A lot of my inspiration for the redesign (especially the right column — see below) came from that post.

I also picked up copies of the following texts:

The book on web form design was amazing.  Luke nails the topic and I highly recommend it for anyone designing any kind of form (account setup, lead capture, etc.).

The NNG text was a bit dated but some of the data and principles outlined in the document really helped us make a compelling business case for all of our design decisions.

The Solution:

After going through all of our research and a series of brainstorming sessions with some of the folks in our marketing department, we put together a few different wireframes for the new checkout process.  We ended up split testing 3 different versions and here’s the winner:

Here’s What We Did

1.  Two Column Architecture - We broke the page out into 2 columns.  This allowed us to include additional content in the right column to help remove any objections or anxieties for our customer:

  • "Hand written" note from one of our instructors
  • Emphasis on our 30-day money back guarantee
  • A testimonial from an existing customer

2.  Live Customer Support - Our products are typically priced anywhere from $1,000 - $3,000.  High-ticket items sometimes require more hand holding and therefore we thought a “live” conversation with a customer support rep would eliminate some anxiety for a potential buyer.  So we added a widget from LivePerson to allow new customers to chat with one of our support staff as they were making their purchase.

3.  Step-by-Step - We broke the form out into discreet steps.  This way, a person would know just how long it would take them to complete the entire process.  We wanted to get in front of any frustration a customer would have about going through our checkout page by being as transparent as possible about the process.

4.  Secure & Reliable - We really wanted to emphasize that it was extremely SAFE for a customer to give us their credit card information.  So instead of hiding it in the footer, we showcased all of our security credentials throughout the order form, especially near the order button (e.g. Better Business Bureau accreditation, McAffee security, etc.).

5.  Labels & Text Fields - To make it as easy as possible for folks to get through our order form we did a lot of work on our label alignment and text field sizing.  The Form Design book I referenced above played a critical role in getting this right. 

6.  Contact Info - We wanted to let our customers know that they were starting a relationship with REAL people and not just a website.  So we made it easy to find our toll free number before they placed their order.

7.  Copy & Error Handling - While it’s not clear from the screen grabs above, we put a lot of time into rewriting the copy on this page.  We also completely reworked how we handled errors and presented those errors to the user. 

The Results

The results came back pretty quickly.

Our abandonment rate dropped from 80% to 54%!

So we not only hit our goal, but we exceeded it by 6 points.

Overall, I’d say this was a huge success for us and really illustrates the power of using some simple user experience tactics to make a meaningful impact on the bottom line.

Here’s a higher resolution version of our new page, would love to hear what you think: