Farfetch is one of the world’s leading online fashion stores, selling exclusive brands like Alexander McQueen, Givenchy, and Versace to name but a few. Founded in London in 2008, Farfetch now deliver to more than 190 countries. Due to the nature of the goods the store is targeted at high-value customers who are willing to spend large amount of money online, but are usually already familiar with the brand or designer they are buying.
Since I am their happy customer and have used the store quite a few times (thanks to my wife), I chose them for our first Product/Landing Page Review example. Here is the product page URL (retrieved on 10 April 2017) and desktop screenshot.
Free Audit Would you like a professional audit of your page by our team? Just fill in our form for a high chance of getting it completely free, as we are currently building our references.
Design & Layout
Overall, the site design is very simple and pushes forward the product images, which is great. However, we are not big fans of using the images as a page background. This can sometimes be distracting from the main form, and loading all images at once results in significant impact on the page load times. In addition, there is no point in displaying the image behind the form as it may lead to weird design flaws (e.g. cut head above the form – see image below).
The contrast of some texts (e.g. the links to “Size Guide” or “Size Unavailable”) could be increased to improve readability. Another issue is font size, which seems to be pretty conservative in most cases.
The whole form seems to be ‘flying’ around the page with no concept and a lot of not-so-important elements which may be distracting.
Design & Layout 80% Due to the slightly misleading layout and some minor readability issues (e.g. contrast, low font size) we are giving 80%.
Tip #1 Simplify the page by removing background images.
Tip #2 Increase the font size and contrast to improve readability.
There is a lot of relevant information on the page to increase visitors’ trust (e.g. “Shipping & Free Returns”) and reduce fear of buying (e.g. “Import duties included”, “Size Guide”).
On the other hand, there is a lot of redundant information that could be pushed below (e.g. “Designer colour”, “Designer Style ID”, “Farfetch ID”).
Particularly impressive features are the own measurements and the centimeters to inches converter.
What we are missing is a catchy product description to make us want to buy the product. The current description is too short and technical (no feelings involved).
Content 75% The low amount of content and its technical tone is one of the biggest weaknesses we have found on Farfetch, therefore we are awarding only 75%.
Tip #3 Change the product descriptions to focus more on visitors’ feelings than technical information like “Designer Style ID”. Adding a longer description would certainly help. Using customer reviews or product ratings could also have a positive impact.
Tip #4 Promote free delivery and hassle-free returns to decrease visitors’ barriers against purchasing from the store.
The main call-to-action (CTA) is very clear and describes what the visitor is expecting to happen: “Add to bag”. However, the word “bag” is quite uncommon and could cause confusion – especially when the store is actually selling bags.
There are actually cases from the fashion industry when a simple change from “Add to bag” to “Add to cart” increased the click-through-rate (CTR) of the button by 22% (via Conversion Fanatics).
More importantly, the font and color are not visible enough to drive conversion.
Before adding the product to the cart, the visitor has to select a size. If he or she does not do this, an error message is displayed. Unfortunately, the error message does not indicate where exactly the problem is and is easy to miss.
Call-to-Action 80% The main button could be much more visible and positive. The label could be also more suitable and attractive, therefore we are giving 80%.
Tip #5 Increase the size of the main button and the font size of the label, and change its color to one which will better stand out from the page.
Tip #6 Change the button label to something more common (e.g. “Add to cart”) or something attractive and related to fashion (e.g. “I definitely need this”).
The page load time seems to be the main issue here, as the whole page is not very well optimized for speed. The scores from the most common tools for page performance (Google PageSpeed and Yahoo YSlow) are rather average.
Click on the links below to get a detailed list of issues and recommendations in order to improve page speed.
|Tool||Score (out of 100)||Main Issue|
|Google PageSpeed (Desktop)||66||Too many uncompressed images|
|Yahoo YSlow||78||Reduce HTTP requests (24 JS, 4 CSS)|
The total page size on desktop is around 2.5 MB, which is good considering the online store is selling fashion products and includes a lot of images on the product page.
On the other hand, the number of requests is around 150, which is high (on average it should be around 80) which doesn’t help the overall performance.
It is important to realize every ten milliseconds has an impact on the page conversion.
Performance 70% We have tracked down lot of issues in the performance area and overall the page seems to be slow, therefore we are giving only 70%.
Tip #7 Follow the tips from Google PageSpeed and Yahoo Yslow (or ask your Web Developer) and try to get around 90 points at least.
We have tested three main operating systems, Windows 7, Windows 10, and macOS, on several versions of today’s mainstream browsers (Google Chrome, Mozilla Firefox, Internet Explorer and Safari). Our simple test included these steps:
- Page load – Does the page load properly with no design issues?
- Page elements – Are the page elements “Size Guide” and “Size & Fit” working properly after clicking?
- Size select – Can visitors select and change product variation (size)?
- Checkout – Can products be added to the cart and can visitors successfully open the checkout page?
We haven’t encountered any major issues during our compatibility tests.
|Google Chrome 56 & 57||Windows 7 & 10||✔|
|Mozilla Firefox 51 & 52||Windows 7 & 10||✔|
|Internet Explorer 10 & 11||Windows 7 & 10||✔|
|Safari 5.1||macOS Sierra||✔|
The only little thing which is not particularly nice (but is still working) is the cm/in converter in Internet Explorer 10 and 11. It doesn’t immediately look like a switcher but does its job.
Compatibility 100% No major issues in the compatibility area, therefore we are giving a full 100% here.
Tip #8 Regularly test the main flows on the store whenever a new version of a major browser is released.
Mobile & Tablet
Nowadays shoppers tend to use multiple devices before they actually purchase the product. Therefore, it’s important to offer great user experience across all devices, not just desktop. In this area Farfetch is doing an excellent job as the page experience, elements, and controls are all consistent. No objections here.
As evident on the screenshots above (the left one is from a mobile, right one from a tablet) the pages look pretty much the same as on desktop devices. The only difference is in using a so-called “burger” menu instead of the top navigation, but that’s standard nowadays.
The only issue we have found is not being able to change language and/or currency on mobile and tablet devices; it’s not in the menu or the footer of the page. Some visitors (e.g. travelers) may find it difficult to navigate the page or even purchase in the language and/or currency set up by their GeoIP. This is perhaps a side issue, but it would still be useful to add this option.
Mobile & Tablet 95% The experience on both mobile and tablet is smooth and consistent, with the only exception being the missing language/currency selector, therefore we are giving 95%.
Tip #9 Add a language/currency selection option for mobile and tablet devices.
Overall we rate the product page at 83%, which is fairly average in today’s online shopping world. Sure, it probably delivers a decent conversion rate, but we believe there is room for optimization.
|Design & Layout||80%|
|Mobile & Tablet||95%|
The top three things to optimize are:
- Product descriptions could be less technical and play more on visitors feelings
- Call-to-action could be more visible and positive
- Lots of performance optimizations, especially loading all images at once which is a huge resource hog
And here is our ideal Farfetch product page, designed in order to improve conversions and drive more business. To better see the differences check the 1-1 comparison between the original and redesigned product page.