Struggling With Abandoned Shopping Carts?
If you run an osCommerce e-Commerce store, you've probably given some thought to abandoned carts - and how they affect the number of sales you make.
It's fair to suggest the default osCommerce checkout routine isn't as streamlined as it could be - with up to 9 screens to navigate it can be a frustrating and gruelling task for customers to complete.
Funnel Testing.
We recently used funnel testing to analyse the checkout completion rates of several osCommerce stores, and found that a typical completion rate for EACH CHECKOUT STEP is around 60-80% - leading to overall checkout completion rates hovering around 10-15%.
Obviously, if you're spending time and energy (and money!) to drive visitors to your site - putting up with this "leak" is a pretty inefficient way to operate.
Fixing the Leak.
Whilst performing conversion testing on a clients site, we decided that we'd work on plugging this leak. We set about creating a new streamlined and refined checkout routine, with the aim to reduce cart abandonments and increase sales.
We figured the most effective way to do this was:
- Remove the number of steps in the checkout process (we decided on one page!).
- Reduce the amount of information a customer has to enter to the bare minimum (gender, fax, etc not required).
- Make all the steps as clear and straight forward as possible. (use plain English, tool-tips, etc)
- Use fairly aggressive error checking to catch errors up front (and hopefully reduce frustration).
We then began to brain-storm what content would have to appear on the revised checkout page.
We came up with the following sections:
- Billing Information
- Delivery Address
- Delivery Option
- Payment Method
- Order Review
Billing Details.
On this section we first added a customer title drop-down, which is a simple replacement for the less useful (and easily ignored) gender radio buttons.
The client was already using a postcode look-up service to fetch the customer address, so those re-ordered fields have remained in place.
We've added a confirm email address field, and lastly dropped the password fields - this client has chosen to operate without customer accounts.
Delivery Details.
In section two we are collecting the customers desired delivery address. To save screen real estate the default selection is "Delivery Order To Billing Address" - indeed this option will be suitable for most customers.
Clicking on the "Use Different Delivery Address" option will reveal the address fields for a new shipping address to be entered.
In an effort to make it as clear as possible, we've used small "info" tool-tips that make it clear what each option represents - activated with a simple mouse-hover.
Shipping Options.
This section is perhaps the most straight-forward - at first glance it appears very similar to the default osCommerce shipping selection screen.
There is some clever stuff going on behind the scenes though. Firstly, changing the shipping address in the section(s) above will re-calculate the shipping options listed here - displaying the relevant options for the selected country, region, etc.
Secondly, by clicking on the various shipping rates, the totals in the "Order Review" section are updated in real time, so the customer will see the final order amount instantly.
Payment Options.
This section is perhaps the trickiest to deal with - as the client has a range of different payment options, which all behave differently.
We decided to use a drop-down menu to list the payment options. Selecting an option will reveal further payment information (if any).
For example, selecting "Credit / Debit Card" will show the credit card payment fields, selecting "PayPal" will show instructions on using PayPal, and so on for bank transfer, telephone, fax etc.
Order Review.
This section should look fairly familiar. As above, it interacts in real time to shipping changes - instantly displaying updated totals. For example, choosing a different shipping option or changing the shipping country will re-calculate the totals displayed in this section.
Catching Errors.
We decided to use fairly aggressive error checking on the payment page - ensuring that all required fields are present and in the correct format.
The checks are made initially using Javascript, then using more robust PHP checking during order processing. The Javascript highlights the problematic fields red.
Ideally, we can catch all potential problems before the form is submitted - avoiding the delay of an additional page load.
Order Processing.
After filling out the payment screen information, the customer is shown a "processing" message as the order details are processed.
What happens next is largely dependant on the payment method selected, but the general process looks something like this:
- Check form details entered for errors
- Create account for customer (if required)
- Store order details in database
- Redirect to any required payment pages - e.g. off-site payment processor, 3-D secure check, PayPal site, etc
- Redirect to checkout success screen
Conclusions.
By implementing the new checkout routine we increased the conversion rate to 52.38%, up from 21.62%, over a comparable period. That is to say, twice as many people completed checkout after putting items in the shopping basket - quite a difference!
Programmers - Want to Give This a Try?
We've put the basic checkout files online below, with support for basic payment and shipping modules. You will need to be familiar with PHP programming and osCommerce to set this up. Back up your files before attempting installation, and be sure test on a non-live version of your store!
Download (osCommerce-2.2rc2):
Store Owners - Want a Streamlined Checkout for Your Store?
We have extensive knowledge of many e-commerce platforms including osCommerce, Magento and ZenCart. If you're running a store that could benefit from a streamlined checkout process get in touch and we'll do all we can to help.