Back to Portfolio
Filters Redesign
Overview
We knew from customer feedback and user testing, that customers were struggling to narrow down their product selection on PLP's. Those who were having issues finding products had a lower NPS and CSat score than average customers, bringing our overall scores down.
Our research highlighted that the issue lay with the filters menu, in particular that users were having trouble combining filters, as the page refreshed after every selection. Redesigning this filter menu became the goal in order to raise our CSat and overall conversion.
Research
We worked with an agency to conduct moderated user tests with our customer, following them through the shopping experience to detect areas of struggle. This highlighted some issues with the product discovery journey, specifically with regards to the filters. While there were several issues raised, a key theme was that users were becoming frustrated that clicking a filter option reloaded the page, so it was difficult for customers to apply more than one filter.
To corroborate these findings, I reviewed a large volume of user feedback, and found many comments which supported the user testing results. In particular, those comments who had struggled with the filters also had significantly lower Net Promoter Scores and Customer Satisfaction with Digital Experience (CSat) scores. Those on mobile devices particularly struggled.
This generated my problem statement:
“Customers cannot adequately combine filters on product listing pages due to unnecessary page refresh, and struggle to focus on filtering tasks on mobile devices due to a distracting overlay design”
Wireframing
In my initial ideation phase, I created some wireframes to explore different ways customers might be able to access the filters menu on mobile. I used research from the Baymard Institute and competitor analysis to validate whether these ideas were patterns the user would be accustomed to.
With three concepts in hand, I wanted to user test these to see which performed best. We didn’t at the time have budget to recruit an external panel of users to test with, so I made do with guerrilla testing in house. I found employees who weren’t experienced using our website, and I observed them undertake a filtering task using the prototypes I had designed.
The comments received during this testing helped me understand that the first variant proved least distracting to users, who were able to complete the filtering task without friction.
Final Designs
From the previous task, I now had a way for users to easily access the filters, whereby interacting with the filters button would open a full width panel where the users could make their choices.
I went on to design the interface of components within the filtering menu. As a company with a user base of largely older customers, I focused on increasing the size of the input components to ensure that our users would be able to easily interact with the filters, and improving the interface around links so the customer journey was clearer.
Most crucially, I also looked at what would happen when a customer applied filters.
Previously, when a customer clicked a filter, the page would be reloaded, making it very hard for customers to apply multiple filters. In my design, I implemented an ‘Apply filters’ overlay button, which would appear when a filter was selected. The page would only reload once the customer had selected all the filters that they wanted, and they had selected ‘apply’.
Results
The changes made to the filter interaction received overwhelmingly positive feedback from customers. Customers volunteered a wealth of complimentary comments about the changes without any prompting.
“Much easier to use filters now”
“The site is a good showcase for the products, the filters are useful and it looks clear and ‘clean’”
“A quick search is possible through good filter functions.”
“Very clear + good filter options to narrow down search results”
Likelihood to recommend was 10 in all of these comments, with a high Net Promoter Score associated. As the filter experience had previously been such a detractor from NPS, I met our goal of improving customer experience and satisfaction.
Additionally, conversion was up 1.3% year on year after these improvements were made, representing a significant contribution to overall performance.
