28 Nov 2014

The Good, The Bad & The Ugly

E-Commerce has been one of the fastest growing markets of the 21st century with every retailer now offering online or multi-channel platforms to sell their products. 

Retail websites are no longer perceived as a secondary selling tool; they are quickly evolving into one of the most proficient touch points of brand to customer experience. This can be just as profitable as a high-street store. ‘The Good, the Bad and the Ugly’ explores website functionality from some of the best in the business, offering ideas and improvements of how to develop their online customer experience. Based on a user-perspective, we will be following M&S, H&M, ASOS and Topshop looking into their use of text, imagery, special features, key mistakes and how to avoid replicating these online.

Brands we will cover:

(click on a brand to go straight to their reviews)

M&S logo H&M logo ASOS logo Topshop logo

Marks & Spencers

Bad example of a call to action on the Marks and Spencer website

The Good

M&S have created an appropriate feature for customers using visually appealing and well sized imagery. This could be improved by scroll over features; for example, when scrolling over the roast beef image an image of Yorkshire puddings may appear.

The Bad

The white overlay boxes should be reduced in size as they hide the imagery behind them. 'Just for starters' should ideally fit on one line to accommodate a smaller box

The Ugly

The italic text is unnecessary, difficult to read and adds very little to the feature. Utilising a simpler font with an attention-grabbing headline would be more effective such as, "Delici ous roast-inspired meals without having to lift a finger".

Bad example of a call to action on the Marks and Spencer website. Our favourites

The Good

An attractive feature which offers a simple yet effective approach to selling a particular product or offer. Choices of fonts are easy to read and information is kept minimal to let the product take centre of attention.

The Bad

This must be regularly updated in order to appear current for regular site visitors. It's easy for site managers to neglect this task, and could result in customer disappointment with the website.

The Ugly

'Shop Now' should also feature a 'Buy it Now/Add to Basket' option to reduce the time it takes to get the product into a shoppers cart. This may be created with an appropriate basket/shopping cart image to reduce the use of text on the feature.

Bad example of a call to action on the Marks and Spencer website. Our Top Picks

The Good

A great example of up-selling where M&S have used an appropriate style of imagery that fully advertises the products to their potential. The font is easy to read and the prices are made visible from their size. 

The Bad

Images should ideally be landscape to utilise the entire space between products. M&S may also consider adding close-up, detailed imagery when scrolling over the product to enhance a shoppers desire to purchase.

The Ugly

The feature lacks a 'buy it now/add to basket' option which this would reduce the number of clicks between the page and shopping cart. It's important to remember that no customer shops in the same way; some may wish to gather information from the product page before purchasing, whilst others may compulsively shop and wish directly add to basket. Occasionally, the journey from clicking to product page and reading information may hinder a compulsive shopper's desire to buy, in which case adding a buy it now feature would eliminate this customers hesitance to purchase.

H&M

Bad examples of filter systems on H&M Website View All

The Good

A simplistic way to offer feature filter options to your customer. H&M have developed a more minimal and visual approach to creating convenient shopping online.  

The Bad

The shades of particular colours may hinder customers from searching in that particular

The Ugly

The colours are confusing and non-representative of the actual physical product.

Bad examples of filter systems on H&M Website. Product Layout

The Good

Successfully draws attention to that particular product and breaks up the page layout.  

The Bad

The larger scale image allows the shopper to have a better view of the product; from this the smaller images to the left now appear to not display their products as effectively.

The Ugly

The featured product should ideally be an inspirational 'hero piece' or exciting item that sets the mood for the rest of the products. It may be an option for the customers 'recently viewed' products to feature within that space

Bad examples of filter systems on H&M Website. Product Description

The Good

Quite often shoppers are enticed to click on products if they are attracted to the entire outfit. H&M style their models well; the 'Style With' features gives shopper the option to purchase the entire displayed outfit - a successful example of up-selling.  

The Bad

The 'Popular Products' feature is biased and does not relate well to the original item. Two up-selling features on one product may be not only confusing but annoying for the shopper, especially if the products are irrelevant to their taste. H&M could potentially move this up-selling feature to the 'shopper’s basket' page where it may have more effect on shoppers.

The Ugly

The 'Add to Bag' button is not particularly visible on the page. As well as this, appearances of the option selectors are insufficiently designed and lack competence which may reduce shopper confidence in the website

Bad examples of filter systems on H&M Website. Product close up

The Good

Close ups on products are a great tool to allow shoppers the understanding of how that product may feel or touch.

The Bad

The close-up feature would work better if it could show more of the product, rather than just what's in the current close-up.

The Ugly

Little care and consideration has been made when preparing the skirt as the zoomed image clearly shows lack of sufficient garment finishing and an ultimately low-quality product. It's important to recognise that whilst the price and quality is reasonably low, this does not suggest the customer is to purchase a faulty item, therefore extra care should always be taken to ensure the product has no faults before being photographed.

ASOS

Bad examples product page.

The Good

