A rather broad brief for most eCommerce websites, I would say. However, it took me only a few minutes of recap and browsing to understand where the problem existed.
The checkout page of this website was ‘a train wreck’.
It had little clarity, no use of images, and no element that made it look anything even close to attractive. The checkout page of the store was simply some random text put together in a way that would actually discourage a buyer to go through the purchase.
So…here it was: The challenge – to make it look like a real cart and checkout space.
Considering that there was a world of work to cover, it was easy to get overwhelmed about starting this project. However, it was my end goal to make sure that this page would help significantly improve user experience and simultaneously influence conversion rates.
While assessing the elements that could help achieve this goal, here is what I did–
- Added product images into the cart
- Added an inline validation in the fields of the form
- Added a bar that gives the user a progress update on their purchasing process
- Replaced the dropdown list with a bullet list
- Incorporated logos of credit card companies and PayPal
- Add a link that allows users to continue shopping
- Make alterations to the shape, color, and placement of the buttons
- Add reassuring content that helps users understand that no additional costs will be charged.
- Increase the cache time of products added to the cart to 24 hours
- Worked on output decent errors.
Considering some of the top eCommerce websites and product comparison websites such as Amazon.com, Kipling, and Reebok make their users take these features for granted, I soon found that a large number of middle and low tier eCommerce websites weren’t even close.
In a competitive internet environment, providing a superior user experience becomes key to purchase decisions. It thus became important for us to keep in mind customer standards while redesigning the store’s checkout page.
While I began work on this project, my survey of some of the top eCommerce websites in the United States of America gave me the following insights.
- Find a better logo of the company and find ways to empathize it more.
- Change form fields from two columns to single columns.
- Re-order the credit card inputs to name number expiry CVC
- Even if credit card expiry dates in the past are valid, it should show an error
- Incorporating an image that elaborates how the user can locate the CVC number on the credit card
- Provision for a default country dropdown by leveraging GEO-IP.
- Placing a post code before the suburb. Providing a feature that auto-completes suburb or state based on postcode input.
- Left aligning the Complete Payment Button so that it is right next to the “I Agree” checkbox.
- Increasing the size of the “Complete Payment” tab.
By simply making these basic changes on the checkout page for my client, we were able to witness a 30% rise in conversion rates within the first 3 months.