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. 01

All Bikes

Fig. 01

All Bikes - Desktop

Fig. 01

All Bikes - Mobile

Fig. 02

Category Page - woom ORIGINAL

Desktop Category Page

Mobile Category Page

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. 04

Key Decisions

Start

Select

Model?

Yes?

Select

Size?

Yes?

Select

Color?

Yes?

Proceed

Checkout?

Yes?

End

No?

Fig. 04

Key Decisions

Start

Select

Model?

Y

Select

Size?

Y

Select

Color?

Y

Proceed

Checkout?

Y

End

N

Fig. 04

Key Decisions

Start

Select

Model?

YES

Select

Size?

YES

Select

Color?

YES

Proceed

Checkout?

YES

End

No

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.