The Eclectic Lifestyle Company
St Eval Candle Company
Blue Poppy Art Ltd
The Candle Brand

Online shopping

David Mackley looks at Marks & Spencer and its new look e-commerce system

It's not everyday that we see such a major new e-commerce site launch in the UK. After running its website on the Amazon platform for seven years, Marks and Spencer has moved away to a system developed in house. This has been over two years in the making at a cost of £150m. The brand sees it as crucial in the transition in its development as a multi-channel retailer. It aims to serve its six million online customers better while also hoping to tempt more of the 14.5 million who shop in its stores to buy online.

Websites like M&S have the potential to influence the way consumers expect other e-commerce sites to work, so can be interesting to see what they've done and how your site stacks up against it.

Laura Wade-Gery, who heads up e-commerce for M&S, says: "We're making a big play of being a daily publisher from a style point of view. We need to cater for people who know what they want and for those looking for inspiration."

As such the new site has a magazine style knitted into the e-commerce structure. Research has shown that shoppers who engage with editorial content were 24 per cent more likely to buy, so this may have had a bearing on the increased editorial focus. Of course there are also SEO benefits to rich up to date content as well.

The home page initially loads with a single picture that fills the screen with a simple message, The New Look - very much like an online magazine cover. After a short time this initial image has the other usual e-commerce elements displayed over the top of it.

On a desktop, the menu opens in two stages. This is to allow many more categories. The Home category has six second-level categories such as Living Room, then the third level menu has around 40 choices. This means the Home menu has around 240 category choices; too many for a single menu dropdown. Pictures have been added to some menus as well.

Once a category has been selected you're taken to a fairly typical category page, starting with some introductory text, good for SEO and user experience to aid navigation. Then there's a row of user settings, starting with an indication of how many products are in your chosen category. Alongside that are the usual options to Sort By and number of products per page. This is consistent with other e-commerce sites - clear, logical and simple.

In this section, you can also choose to display clothing pictures as a simple product image or On Model. Also on the category page in the fashion section the images have hover-over and change to an alternate image. This gives a very interactive feel to the site.

Refine by navigation is fundamental here and is strong on the new site. It gives clear options to refine the product selection down to a smaller more manageable group. In kids clothing you can choose by style, size, colour, brand and a price slider. All option groups such as size are initially open to show all options, but you can close each set to simplify things.

Product PageIt's very much a minimalist look here. It's clear the company has aimed at reducing distractions on the product page with all non-essential information stripped out. This is likely to increase the conversion as it focuses the visitor's attention.

Description - In line with the minimalist approach, only the first few lines of the product description are shown. By clicking on More Details a pop-up style screen appears from the right giving all the extra information.

Select Colour - The brand has used colour swatches to select colour. There's no written option next to each. Even if the product has additional colour options, the core colour is still presented and automatically selected. This is probably there as it supports the Refine By navigation for colour.

Stock Levels - M&S is communicating three levels of stock; In Stock, Low Stock and Out of Stock. Indicating low stock is interesting and benefits can be two fold. On a customer service level it informs whether you have to decide quickly to reduce the chance of losing out, and of course at the same time it drives customers to purchase now, again likely to increase conversions.

Progress Bar - A designer arrow slides down the product page pointing to the part that requires the next action, whether this is choosing Colour, Size or Add to Bag. This is useful partly as the Add to Bag button starts off greyed out; for my liking it's too inconspicuous being rather a light shade of grey. New visitors tend to orientate themselves with this element on a product page, so it's usually considered best practise to make it more noticeable. They will probably have done this to avoid buyers clicking the button before the colour and size choices have been made.

Images - Laura's view is: 'If you're shopping online, you're essentially buying a photo." And in light of this, images are 50 per cent bigger on the new site. Additional images and zoom functions are all pretty standard, with some items having 360 degree view options. Videos are available on some ranges and integrated in the same area as the images.

Objection Handling - Key to maximising conversions is handling objections through the buying process. M&S has stripped out any detail on the product page, there are just the words Delivery and Returns to click on. Clicking on these delivers a pop-up style screen that handles the question.

Social integration - Typical links to Facebook, Tweet, and Google+ are available under the product pictures.

Customer Reviews - As the minimalist design allows each feature to stand out more, the review stars are very strong on this page. You have to sign in to create a review. The site does let you submit a review on a product without proving you purchased it; this is not immediately published so they may have checks in place to verify a purchase was made.

Accounts - M&S has imported customer accounts although existing customers would need to create a new password and those that created an account after 1st January, 2014 will need to create a new account so these were not passed over.

Supporting desktop, mobile and tablet - On the desktop site the navigation is driven from a classic horizontal menu below the logo. On a tablet the horizontal menu is replaced by a Main Menu button in the top left of the screen. It then pops out on the left of the screen and is clearly designed for touch with wider button areas and fewer choices. When tested on an android tablet and iPad this didn't work fully - a few early teething troubles. Mobile is again a specific platform for the small screen. A lot of work has clearly gone into getting the experience right for each type of device.

David Mackley MBA BSc is Managing Director of Intelligent Retail - providers of multichannel EPoS and e-commerce websites for independent retailers. If you have any questions you can contact David on T: +44 (0)845 680 0126 or E: