FatFace has revealed that its Christmas 2014 ecommerce sales were 25% up on 2013, whilst December sales were 13% up.

According to a report in InternetRetailing, FatFace has largely credited this success to its various multichannel services which helped it cater to later Christmas online ordering.

FatFace has claimed that click and collect orders rose to 42% of total orders through December and were 119% up on the same time last year. Mobile visits also increased, with visits from tablets and smartphones accounting for 65% of all mobile devices and up from 55% last year.

We haven’t really covered FatFace on the blog yet, so in light of the above findings it’s time we changed that by looking at its ecommerce site and seeing what features can be attributed to its success.

Homepage

FatFace’s layout is flat with sharp edged tiles, in keeping with the current trend of flat and responsive design in ecommerce

Tile shaped elements on a site are adaptable and easier to shrink down and rearrange when viewed on different screen sizes. FatFace takes full advantage of this, by providing its multichannel customers with the best possible layout across all device sizes.

Tablet

Mobile

It doesn’t just shrink to fit to mobile screens, FatFace’s site is also upwardly responsive so it makes the most of larger high screens too. This takes up the full length of my 27 inch screen…

Delivery information is clearly presented, with the minimum spend also transparent. FatFace also mentions its free click and collect option here too.

Surprise delivery charges during checkout will increase cart abandonment, so it’s important to be clear about your threshold as early as possible. 

Click and Collect is also increasing in popularity thanks to its convenience (shoppers can pick up items whenever they like, without having to stay in waiting for a delivery) and because it’s a free option. Click and collect is also a great way to join up your online and offline retail stores and deliver multichannel customer service.

From an accessibility point of view, the text is large, clear and very readable. Also there isn’t too much of it. It’s obvious where you’ll find all the information you need, not just in navigating the site but also where to find help, delivery and returns information.

Elsewhere on the homepage there’s a nice bit of personalisation where it welcomes me by name. 

Perhaps the homepage could go beyond this though and show me items based on my previous browsing or purchase history.

However there are many other features here, which I haven’t seen before. If you hover over one of the homepage products, an eye appears which you can then click…

… and it rearranges the page so that item is highlighted in a larger box, with colour and size options and an ‘add to bag’ CTA.

Here’s a slightly shaky Vine to show the process.

I don’t even have to leave the homepage to add items to my bag.

Another nice touch on the mobile version of the site, is that you can swipe through different coloured versions of the same item within its homepage product box.

My only disappointments with the mobile experience is that within the ‘find a store’ locator, geolocation hasn’t been utilised to automatically serve results for my nearest branch, and then on the individual branch homepages, there’s no click-to-call option.

Navigation & search

Search is positioned on the left hand-side, which somewhat goes against tradition. I’m not sure if this would cause much consternation, however if the majority of retailers are placing site search boxes in the right or centrally in the header, this is where users will expect to see it.

Happily the search box provides predictive results as you type, for product categories and specific items. 

Perhaps some thumbnail images of those items would make users more likely to click on those specific results.

I love how simple the side-menu is, and also how it dynamically changes the layout of the entire homepage when you click on an option…

A new side-menu also drops down, providing various filter options. 

You can then choose your item, then filter further using the slider tool within price and size buttons.

Product pages

One thing that sets FatFace’s product pages apart is its use of photography showing clothes in the real world.

These oversized images are certainly a lot more attractive then the standard ‘item on bright white background’ ones and makes them seem even more aspirational.

However there are still traditional product shots here, with zoom in to incredible detail, taking over the page.

I also like the fact that all of the product information is kept neatly in one place, and clearly organised.

FatFace’s commitment to multichannel customer service can also be found here, as it offers free returns, and the option of returning online goods to any of its retail stores.

However this is the only place I have seen this message, somewhat hidden on the product page. FatFace should mention free multichannel returns on its homepage along with its free delivery messaging.

FatFace uses social proof in its use of reviews and star ratings, however few products actually have any reviews. Perhaps customers could be encouraged to leave reviews in their confirmation emails.

I also like the subtle way that the ‘add to bag’ button turns into a solid colour once you’ve clicked your preferences, I’m not sure if this is still a little lost though. Perhaps a brighter colour would be better to encourage conversion.

Shopping bag 

The bag is nicely laid-out without any distracting clutter.

The checkout CTA is obvious, and it’s clear where your options are for deleting or adding items and continuing shopping. 

Most importantly, shipping information is presented clearly. However it’s only gone so far as to show general information, rather than the shipping prices which are specific to my shopping bag.

If I put an item in my bag, less than the threshold amount for free shipping, it still doesn’t automatically tell me how much more I need to spend to get free shipping.

As I said earlier, not being transparent about delivery costs throughout the journey can lead to cart abandonment.

Another common grumble of mine is that the text is also quite small here.

Checkout

FatFace provides a guest checkout, which is key in driving customers quickly to conversion with the minimum of fuss.

If your checkout focuses solely on customer satisfaction, they’re more likely to return. If you wish to retain their details, then just give them the option to enter a password after the transaction is completed. Also keep it simple and make sure the customer knows it’s for their convenience. “Save your details and checkout will be even quicker next time” is a good message to use.

The text fields are really big and clear, and autofill has been enabled to speed things up further.

I’m also told if I’ve made a mistake or skipped a box as I go along, rather than annoyingly right at the end.

Finally it’s just one more page to go, where I have to enter my card details, or for even more convenience, pay with PayPal.

This has been a great checkout experience. Fluid, quick and without any distraction whatsoever. Best of all it works great on mobile too.

In conclusion…

What I admire the most about the FatFace ecommerce experience is that it looks so simple and has a very easy-to-use UX, but also contains great innovation that puts a clear emphasis on making the customer experience as hassle-free as possible.

Although there are a few things that can be improved in the shopping bag section, these are very minor compared to how much good stuff there is elsewhere.

Christopher Ratcliff

Published 27 January, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

You might be interested in

Comments (2)

Louise Page

Louise Page, Content Executive at AXA Wealth

Love Fatface's design but drives me mad on mobile how the products keep loading and the larger images shrink as they move off the top of the screen... so everything below reshuffles - hard to keep track of what you're looking at.

Also on desktop difficult to get to the footer when products keep loading - you have to wait for all of them to load before you reach things like contact us.

about 3 years ago

Kevin Pham

Kevin Pham, Responsive Web Design at ProWeb365

Flat design has been trending big since Apple unveiled iOS7. I have often witnessed an extraordinary design concept with poor selection of colors. All designers must remember is that a great web design is a perfect combination of typography, layout and, of course, color schemes. Loading large images can be a difficult thing for mobile user.

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.