A well designed page with lots of great features: 'save for later' option allows customers to create a wish list of items, sufficient imagery for the customer to understand the product, 'view catwalk' option to give a greater product understanding, text in bold such as 'Whistles' and 'Coat' will direct you to their pages and most importantly the 'add to bag' button is made very clear.

The Bad

The catwalk option features music which some customers could find an unnecessary addition.

The Ugly

The images under 'complete the look' do not match the models outfit. Rather than becoming a helpful feature for the shopper, it becomes a blatant up-selling tool which some shoppers might find annoying. Similarly, the 'new - buy the look' button is not longer seen as a convenience but rather a way for ASOS to shift their stock.

Bad examples product page. Skirt filter menu

The Good

A quick and useful way for shoppers to refine their search without having to use the left-hand-side 'refine by' feature.

The Bad

The links to product have potential to be slightly larger in font size to make it easier for customers to notice.

The Ugly

The entire site is filled with colourful graphics and imagery yet navigation tools that would benefit their customers appear as a second thought. A banner, small imagery, or use of colour would make this feature stand out on the page. ASOS have added this feature with a purpose however, is there any use in creating something that is unnoticeable and unused by shoppers?

Bad examples product page. three trends my way

The Good

An exciting editorial feature offers an efficient way to promote your products to customers rather than them having to search through the website to find that item. Here ASOS have devised trends with selected best-selling items and once clicked takes you directly to the product page.

The Bad

The layout of the page means customers have to scroll quite far down to see the rest of the featured products, and a lot of the left-hand-side is left blank and unused.

The Ugly

ASOS are missing out on potential sales here and forget the useful features they have employed on other pages. They may consider offering an 'add all to basket' option under the model image which would make it more convenient for the shopper and an effective marketing tool

Topshop

Bad examples of product photography. New in this week at top shop

The Good

A more visual feature to illustrate new products for customers rather than a employing a 'new item' category.

The Bad

Only 12 products are displayed; Topshop may consider featuring more products due to the size of their company and their constant supply of new garments each week. The size of a company and their regularity of new products should decipher how they utilise a feature such as this.

The Ugly

The customer must click the arrows 12 times in order to get through each product. A much more time-saving # feature would be for 5 new sets of items to appear during each click; this would consequently optimise its efficiency in displaying more products.


Bad examples of filter stlyes, Topshop

The Good

Refinement options are ideal for the busy shopper who desires convenience from online browsing. Topshop's feature offers refinement in category, size, colour, rating and price, all of which are the most important product factors for a shopper.

The Bad

Whilst rating is important for any customer, it's also a hindering factor for your business. It's extremely unlikely any shopper will actively choose to search for 1* rated items, it's much more likely that they will avoid these products. Topshop may consider removing this refinement category as it's essentially obstructing the sales of those products.

The Ugly

Upon selecting your refinement, the shopper can only view products from that particular category, e.g. A-Line & Full Skirts. It's not uncommon for shoppers, particularly women, to desire to shop for multiple styles, colours and sizes therefore this type of selection makes it less convenient for the shopper as it lacks the option of variety.

inconsistent product photography, Topshop

The Good

The majority of products are well photographed and clearly show the product and the way in which they would be worn on the body; which is after all what the end-use of the products will be.

The Bad

Inconsistency in product imagery not only makes the page less attractive but also gives the impression of an incompetent and uncared for website. The use of background colour and lighting does not in any way improve the Shearling Coat product but makes it less inviting to look at.

The Ugly

The biggest flaw in this feature is the £595 price tag of the item. It makes sense for a much more expensive, luxury product to have additional features, text or distinctive photography to make it stand out against the other items. In this case, the item fades into the background which is likely a negative impact on its sales.

inconsistent product photography, Topshop

The Good

The page features a visual differentiation from the rest of the site which may imply to customers that these products are specifically designed for Christmas (rather than random products already available being randomly added to their gift ideas category).

The Bad

These products come under the Christmas Gift Finder category of the website; but this hardly made apparent from the grey and dimly lit background. Topshop could have featured very subtle Christmas graphics such as transparent snowflakes on the page to reinforce the Christmas category to the consumer.

The Ugly

Customers may question why placing a mug on its side or folding underwear into a right angle will make a product seem more desirable. Brands often wish to differentiate themselves in the way they display products as almost every website uses (ghost technology with white background). However, this technique is widely-used for a reason; it displays the product in the most effective and easiest way for the customer to understand what they're purchasing. In this case, Topshop have unsuccessfully tried to offer differentiation that neither improves the product appearance nor makes it any more desirable.

The Conclusion

The key to excellent website functionality is simply understanding your customer and how to shape your online experience around their expectations and needs. Leisurely browsers will appreciate up-selling features and product recommendations, whereas shoppers in a hurry crave a site designed upon efficiency and to make their purchase in as few clicks as possible. It’s also worth noting; the bigger the brand doesn’t always mean the better their website. Make your company stand out against the competition with a little help from our Evance software…