Final Flourishes
Final Flourishes
A subtle but significant design tweak involved adding an arrow icon to categories with child options, indicating deeper levels for more focused browsing. This change encouraged users to explore further, resulting in an increase in sessions reaching L3 and L4 categories.
A subtle but significant design tweak involved adding an arrow icon to categories with child options, indicating deeper levels for more focused browsing. This change encouraged users to explore further, resulting in an increase in sessions reaching L3 and L4 categories.
SIMPLIFYING ITEM DISCOVERY
SIMPLIFYING ITEM DISCOVERY
SIMPLIFYING ITEM DISCOVERY
THE PROBLEM
THE PROBLEM
Users struggled with the sidebar filters due to a cluttered interface that occupied valuable screen space. This often led to users overlooking or avoiding the filters entirely, opting instead to browse manually by scrolling through pages one at a time.
Users struggled with the sidebar filters due to a cluttered interface that occupied valuable screen space. This often led to users overlooking or avoiding the filters entirely, opting instead to browse manually by scrolling through pages one at a time.
Users struggled with the sidebar filters due to a cluttered interface that occupied valuable screen space. This often led to users overlooking or avoiding the filters entirely, opting instead to browse manually by scrolling through pages one at a time.
Explore other designs to streamline the filtering experience
Explore other designs to streamline the filtering experience
3
3
Identify which filters were most relevant and used more frequently
Identify which filters were most relevant and used more frequently
2
2
Understand user behaviour and preferences related to filtering options
Identify which filters were most relevant and used more frequently
Explore other designs to streamline the filtering experience
Understand user behaviour and preferences related to filtering options
Understand user behaviour and preferences related to filtering options
1
2
3
1
1
After reviewing tools such as Google Analytics and HotJar it was evident there was reason to investigate further. To gain deeper insights, we conducted questionnaires with a select panel of users, including card sorting exercises, to identify preferred approaches and uncover patterns in filter groupings.
After reviewing tools such as Google Analytics and HotJar it was evident there was reason to investigate further. To gain deeper insights, we conducted questionnaires with a select panel of users, including card sorting exercises, to identify preferred approaches and uncover patterns in filter groupings.
OBJECTIVES & APPROACH
OBJECTIVES & APPROACH
DESIGN DIRECTION
DESIGN DIRECTION
We explored three filter design options: keeping the scrollable filters for familiarity, introducing collapsible filters to reduce clutter, and adopting a horizontal layout to maximise space for the item grid. Each option was evaluated for functionality, aesthetics, and user experience.
We explored three filter design options: keeping the scrollable filters for familiarity, introducing collapsible filters to reduce clutter, and adopting a horizontal layout to maximise space for the item grid. Each option was evaluated for functionality, aesthetics, and user experience.
We explored three filter design options: keeping the scrollable filters for familiarity, introducing collapsible filters to reduce clutter, and adopting a horizontal layout to maximise space for the item grid. Each option was evaluated for functionality, aesthetics, and user experience.
Displaying the filters across the top of the item grid, giving more space for larger images per page. Very clear to what options they have. A more modern approach as web pages are more scalable and dynamic.
Displaying the filters across the top of the item grid, giving more space for larger images per page. Very clear to what options they have. A more modern approach as web pages are more scalable and dynamic.
Option 3 - Horizontal Filters
Option 3 - Horizontal Filters
Remove scrolling so each list is displayed at full height. Allows the user to collapse the filters they do not require giving a more personal experience reducing the height of the sidebar. This can translate well in to mobile break points.
Remove scrolling so each list is displayed at full height. Allows the user to collapse the filters they do not require giving a more personal experience reducing the height of the sidebar. This can translate well in to mobile break points.
Option 2 - Collapsable Filters
Option 2 - Collapsable Filters
The original design. Keeps each section more uniform but leaves the overall page cluttered. Having scrolling areas within a scrolling page can be confusing. Options can be missed.
The original design. Keeps each section more uniform but leaves the overall page cluttered. Having scrolling areas within a scrolling page can be confusing. Options can be missed.
Option 1 - Scrolling Filters
Option 1 - Scrolling Filters
OPTION 1
OPTION 1
OPTION 2
OPTION 2
OPTION 3
OPTION 3
key findings
The feedback confirmed that this horizontal design layout effectively met the user needs. Although the biggest change to implement it was a clear favourite, users found the horizontal layout more intuitive and accessible.
The feedback confirmed that this horizontal design layout effectively met the user needs. Although the biggest change to implement it was a clear favourite, users found the horizontal layout more intuitive and accessible.
The feedback confirmed that this horizontal design layout effectively met the user needs. Although the biggest change to implement it was a clear favourite, users found the horizontal layout more intuitive and accessible.
Users felt the sidebar filters were unorganised, making it difficult to find what they needed.
Users felt the sidebar filters were unorganised, making it difficult to find what they needed.
1
1
1
The fixed sidebar took up too much room, reducing the visibility of product listings.
The fixed sidebar took up too much room, reducing the visibility of product listings.
The fixed sidebar took up too much room, reducing the visibility of product listings.
2
Users frequently relied on a few key filters while ignoring others.
Users frequently relied on a few key filters while ignoring others.
3
Having no search functionality within the filters added to user frustration.
Having no search functionality within the filters added to user frustration.
4
THE SOLUTION
results & impact
The redesign was a success. Users praised the clarity and simplicity of the new filter design.
17%
19%
12%
faster product discovery.
Users located products more quickly, reducing time-to-find metrics
increase in engagement.
Filter interactions increased, with users exploring a broader range of options
reduced drop-off rates.
Bounce rates on product listing pages decreased
learning outcomes
User intent vs. behaviour: Although users identified dimensions as a high-priority filter, they often prioritised style instead. This reveals that user behaviour doesn’t always align with stated preferences, highlighting the importance of data-driven insights and continuous post-launch reviews and testing.
User intent vs. behaviour: Although users identified dimensions as a high-priority filter, they often prioritised style instead. This reveals that user behaviour doesn’t always align with stated preferences, highlighting the importance of data-driven insights and continuous post-launch reviews and testing.
User intent vs. behaviour: Although users identified dimensions as a high-priority filter, they often prioritised style instead. This reveals that user behaviour doesn’t always align with stated preferences, highlighting the importance of data-driven insights and continuous post-launch reviews and testing.
next case study
next case study
prIce
dimensions
date
colour
creator
To compliment the new filters we designed a pill-style UI which allowed users to easily review their selections and remove them individually, providing clarity and control...
To compliment the new filters we designed a pill-style UI which allowed users to easily review their selections and remove them individually, providing clarity and control...
results & impact
The redesign was a success. Users praised the clarity and simplicity of the new filter design.
17%
19%
12%
faster product discovery.
Users located products more quickly, reducing time-to-find metrics
increase in engagement.
Filter interactions increased, with users exploring a broader range of options
reduced drop-off rates.
Bounce rates on product listing pages decreased
results & impact
The redesign was a success. Users praised the clarity and simplicity of the new filter design.
17%
19%
12%
faster product discovery. Users located products more quickly, reducing time-to-find metrics
increase in engagement. Filter interactions increased, with users exploring a broader range of options
reduced drop-off rates.
Bounce rates on product listing pages decreased
results & impact
The redesign was a success. Users praised the clarity and simplicity of the new filter design.
17%
19%
12%
faster product discovery.
Users located products more quickly, reducing time-to-find metrics
increase in engagement.
Filter interactions increased, with users exploring a broader range of options
reduced drop-off rates.
Bounce rates on product listing pages decreased
To compliment the new filters we designed a pill-style UI which allowed users to easily review their selections and remove them individually, providing clarity and control...
17%
19%
12%
faster product discovery.
Users located products more quickly, reducing time-to-find metrics
faster product discovery.
Users located products more quickly, reducing time-to-find metrics
increase in engagement.
Filter interactions increased, with users exploring a broader range of options
increase in engagement.
Filter interactions increased, with users exploring a broader range of options
reduced drop-off rates.
Bounce rates on product listing pages decreased
reduced drop-off rates.
Bounce rates on product listing pages decreased