My Role: Full stack UX
Date: August - September 2024
Medium: Website
Tools: UserTesting, Figma, Content Square, Baymard
The Project:
I was tasked with researching filter engagement, conducting usability testing, and updating the filter UI.
Smartwool, Altra, and Dickies all existed on the platform, so when it came time to update the filters we took an agnostic approach.
Project Goals:
- Discover why users were not utilizing filters
- Find solution that users would utilize
- Update filter UI for each brand
The Problem:
Filter engagement was low, despite knowing from previous studies that users want to be able to filter to make shopping easier. I needed to look at analytics to understand how users interacted with the existing experience, and then do testing to figure out the why behind the numbers.
The Process
Content Square Analysis:
- Used Content Square zone analysis to pull click rate of several VF brands
- For desktop, focused on engagement of the first filter, All Filters, and Sort by
- For mobile and desktop views, focused on Filter & Sort button
Findings:
- Filters styled like buttons were clicked significantly more than those without the outline and with smaller text
- All Filters was getting lost across brands
- Minimalistic Filter & Sort styling was getting lost
Baymard Best Practices:
- The Baymard Institute is a massive knowledge base where massive UX research is conducted across retail sites and then used to create guidelines that apply to all retail sites
- I utilized the Baymard knowledge base to understand industry best practices and discovered some guard rails to follow in my designs for the filter layout and functionality, seen below.
- The guidelines I found for sort empowered me to provide some very straightforward recommendations, seen below.
Design Iteration & Prototyping:
Between the analytics and the Baymard best practices, I had a great starting point to make some designs. Because Dickies had the most problematic experience, I used their interface for usability testing.
I created prototypes for both desktop and mobile experiences.
Usability Testing:
- Unmoderated tests for both mobile and desktop
- Users went through the filter experience on the current site and then in the prototypes
- After walking through all experiences, they were asked to compare and contrast each version.
Final Design
After getting and synthesizing the test results I updated the UI for each brand.
The major change across brands for desktop was moving All Filters to the first spot, and for mobile and tablet moving the Filter and Sort buttons to the right side with a dark fill.
Because Dickies needed the most help, I also updated the filter drop down styling.
Altra
Dickies
Smartwool
