Type: User Experience Project
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.
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.
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.
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.
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
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
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
People who love online shopping
People who do not have time go to store for shopping
Sometimes, I want to find some recall information, but I cannot find history in the search bar.
On the search system, add history function or the acronym recall
Position: Graphic Design
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.
Add more function to get more options for helping different users.
Position: UX Designer
I put some items in the shopping bag, but when I want to remove an item, it’s hard to find the Remove icon.
Add remove icon and change to the obvious position
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
4. Filtered changed to the top (easier clicking and no slide choosing)
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
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: 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