Simplified Shopping
Improving the customer decision-making process with filters
UX/UI Design • 2023
My Role
UX Design,
User Research
Tools
Sketch
Timeline
1 week
Context
In 2023 woom made an effort to improve site usability after merging the US and European websites into one global site with localization in 2022. Goals included optimizing existing components for mobile, addressing inventory transparency, and implementing features to facilitate informed purchasing ahead of the busiest shopping season.
Filters were explored as a way to help customers refine products and compare models relevant to their needs without the heavy lift required to implement sitewide search.
As the designer for this project, I collaborated with the Head of Global Digital Marketing and Global Art Director, conducting research and executing high fidelity mockups.
Desktop
Mobile
Problem
Users are unable to effectively compare products, hindering their ability to understand the product landscape and feel confident in their decision making.
Limited development resources meant finding a solution that was easy to implement and did not impact existing components or page layouts.
Most users expect sorting to be available alongside filters, but leadership determined sorting would not be included in the MVP.
As a specialty retailer with small assortments, the likelihood for queries to yield no results can be high.
Challenge
Implement a flexible, transparent, and easy to use filter solution to improve refinement, comparison, and understanding of product offerings.
Discovery
Understanding the current experience
No shoppable multi-model view
The current All Bikes interface (Fig. 01) features lifestyle images alongside model descriptions rather than product cards. Only bikes of the same model can be viewed in a single glance on model category pages (Fig. 02). Users are forced into a rigid flow of choosing a model before making other key decisions (size and color).
Fig. 02
Sameness increases cognitive load
All models lead with the same color across sizes by default (Fig. 02). Technical differences aren’t perceptible in small images, making it hard for users to differentiate between products (Fig. 03) and increasing the likelihood of errors.
Fig. 03
woom 2
woom 3
Ambiguous naming
woom’s naming conventions are brand specific and don’t include industry standard terms that can add context, so users must understand the product landscape in order to select the correct category.
Variety of users
Technical affluence and product knowledge of users varies widely, including parents, grandparents, caretakers, family friends, and even sometimes older kids themselves.
The experience should support all customers by building confidence with familiar and easy to use features.
Research
A quick competitive analysis revealed 4 key insights that acted as guiding principles throughout the design process.
Insight 1
Live loading creates bad friction that can feel like site outages or errors when functionality is paused while fetching.
Insight 2
Result counts and filter counts provide system feedback that help users confirm actions were successful and build confidence.
Insight 3
Filters should be grouped in logical categories with clear hierarchy to improve scannability and user efficiency, but limited enough to prevent decision fatigue and errors.
Insight 4
User control should be a high priority, creating a flexible experience that allows users to add and remove filters across multiple views or states.
The process
Define and strategize
Ideating architecture
I wanted to limit filter categories to 4-5 groups to maintain scannability and ensure filters were effective.
To determine categories, I referenced key decisions points (Fig. 04) in the purchasing flow since users were already using these decisions to refine products and considered common sort options (Fig. 05) that might help users who would have otherwise relied on sorting.
Fig. 05
Potential Categories
Key Decisions
Model
Size
Color
Sort Options
Newness
Price
Other
Time sensitivity
Stock levels
Condition
Referencing filter patterns
With limited development bandwidth, I eliminated a sidebar layout that might effect existing components and page layouts.
Having recently updated our top navigation to a mega menu, I decided to explore implementing a similar design for filters.
Fig. 06
Layouts Explored
Sidebar
Always visible
High development lift
Dropdowns
Not compact on mobile
Single select
Megamenu
Consistent layout (navigation)
Optimal visibility upon collapse
Flyout
Clean layout
Multi-select capability
Tabs
Efficient comparison
Limited filters
The Solution
The MVP
Full width sticky menu
The final solution was a full width sticky menu that invokes a large, glanceable overlay with multi select filters. The full width design provides optimal visibility of active filters when collapsed.
Mobile views remain glanceable with a flyout menu and collapsable drawers.
Placement
Since model assortments range from 2 to 8 bikes each, filtering them would often produce 1-2 results, or none at all. For this reason, I limited placement only to pages that would have a high impact.
Filtering functions will be present only on pages where users see more than one bike model.
Desktop
Mobile
Scannability
Limiting categories and total number of filters was important to decrease the odds of a search yielding no results with woom’s limited assortment.
Age, type, color, and availability were the most applicable categories to achieve effective refinement and ensure glanceability.
Desktop
Mobile
Multi-select and batch filtering
When the filter menu is invoked, users can make multiple selections that are batch filtered to prevent lag each time a user adds or removes a filter and summarized in a filter count. Upon collapse, live loading is used when filters are cleared.
Result counts are visible only upon collapse, but provide enough feedback to keep users informed.
Desktop
Mobile
Flexibility
Filters can be cleared individually or in batches in both collapse and expanded views for a flexible and efficient experience.
Desktop
Mobile
Retrospect
What I learned during this process
Building confidence
This was the first time I designed a completely new feature as the lead designer. While the project was not significantly cumbersome, it was an opportunity to explore how I solve problems, understand what could be improved about my process, and build confidence in my design decisions.
While the feature did not end up launching, the first iteration was well received with little feedback because I took the time to conduct research and explore different solutions before approval.
Error states, interactions, and handoff
Final designs at woom consist of high fidelity mockups rather than prototypes, which resulted in missing states and interactions in initial designs and additional back and forth.
Even when designing a single component, I need to explore all states and flows as a part of the component design. Without prototypes, detailed annotated designs can help to clearly communicate functionality for successful handoff.