Case study
Revolutionising Filter Expeirence
RESPONSIBILITIES
DELIVERABLES
Live at farfetch.com
Collaborate with
Another product designer, UX researchers,Experience and platform product managers, Data team , Engineering team
INTRO
In 2023, we successfully launched Quick Filters on Farfetch.com, making it easier for users to explore product listings. I had the unique experience of staying with this project from start to finish, partnering with another different designers at each stage to shape it through two iterations. Watching it go live and become a top GTV driver — outperforming Refined Filters across most categories — was incredibly rewarding.
customer problem
As stated in the Consumer Trust Report 2022, when asked “Why would you not consider Farfetch as your first choice”, 15% of the respondents chose “Too many choices / hard to filter down”. At the same time, according to the NPS survey, 60% of comments are negative, suggesting that some customers may experience frustration even if they ultimately make a purchase.
Farfetch’s extensive and ever-growing product catalogue means that users find it more and more difficult to find the products and brands that match their preferences.
dESIGN goals
To create quick filters that helping customers filter down and making 'finding what you want' easier;
To showcase our extensive catalogue efficiently and encourage engagement through personalisation;
business goals
To increase "Add to Bag" rate which will translate into a GTV uplift.
DISCOVER AND DEFINE PROBLEMS
Based on the data we collected, we further investigated the problems by mapping out the user journey on different product listing pages, followed by user testings to further observe users' behaviours in using filters.
We have found the key problem — the filter system confused and failed to guide our customers, and that was caused by Farfetch's disorganised and complex filter catalogue.
For example: "Clothing" and "Jewellery" are on the same category level, but "Clothing" has two subcategories where "Jewellery" only has one .
The complexity also lies in the fact that Farfetch has many ways to browse its catalogue as it has different product listings pages (PLP) :
<Brand PLP>
<Category PLP>
<Subcategory PLP>
<Curated PLP>.
We needed to understand how a user moves through different PLPs and how the new filter system can adapt to it.
How different category levels sit in four types of Product Listing Page (PLP)
challenge
How might we adapt the new quick filter system to different types of PLPs ? At what stage do we allow multi-selection and how do we make it intuitive ?
Following the principles of information architecture, we proposed a logic diagram for PMs, data science and engineering team to align with the feasibility and strategy in terms of personalisation algorithms.
design and test
In the meanwhile, we conducted competitor analysis and ideated the design by sketching.
Following the diagram above, we had three rounds of exploration which focuses on the quick filters' position, UI design, and how it interacts with the main filter panel.
We launched two prototypes for user testing to validate our design. All users understand quick filters and think they're easy to use, with a few negative feedback on the UI design.
The chosen proposal is based on the user testing results and engineering's feasibility and capacity. Here are two product listing page (PLP) examples on desktop and mobile.
{Final proposal Example }
Gucci Brand Product Listing Page
Here is an example of the final quick filter experience for desktop
User lands on Gucci Brand PLP, quick filters show level 1 categories.
User selected clothing (single selection) , quick filters show clothing's subcategory
User selected coats (single selection), quick filters show coats' subcategory
User is able to select different types of coats (multi selection)
{Final proposal Example }
Clothing Category Product Listing Page
Here is an example of the final quick filter experience for mobile
User lands on Clothing for women PLP, quick filters show level 1 categories.
User selected Beachwear (single selection) , quick filters show Beachwear's subcategories
User is able to select different subcategories of Beachwear (multi selection)
User clicks Filter button to refine more filters
Launch and Impact
The initial experience was launched after we observed the following positive A/B testing results.
Product listing page (PLP) engagement rate %
(measured by "add to bag" and "add to wishlist")
0.03
0.55
Listing page click through rate (CTR) rate %
0.04
0.56
Listing page sessions %
0.04
0.55
User applied filters %
9.64
10.4
Note: Farfetch is a Global marketplace where the daily traffic is up to 2.5 million customers. 0.1% increase is a
Iteration 1
During user testing of the desktop variant, we also observed that the interaction between the quick filters and the filter panel on the left caused usability issues. Therefore, we aim to have a cleaner design for the PLP with less clutter information. By collaborating with other design teams, we converted the filter panel to an overlay behaviour and moved the selected quick filters to a filter summary box component, which has improved usability.
Iteration 2
After rolling out first iteration, we identified some inconsistencies in the components of our design system, and the desired solution was not technically feasible. Therefore, I proposed a UI iteration to align the experience across PLP filter journey, which is now in development.
Next step
According to the most recent Filter Analysis Report, Quick Filters has been proved to be the new main driver to generate GTV, winning almost at every filter category comparing to Refined Filters. We also observed a few opportunities to further increase GTV in terms of personalisation algorithms strategy and UI design. If you're interested to know more about it, let's arrange a call so that I can be sure I'm not breaking any NDAs by publicly sharing things online.