An ecommerce checkout failure and how to solve it.

Swedish clothing giant H&M has poured millions into e-commerce strategy to increase profitability in the long term – but how well is it working? We’ve made a quick analysis and looked more closely at the outcome of their investment.

 

The customer’s journey How to starta a streamline journey to purchases

To find the H&M website, we’ll start by googling “HM.”

Alternatively, we can scroll over to “hm.se” (in Sweden):

But what happens when you go to hm.se? You’re redirected to https://www.hm.com/entrance.ahtml?orguri=%2F.

There, I need to look up Sverige/Sweden on the list of countries to get to the Swedish landing page. A smarter solution would be to redirect the visitor automatically to the Swedish page since it’s quite clear that this is the site I wish to land on (hm.se).

They can also identify where I’m located by checking my IP and redirecting me to the proper website – so I can get started more quickly.

 

The Swedish landing page

A lot of work has been done to bring forth the H&M style with photographic material, but they fail to use the whole width of the page.

• The image below is from a laptop, and as you can see, there’s still a lot of space on both sides that haven’t been used to elevate the feel of H&M´s fashion. The images have a maximum width of 990px, which limits our visual experience.
• Throughout the page, there’s mixed language content (English and Swedish)
• On the critical surface of the page, you’ll find link titles such as “Buy now, pay later”, “Gift cards” and “Click & collect”. I would have translated these into Swedish + changed places with the search engine.

Search Engine

 

• I want to put more focus on the search engine, having noted in previous tests that visitors are arriving at a multi-product website shop more and more significant (i.e. for more money) if they use the search engine. It helps them find what they’re looking for quicker = a more satisfied customer.
• Placing the pointer of the mouse directly in the search box when the shopper enters the website allows him/her to start their search immediately without having to look for the search box or waste time clicking their way to the desired product.
• When it comes to e-commerce and websites with a massive product range such as H&M, it’s somewhat inconceivable that the search engine gets as little attention as it does. They could increase their sales and profit by aiming the spotlight on this.

This is what it might look like with an enhanced search engine:

 

Navigation menu

Let’s say I want to buy a hoodie and click on MEN > Hoodies & Sweatshirts.

• A mega menu is a good thing, but does it show what the visitors are most often looking for?
• Four columns in which columns 2 and 3 make up the selection. I would have brought these up to columns 1 and two, so the visitor can start browsing through the products in the easiest possible way.
• Why such a heavy mix of Swedish and English language content?

 

Category page

My first impression is of a rather messy menu in black and white – you get confused when offered so many options.

• I can understand they’d want to highlight the Conscious and Spring collections, but doesn’t it steal attention from the customer’s journey?
• There’s so much focus on membership even though it’s not the right moment to promote this. I’ve just started looking for a sweater and might be interested down the road, i.e. when I’m ready for checkout and can make use of any discounts/benefits a membership might get me.

 

Produktsidan

I choose a beige-coloured hoodie and move on to the product page.

• I can’t see any pictures of a model wearing my hoodie, which I did on the previous page.
• I can’t see what it looks like from behind or from the side.
• The product title is tiny, which affects both SEO and conversion. I don’t see any product information at first sight but have to scroll further down to find it.
• I always recommend giving the ‘add button’ an actual colour that catches the shopper’s eye. Black is part of the H&M design but have they tested what other colours might do, such as green?
• The ’add button’ text I’d like to work with, for example by testing a more elaborate version such as ’add to cart’, which is a more evident call to action for our shopper.
• At the bottom right corner, I’ve now spotted some membership info that might benefit me. At this point, it makes more sense to bring it out. The trouble is I can’t find a link to click on anywhere so I can get more info on this membership thing.
• It’s a good thing to highlight product reviews and shipping info.

 

When I click on “add” the product is placed in the cart, and now I get a purchase notification at the top right corner of the page (it’ll disappear in about 3 secs):

• Once it’s gone I’m still on the same page, do I want to keep shopping or head on over to the checkout page?

 

 

I want to check out and pay for my product, so where do I go now?

There’s a minimal indication at the top corner of the page that lets me know I’ve put something in the “shopping bag.”

• I would have put this in bold or in a whole different colour to make the shopping bag more visible.
• I also would have added a shortcut to the checkout page – for those shoppers who wish to complete their purchase immediately.

I did my little version of an easier to find checkout route by:

• Putting the shopping bag in bold colours
• Adding an apparent shortcut to checkout

.

I did my little version of an easier to find checkout route by:

• Putting the shopping bag in bold colours
• Adding an apparent shortcut to checkout

 

Kassan

When I move on to check out, I’m immediately stopped at the gates.

• I haven’t shopped here before – why is “Returning customer” shown first?
• I want to complete the purchase quickly and easily.
• Once again, everything is black and white – it just seems to clump together somehow. In this case, it’s the login bit that collides with my order, and now I’m confused.

 

• If I scroll further down, I can see the option of moving forward as a “New customer” in two different ways. Which should I choose when none of the two has been highlighted?
• This section ought to be placed above the “Returning customer” option (if you can’t cookie-identify that a customer is a returning one).
• 
  

 

 

This is what checkout should look like

• A more apparent distinction between New/Returning customer and my order.
• A more precise price tag – i.e. a more significant text that’s easier to spot.
• Less focus on discount codes, the box should be there, but right now it’s taking up too much space.
• New customer and Returning customer should switch places on the page.
• H&M has most to gain on customers becoming members + completing their purchase, and that’s why I’m changing the membership button to a bright green + adding the 10% registration discount

Before

 

 

 After

 

 

I check out as Guest

• Once again there’s a lot of black and white going on, making it all just float together on the page. No clear distinction between my information and the order.

 

 

I choose a Shipping Method:

• Once again, a mix of English and Swedish (during opening hours).

 

 

 

I move on to Complete Purchase:

• Jag can either pay with a credit/debit card or through PayPal.

• I’d like to see what the drop-off level is at each stage of the checkout process. I think we have a shopping cart abandonment rate of roughly 50% throughout the whole checkout process.

 

Jag skulle vilja se hur stort bortfallet är i varje del av kassan. Personligen tror jag att vi har ett bortfall på uppåt 50 % i kassa processen.

 

Do you own e-commerce and want to increase your sales?

Contact us for a no obligation chat about the options available to you and your e-commerce.

.