PROJECTS ABOUT

FARFETCH

Website Redesign

Disciplines:UX Design
Type: User Experience Project

SEE FULL CASE STUDY

Farfetch is a global luxury fashion online platform that sells products from over 700 boutiques and brands from around the world. The website was founded in 2007 by the Portuguese entrepreneur Jose Neves with its headquarters in London.

Introduction

In this redesign, I chose the Home, Category, Product and Checkout pages because these pages had four completely different layouts. I want to apply the 10 heuristic principles and analysis what kinds of problems these pages have.

Redesign Page

Home Page

Category Page

Product Page

Checkout Page

Heuristic Evaluation

Visibility of System Status

The website doesn’t keep users informed about current state and actions through appropriate visual cues. When clicking on Clothing in the nav, no visual changes happen.

Match between System and Real World

These icons are unclear. They can add some words to get a more clear direction.

User Control and Freedom

For Shopping Bag, the website has a “Remove Item”, but the color is unclear. I cannot notice quickly, so I will add the icon “ ”.

When I am clicking in the “Go to checkout”, the website doesn’t have a clearly marked "emergency exit" to leave the unwanted state. Support undo and redo.

Consistency and Standards

There are three different shapes. Changing to the same shape should be more consistent.

Flexibility and Efficiency of Use

The website can recommend clothes and make suggestions based on search.

The system just has “In Bag” and “Add to wishlist”. It could add checkout getting more options for different customers.

Recognition rather than Recall

For the search system, the search does not have the history function or the acronym recall.

Aesthetic and Minimalist Design

The title is not clear in the picture and the signup part is in the middle, which is not good. That should be in the right. For the foot part, the “customer service” and “about farfetch” can be put on the middle. “The country” should be put on the right. That can be more useful.

Other Suggestion

The product page does not show any product price to the customers.

The price should be bigger and also can be changed to a different color.

Problem

Unclear current state and actions

Unclear icons without words

Unclear position of some functions

Inconsistent shapes for different buttons

Inflexible function for the product page

Unclear text hierarchy

Solution

Add the clear sign of the current page

Add clear words to the icon

Put more clear position with some function

Change to the same shapes for different buttons

Add functions becoming flexible and easier

Change text layout to become more readable

Competitive Audit

Summary

1 2 3 4 5 6
Marshalls
Kohl’s
Ross
T.J.Maxx
HomeGoods
Premiumoutlets
Nordstrom Rack
DSW

1. Recognition rather than recall

2. Match between system and real world

3. Consistency and standards

4. Error prevention

5. Flexibility and efficiency of use

6. Aesthetic and minimalist design

◯ Good

◉ Bad

Target Audience

People who love online shopping

People who do not have time go to store for shopping

Persona

Name: Sara Fonda

Age: 26

Gender: Female

Position: Accounting

Bio:
She is an accountant. She likes fashion. In her spare time, she likes reading fashion magazines. She is also good at using a computer to browse fashion clothes and shopping online. She has a good salary to purchase some expensive clothes.

Frustrations:
Sometimes, I want to find some recall information, but I cannot find history in the search bar.

Goals:
On the search system, add history function or the acronym recall

Name: Becky Liu

Age: 23

Gender: Female

Position: Graphic Design

Bio:
She is a graphic design student in Academy of Art University. She should take three classes and has an internship, so she is very busy. Do not have time going to store, so she usually buys clothes online.

Frustrations:
Sometimes, I just buy one thing, but I also need to click InBag first and then go to checkout. I want to check out more quickly.

Goals:
Add more function to get more options for helping different users.

Name: Zou Tong

Age: 28

Gender: Female

Position: UX Designer

Bio:
She is a web design student in Academy of Art University. She likes online shopping to buy clothes, cosmetics, and food.

Frustrations:
I put some items in the shopping bag, but when I want to remove an item, it’s hard to find the Remove icon.

Goals:
Add remove icon and change to the obvious position

Wireframes

Initial schematic

Home Page

1. Added actual words and icons for login, bag, wishlist

2. “Women, Men, Kids” move up and become easier to click

3. For the shipping form, the info is not very important, so I moved it to the bottom

Category Pages

4. Filtered changed to the top (easier clicking and no slide choosing)

Product Page

5. Added product price info

6. Showed all sizes and they can be chosen without hiding

7. Added more choices, ”checkout”

8. Added more detail description about the product with picture and text.

9. Added similar products’ recommendations

Checkout Page

10. Added the choice at checkout to delete items from your bag

11. Added icons

12. Added a bigger number and changed the color

13. For the shipping form, the info is not very important, so I moved to the bottom

14. Added help and contact information

A/B Testing

A: Home Page

Changing to a different layout

B: Home Page

Adding more information to describe for sign up

A: Category Page

Changing Filtered information, Version B is simple

B: Category Page

A: has more detail.

A: Product Page

Putting Share and Add to wishlist together

B: Product Page

A: Checkout Page

Separating free returns and making need help get more detail

B: Checkout Page

Putting Free return, Phone, Email, and FAQ together

Testing Results

Final Design

Home Page

Category page

Product page

Checkout page