H&M, one of the last big brands to sell online, launched its UK e-commerce site today. 

The launch follows that of Gap and Zara, two other fashion brands late into e-commerce in the UK. So how does the new site shape up? 

H&M 1

Homepage

If you arrive having searched for H&M in Google, you will not arrive at the e-commerce site, but the page shown in the screenshot above. 

There is a link to buy online at the e-commerce site, which is hosted at shop.hm.com, and shop online link is not the most prominent link on the page. Worse still, while there is a huge banner telling visitors they can now shop online with H&M, it doesn’t actually link to the e-commerce site. Nuts. 

Why not just have the e-commerce site on the main page to make it easier for customers to buy?

Here’s the homepage for the online store: 

H&M 2

The online store is in Flash, though users have the option of an HTML version. They seem to look almost exactly the same, so why not ditch the Flash version and avoid any issues with accessibility and SEO? As @gregpower points out on Twitter, none of its pages seem to be indexed on Google so far. 

Also, the site fills barely half the screen, limiting the amount of space H&M has to display its products, for no apparent reason. 

Navigation

My first thought on looking at the navigation menu at the top of the page was: what on earth is ‘divided’? Having looked at this category, I’m still not sure. 

Once you click on a menu, the options are fine, though there aren’t enough sub-categories or filtering options to narrow down product searches. This means that, if I select jeans, I have to browse through three pages of them: 

H&M 3

H&M also makes it harder than it needs to be to actually reach the product page. If you click on one of the product photos shown above, it doesn’t take you straight to the page as you might expect, but opens a pop-up window: 

H&M 4

From here you have to click on one of the products on the right to see the product page, while if you want to get rid of this window and continue browsing, you have to aim for the cross at the top right, when allowing users to simply click elsewhere on the page would have been much more convenient. 

If users have expressed an interest in a product by clicking to go to the product page, adding another step to the process makes no sense. If H&M wants to do some cross-selling, it should do this on the page itself, or when users are viewing the shopping basket.

UPDATE: H&M has also omitted to add site search, something which might have been a useful alternative given the poor navigation. I was so busy picking other faults that I missed this point originally. 

Product pages

The product pages are basic, and could do a lot more to sell products and give customers the information they need to decide on a purchase. 

While the size guide is useful, and the zoom tool works well, certain elements just don’t work at all. For instance, adding the item to the wish list takes you right out of the page when it doesn’t need to. 

H&M 6

Also, there is no information on delivery and returns on the page. This can be found via the customer service link at the top, but this takes customers away from the product page, when it should be simple to provide this information there. 

The delivery options, when compared with most online retailers, are not appealing either. While the delivery charge of £3.90 is about average, the timescale for delivery is poor, and way to vague. 

According to H&M, customers will receive items ‘around one week after we have received your order but during busy periods it may take longer’. This is not really good enough when most other etailers offer a range of delivery options and much more precise information. 

H&M 9

Checkout process

Having added a pair of men’s trousers into my shopping basket, the cross-selling options (treggings, a poncho, and a cardigan) are not really going to appeal to a male shopper. This is basic stuff that H&M really should be getting right.

In fact, these three products are the cross-selling options, whatever you add to your basket, which means that large numbers of shoppers are just going to see products that are totally irrelevant to them. 

H&M 10

Once I select the checkout button, I get another attempt at cross-selling, from the home department. If I want a more relevant suggestion, I actually have to select ‘men’ from the options. 

This is a poor attempt at cross-selling. First of all, it makes no sense to out anything in the way of customers when they are heading to checkout, but the fact that these suggestions are irrelevant is even more annoying. 

H&M 11

With this kind of feature, I wasn’t surprised at having to register before checkout, since H&M doesn’t seem to have paid any attention to checkout best practice, and removing barriers to purchase. 

The checkout is also not enclosed, leaving distractions for shoppers who should be concentrating on purchase, and plenty of routes away from the process.

H&M 13

If you do happen to click one of the navigational links and leave the checkout, H&M empties your shopping bag and places the items in the checkout, which is bizarre. To get back to the checkout, you need to go through your empty shopping basket page before clicking the checkout link. A great way to confuse shoppers. 

H&M 12

H&M is also too strict with form validation, so you can only enter postcodes without any spaces, and if you enter the letter O instead of a zero, this will trigger an error message. Simply by anticipating common user input errors, and not being too strict with spacing etc, retailers can do a lot to minimise abandonment. 

Conclusion

This is a very disappointing site from H&M, as it has so many niggles that spoil the user experience on the site. Serving a Flash version by default when there is a perfectly good HTML version of the site seems utterly bizarre, while there are too many barriers placed between users and finding product pages or reaching the checkout.