Discover and define
I started the discovery process by gathering all the available information on flaconi's filters. Wanting to grasp user’s mental models and further identify issues with the mobile filters I collaborated with our user researcher and conducted a qualitative interviews with 6 users with a mix of gender and age. During the interviews, we observed them while engaging with the shop as they’d normally do and complete tasks such as finding a perfume as present. The interviews, along with the previous research provided a clear picture about the mobile filters:
Usability issues
Accessibility problems with interactive elements such as buttons, price scale and accordion menu.
No option to select and apply multiple filters simultaneously, leading to repetitive opening and closing of the filter menu.
Too many attributes in some filters
Difficulty in locating the "Apply" button due to accordion-style menus
Define
Upon reviewing my collected insights, I identified two primary issues with the filters: usability and information architecture. Given the substantial effort and time required to address the latter, involving team members and stakeholders from SEO, Campaign, and Category Management, we opted to prioritize improving usability.
So I framed the design opportunity accordingly:
How might we help our users refine results with ease by using mobile filters?
Benchmarking
Prior to ideating, I examined the filter structures of other e-commerce shops and drew inspiration from flaconi's new search flyout, which I previously worked on, for accessible navigation elements.
Based on my benchmarking analysis, I found that:
Many shops utilize full-screen views for dedicated filters.
Although main navigation is typically vertical, horizontal navigation is commonly used for filter screens
Displaying the number of available results for selected filters is a useful pattern for aiding users.
Ideation and design
Ideation and user flow
For my design iterations, I began by enhancing our current filters to include:
Minimum touch target sizes for interactive elements
Manual price entry
Improved price range to prevent accidental swipingCapability to select and apply multiple filters at once
Display of the number of selected filters in the overview screen to improve user clarity.
For my second iteration, I aimed to reduce scrolling and implemented the following changes:
Used horizontal navigation to allow users to focus on one filter at a time
Removed cents from the price filter for a cleaner appearance
After consulting with the team, we decided to simplify the second iteration by removing the capability to select multiple filters to avoid potential performance problems. To compensate for this change, we added popular filters to the Catalogue Pages (PLP) . Prior to implementation, I tested the updated version to gather feedback by using Maze.
Testing
Unmoderated user testing on Maze
To evaluate usability, I created a high-fidelity prototype and conducted an unmoderated usability test using Maze. While creating the prototype, I noticed an unexpected issue: the number of products on PLPs varied depending on the navigation method. When I only used main navigation the number of results were higher than using a combination of main navigation and filters.
I further investigated this matter in the usability test to determine if users used filters for navigational purposes when visible on PLPs.
Final design
Test results were favorable, as users had no difficulty completing tasks using the filters.
However, the test also confirmed my assumption that users used filters for navigation purposes. I reported the issue to stakeholders and requested an investigation.
Based on the test findings, we did not make filters visible on catalogue pages when they went live.
Impact
The gap between the percentage of users who convert while using mobile (12%) versus desktop (21%) filters was successfully closed, resulting in a positive impact on NOI. 1% increase in this KPI is equivalent of over 2 million € NOI per year.
The next steps for this project is to fix the performance issues to allow multiple filter selection and filter attributes before making filters more prominent in the shop.
