CRO Study: Fashion Ecommerce From Bag to Checkout

Big Brand Teardown

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?

Ecommerce Statistics
Look out for need-to-know Ecommerce Statistics throughout this post.

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.

Nasty Gal ecommerce bag summary

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.

Amazon US and Amazon sites showing shopping cart symbol

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.

M&S browser title and shopping bag icon Topman uses bag and basket terms

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.

Ecommerce Statistic #1
76% of luxury fashion brands keep the ‘Add’ button above the fold. – HitSearchLtd

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.

Missguided product page

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.

  1. No noticeable change on the page.
  2. 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.
  3. 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.

Two versions of ecommerce shopping bags

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 basket summary overlay

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

Ecommerce Statistic #2
Unexpected shipping costs are the biggest reason (28%) for abandoned carts. – VWO

I was delighted to see many fashion ecommerce sites being upfront about shipping costs before the checkout, like Gap.

Gap delivery price options

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.

Item cost with delivery excluded

Jimmy Choo add an estimated shipping cost prior to the checkout, giving a more accurate figure for the final cost of your purchase.

Estimated delivery cost highlighted

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.

Ecommerce Statistic #3
58% of digital shoppers have added extra items to their shopping basket to qualify for free shipping”. – Econsultancy

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.

Clarks site navigation and free delivery offer

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.

Boohoo homepage and bag overlay showing cheap delivery offer

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.

Ecommerce Statistic #4
48% of online shoppers look for trustmarks when deciding whether to shop on a website they don’t know. – Econsultancy

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.

Trustmarks: PCI Compliant and  GeoTrust

Guest checkout

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.

Ecommerce Statistic #4
23% of online shoppers will abandon their purchase if they have to create a new user account. –VWO

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.

Jimmy Choo checkout as guest

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.

Asos social login page

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.

image representing average form conversion rate uplift from using Formisimo From 0% to 24% Form Conversion Uplift Get the insight that increased form conversions by 24% (and rising)
Latest Insight
Improving Insurance Forms Reviewing the top 31 insurance forms