In conversion rate optimisation working backwards from the end of the funnel is a useful method for turning a critical eye on the customer journey. Today I’m looking at what happens immediately before shoppers reach the checkout. What drives conversion at this point and what can cause shoppers to abandon the site?
I visited 20 fashion sites and chronicled the journey between adding an item from a product page and starting the checkout. What sounds like a small part of the transaction actually proved to be fraught with obstacles.
Basket or bag – how important is it for the customer experience?
What’s in a name?
In ecommerce we’re used to talking about virtual carts and baskets. Fashion ecommerce favours the ‘bag’, mirroring real world high street shops. Exceptions that use the term basket include department store websites and online shoe shops.
I thought there was no language challenge with the term bag but Nasty Gal proved they could find an alternate Americanism by calling it a tote.
Familiarity is the main issue here. What will convey the idea best to shoppers? UX Candy noticed that Amazon UK use a cart icon but call it a basket. Commenters speculated that this may be a deliberate choice to ensure the maximum number of people understand the link.
In general, the sites I visited were consistent between the terminology they used and the icon displayed. However, in some cases I noticed the term ‘basket’ used in tooltips, browser titles and supporting links when ‘bag’ was the dominant term on that site.
This raised two questions:
- Are these discrepancies intentional?
- Is there a danger of jarring shoppers who have to translate back and forth between two terms?
User testing with tasks to add, remove or otherwise interact with the online shopping bag could provide interesting insight.
‘Add to bag’ button placement
If you’re optimising any web page, testing button placement should be high on your priorities. ‘Add to bag’ is the call to action you need visitors to heed.
All the sites I visited used bold, attention grabbing call to action buttons, above the fold of the page. Missguided, for example, make the button big, bold and keep it close to the product image.
Site behaviour for basket adds
What do you expect when you select an item to buy? You want to know that the site you’re using recorded that instruction, right? I observed several different ways for sites to behave when I added items to my bag.
- No noticeable change on the page.
- An overlay appeared showing a summary of the item and a button to checkout. This then either disappeared after a few seconds or remained open until I dismissed it.
- Sent to the basket or checkout.
Only one site didn’t change when I added an item and it unnerved me. Did those shoes go in the basket?
The third option, taking shoppers straight to the checkout, a la Schuh, might speed up the user journey and encourage quick buying but could you lose out on a higher order value by interrupting the browsing process?
“What’s in my bag?”
All, except one site, displayed a tally of how many items I had in my bag. Almost half of those also told me the total value of all the items. Feeding back in this way is useful to shoppers who might have a maximum limit or might forget what in their bag as they continue to browse. I’d love to compare these two designs in an A/B test and see if it makes a difference to the final order value.
An overlay containing a brief summary of each product in the bag is an easy to access reminder for shoppers. It relieves shoppers of the effort of remembering, providing a more natural and pleasant user experience.
John Lewis use the basket summary overlay to show a picture of the item, an add and remove facility, let’s you know when you’ve qualified for free delivery and has two checkout buttons.
Delivery charges and free options
I was delighted to see many fashion ecommerce sites being upfront about shipping costs before the checkout, like Gap.
Showing the total cost of the order, including delivery, ensures there are no nasty surprises for shoppers. Introducing an additional expense after the initial decision to buy is proven to cause checkout abandonment.
Unfortunately 7 out of 20 sites weren’t totally transparent regarding shipping/delivery costs. One site noted that price excluded delivery, one linked to delivery charges instead of displaying options, while another told me how much standard delivery costs but didn’t give me a total cost.
Jimmy Choo add an estimated shipping cost prior to the checkout, giving a more accurate figure for the final cost of your purchase.
Free shipping is a nice touch, if you can afford it. Many fashion sites offer free delivery options, including free home delivery when you spend over a certain amount.
Elastic Path recently shared an idea for cross-selling, which used smart recommendations to help shoppers reach the threshold for free delivery.
Free options could mean higher order values and will act as an incentive to buy from that retailer rather than one that charges. Clarks alert shoppers to free delivery and collection high up on every page.
If shoppers qualify for free delivery this should be automatically calculated and selected in their basket. One exception that I noticed was on Gap.com. I qualified for free shipping but Gap selected the paid option. This could be because the free option is very slow and they find most shoppers prefer faster delivery – only their data will tell.
Here are 12 more examples of how to present ecommerce shipping information.
Push to the checkout
It was interesting to see how different sites ushered me toward the checkout (or didn’t). The majority encouraged me to continue shopping after a basket add by leaving me on the product page. One site, Schuh, took me straight into the checkout, bypassing a basket stage.
Boohoo show a great example of driving sales through urgency. In a single view there were four separate messages telling me about a limited time only delivery offer, including a count down.
The button text was fairly standard, for the majority it simply alerted me to the checkout or prompted me to pay for my items. 8 out of 20 sites included the word ‘secure’ or ‘securely’ in the call to action, promising a safe transaction.
Providing a secure checkout
Shoppers look for reassurance that they’re buying from a legitimate website and that the sensitive information they provide will be kept safe. Well known brands such as Marks and Spencer (M&S) have built trust with their consumers over the years. However, online transactions are associated with greater risks. M&S use language and symbols to convey security.
Lesser known sites rely heavily on trustmarks.
4 of the 20 sites I reviewed made no assurances about security at all as I headed into the checkout.
Those that did, such as Boohoo, did so very well e.g using the word ‘secure’ several times closer to the checkout. Returning customers are prompted to ‘Log in securely’ while new customers are encouraged to “set up your secure account”.
Boohoo also display security badges before the checkout. Nervous shoppers should feel confident to continue.
There’s one final hurdle before the checkout that lots of ecommerce retailers are guilty of putting up and that’s a login wall. A login wall is when you prompt users to either sign in to an existing account or create an account before they can buy.
Getting users to log in is useful as you can deliver a more personalised service and they can save their details for faster transactions. However, new customers, who might be in a hurry or might not want to create an account with you yet, are likely to find the login wall frustrating. Jimmy Choo ensure they don’t lose conversions by offering a guest checkout.
Asos, who used to offer a guest checkout route, require all customers to login but provide an easy alternative to a long form with social login. This means creating an account by connecting one of your social media profiles.
One way that could prove to be the best of both worlds is allowing shoppers to checkout and then encouraging them to create an account afterwards. Boohoo and PrettyLittleThing offer this option.
For more advice on optimising your ecommerce site download our whitepaper.
Improving Insurance Forms Reviewing the top 31 insurance forms