How Fat Face increased ecommerce sales by 39%
by Jenny Lewis, UX Consultant

How Fat Face increased ecommerce sales by 39%

How Fat Face increased ecommerce sales by 39%

Fat Face have recently hit the headlines declaring a 39% increase in ecommerce sales, following the relaunch of their website. We were intrigued to find out what had changed to trigger such an increase in sales, so we carried out a brief usability review. Although we would always champion usability testing as the only true test of user experience, we wanted to share with you some of the things we like about the Fat Face website.

Fat Face provide inspirational browsing on the homepage

It’s clear from first impressions that Fat Face have made a conscious effort to step away from the conventions with this redesign. The mosaic style homepage is very similar to the Pinterest approach, and makes for an inspirational browsing experience. This visual style is aimed at encouraging a higher average basket value by showcasing items for all genders and ages; chances are whilst browsing for yourself you may spot something your other half would like.

 

Inspirational browsing

 

Transparent delivery, help and contact information

Fat Face understand that it’s key to reassure users in their decision making process by being upfront about delivery costs and contact details. Hence the prominent placement of ‘Delivery & Returns’ and ‘Contact Us’ in the navigation, in contrary to many sites where these links are placed in the footer. We have seen during previous usability testing that this information is important for online shoppers, and gives them more confidence with their purchase decision. The use of icons in the left hand navigation is also a clever way to break up the text and makes for an easier selection.

 

Transparent delivery, help and contact information

 

Smooth navigation that doubles up as a filtering tool

At the secondary level, the primary navigation switches to a horizontal layout which takes up less space but still makes it easy to return to the top level. The secondary navigation acts as both a way to navigate the site and as a filtering tool making for a smooth experience, giving the user the opportunity to select more than one product category at once.

Smooth navigation that doubles up as a filtering tool

Making it easy to compare products

Being able to see a quick view of a product (by clicking the eye icon) without having to go to the product page makes it easy to compare similar products without too much interaction (the less curious of users, however, may miss this icon). The recently viewed (clock icon) is also elusive, but helps to recap all those items you’ve been looking at before making a decision.

 

Quick view product

 

Fat Face have removed the individual product pages and instead display products in a lightbox. This approach works well as the user can easily view and compare products without going back and forth between product pages.

 

 Making it easy to compare products

 

There are a variety of ways to show different colour options

It’s very common for retailers to offer a product in more than one colour or pattern, but often this isn’t clear until the user reaches the product page itself. Fat Face employ two different methods for showing colour options. For some products, the size of the product tile depends on how many colour variations are available.  For example a pair of shorts that comes in only one colour is presented in a small tile, but a t-shirt with multiple colour variations is presented in a larger tile. This approach leads to a more useful and engaging interface of different sized product layouts.

 

There are a variety of ways to show different colour options

 

Another, more subtle, approach is a feature where the colours available are shown on mouse rollover. Although it’s refreshing to see this problem being dealt with in different ways, we wonder if users will notice this feature straight away.

 

Fat Face – a mouse rollover to show different colour options from Experience UX on Vimeo.

 

Friendly and upbeat product descriptions

From our usability testing research, we’ve learned that a good product page isn’t solely down to good imagery and clear information; an injection of brand personality and a friendly tone can go a long way to engage users. Fat Face do this really well by using short, upbeat and casual product descriptions which fits well with their brand. This personal touch mirrors the in-store experience and feels more like the friendly advice given by one of the shop assistants.

 

Friendly and upbeat product descriptions

The use of good design to reduce user errors

Online retailers can use colour and typographic treatments to help users through the selection process and avoid user error. In this example, an accent colour is used to signify when both a colour and size have been selected. The ‘Add to bag’ button is also inactive until a colour and size variation has been selected, reducing the chance of this common user error.

The use of good design to reduce user errors

Attention to detail

Although they don’t have a significant impact on user experience, a combination of subtle touches can certainly make for a positive experience. In the basket page, for example, the last item added to the basket is displayed at the top of the page and noticeably larger than the previous items, giving it an increased prominence.

Attention to detail

No unnecessary user interactions

Forgetting to tick the T&Cs checkbox at the end of a checkout process is a notorious UX problem that we’ve witnessed countless times during usability testing.  We often recommend using an ‘Agree & Continue’ button to our clients, who see fewer usability issues after implementation, so we were delighted to see Fat Face using this approach.

No unnecessary user interactions

 

The not so good

During our review, we did notice some usability issues with the site.  We experienced several frustrating bugs while evaluating the site which made buying a product sometimes difficult. Also, after the enjoyment of navigating and selecting a product, the checkout process was a major let down.  The forms used throughout the process were long and cluttered and were made worse by replicating the field names inside each field.

 

Confusing checkout form

 

Tablet and mobile experience

Unfortunately the mosaic style homepage and quirky transitions on the desktop, didn’t translate well when using a tablet. Load times on the tablet were much longer than acceptable, reducing the browsing experience significantly. The dedicated mobile site was fine and followed the more conventional mobile format but unfortunately is was lacking the nice UX touches and wow factor of the desktop site.

 

Mobile and tablet experience

Summary

It’s clear that Fat Face have taken user experience into account during this redesign. From the product listing pages that make it easy to compare products, to the design touches that simplify adding a product to the basket. One of our favourites is the left hand navigation that doubles up as a filtering tool, what a great way to utilise space!

The website is refreshingly unconventional yet it doesn’t move too far away from conventions to confuse or alienate users. We would like to see other online retailers push the boundaries and adopt similar innovative approaches. We have covered more inventive ecommerce examples in a recent article: “5 beautifully designed ecommerce sites that entice shoppers to buy”.

 

We are experts in ecommerce usability Get in touch for a free informal chat with one of our usability experts.

Menu