2 of 23

PRIVILEGED & CONFIDENTIAL 2

When mobile users apply filters on the PLP it is not clear what filters have been applied. This is causing them to switch back and forth between the filter modal experience and PLP to review and edit which filters they applied to the grid.

APPLIED FILTERS

THE PROBLEM

If we provide an applied filter summary above the PLP grid, users can easily see what filters have been selected without having to take the additional step of moving through the filter modal.

Additionally Baymard suggests:�

UX SOLUTION

Baymard Link to applied filters best practices article

Applied Filter overview above product grid
Ability to quickly remove filters
Immediate confirmation filter has been applied

3 of 23

DESIGN SOLUTIONS

PTH3

4 of 23

PRIVILEGED & CONFIDENTIAL 4

APPLIED FILTERS

DESIGN SOLUTIONS

✅ Clear Applied Filter Overview

✅ Ability to quickly remove filters directly on PLP

✅ Optimize PLP Header to reduce clutter

Current State

Proposed State

5 of 23

PRIVILEGED & CONFIDENTIAL 5

APPLIED FILTERS

DESIGN SOLUTIONS

✅ Clear Applied Filter Overview

✅ Ability to quickly remove filters directly on PLP

✅ Optimize PLP Header to reduce clutter

Current State

Proposed State

To reduce noise:

Remove Nav dropdown
Update filter/sort icon
Introduce collapsed header interaction to promote browse

6 of 23

PRIVILEGED & CONFIDENTIAL 6

APPLIED FILTERS

INTRODUCING COLLAPSED HEADERS ON SCROLL

Top of PLP

V1 (Mid Scroll)

V2 (Mid scroll)

7 of 23

DRILLING DOWN THE DESIGNS

PTH3

8 of 23

PRIVILEGED & CONFIDENTIAL 8

APPLIED FILTERS

CURRENT VS PROPOSED | Filter Modal Default

Current State

Proposed

Update Header: Left align, Font to H5 (our modal header font styling)

Only Display ‘Apply’ CTA when Filters are applied

Only Display ‘Clear All’ when Filters are applied

9 of 23

PRIVILEGED & CONFIDENTIAL 9

APPLIED FILTERS

CURRENT VS PROPOSED | Filter Modal Filters Applied

Current State

Proposed

Applied filters are sticky in modal

Update CTA to more user-friendly copy

Swatches update to square to be in line with PLP + upcoming PDP

‘Clear All’ moved to side-by-side interaction with filter count

10 of 23

PRIVILEGED & CONFIDENTIAL 10

APPLIED FILTERS

CURRENT VS PROPOSED | PLP Filters Applied

Current State

Proposed

Applied filters: See Baymard Article here

Above product grid
Horizontal carousel interaction
Easy to Remove
Removed from Breadcrumb

Remove nav category dropdown – Do not see this competitively and users are not interacting with it – BYE!

Filter/Sort paired with Icon

Addition of Icon helped users locate the filter/sort with ease
Best practice to keep ‘Filter/Sort’ as copy Baymard article here

11 of 23

APPLIED FILTERS

PROPOSED | PLP Collapsed Header

Breadcrumbs slide out of view

Promo slides out of view

Top of Page

Scroll Down the PLP

Header Collapses

Scroll back up the PLP

Applied Filters move into view. Based On User behavior of users scrolling up the grid to take action

12 of 23

APPLIED FILTERS

PROPOSED | PLP Collapsed Header

Scroll Down the PLP

Scroll back up the PLP

Applied Filters move into view. Based On User behavior of users scrolling up the grid to take action

Competitor interaction example- Play Video!

13 of 23

PRIVILEGED & CONFIDENTIAL 13

APPLIED FILTERS

CURRENT VS PROPOSED | PLP Default State (No Applied Filters)

Current State

Proposed

Validated to remove Nav Dropdown – Do not see this competitively and users are not interacting with it – BYE!

Filter/Sort paired with Icon + above grid

5/5 users were able to immediately locate Filter/Sort when paired with the Icon vs 3/5 missed it initially in our current state

14 of 23

PRIVILEGED & CONFIDENTIAL 14

APPLIED FILTERS

CURRENT VS PROPOSED | Desktop

Current State

Proposed

Keep applied filters consistent above grid

15 of 23

UXR TO VALIDATE

PTH3

16 of 23

PRIVILEGED & CONFIDENTIAL 16

APPLIED FILTERS

UXR GOAL

If we remove the Nav dropdown, how will that affect user’s ability to drill down their search, are there any implications to this removal?
Is it easy for users to apply, edit and remove filters?
How do users feel about the new information presented to them as they shop against our current state?

Play video to see proposed view in action! ->

17 of 23

PRIVILEGED & CONFIDENTIAL 17

APPLIED FILTERS

WHAT WAS TESTED

Mobile only
Current state vs 2 proposed prototypes Filter selection

Understand the implications of removing the nav dropdown and collapsing the PLP header

How do they feel about the information presented to them/ do they notice any changes?

Observe users navigate to different categories from the PLP to understand the value of the nav dropdown

How clear was it that the filters were applied and how clear was it to edit?

18 of 23

PRIVILEGED & CONFIDENTIAL 18

APPLIED FILTERS

PROPOSED EXPERIENCE

We tested 2 prototypes that showcased two different variations of the collapsed information.

V1 that displayed applied filters on scroll while V2 had a more minimal approach.

Spoiler Alert! The user did not notice the difference between the two. And when the user wanted to filter, their behavior showed that they immediately scrolled up to the top of the page.

19 of 23

PRIVILEGED & CONFIDENTIAL 19

APPLIED FILTERS

CURRENT EXPERIENCE

“I can see that the color is [in the breadcrumbs] but it looks like I've navigated there instead of applied this filter so I would say 3 out of 5 not super clear.”

“a few more clicks than I wanted [ to edit the filter] but once I learned the pattern I got it. it's a little strange that the filters are in the breadcrumbs though.”

“it’s clear filters are applied bc I see the color I selected is in the images, I selected orange and I see the images are orange.”

Applied and Edit Filters:

Nav Dropdown:

Overall users rated 4/5 on clarity and ease of applying and editing filters. (Whereas users rated both proposed experiences a 5/5)

Overall users did not notice the nav dropdown. Only 1/5 users interacted with it and when presented with it removed found it equally as easy to navigate to other products and did not notice a change. It was 50/50 for users to narrow their scope by utilizing the filter tool or to go directly to the hamburger menu and start over.

20 of 23

PRIVILEGED & CONFIDENTIAL 20

APPLIED FILTERS

CURRENT EXPERIENCE

1 User mentioned wanting to filter by reviews (not currently a filter option) a.) New Pi5 Discovery item!!
100% of users did not notice ‘Apply filter’ bc the cookie banner was hiding it

a.) Make sure Cookie banner does not cover sticky CTA in new design

4/5 users did not immediately see the ‘Filter/Sort’ button and 2 users mentioned wanting a ‘Sort’ button completely missing it. However, when presented with the Filter + Icon there was no confusion.

Additional opportunities

21 of 23

PRIVILEGED & CONFIDENTIAL 21

APPLIED FILTERS

PROPOSED EXPERIENCE

Testing results showed:

That the applied filters above the product grid provided more clarity than the current experience and were easy to remove for all users

The addition of the icon helped the users identify the filter button quicker

Observing the users scroll behavior the users typically scroll up when they want to take action such as filtering. Suggest to keep the header more minimal while the user is scrolling downwards and option to have the header expand on scroll up to display the applied filters.

Consider adding a filter for reviews

All users displayed an affinity for the hamburger menu for navigating from the PLP opposed to the nav dropdown. But, consider Baymard’s Nav Northstar callout to help the user identify where they are in the navigation so it doesn’t “take so many steps to do what I want to do”

22 of 23

Future opp

PTH3

23 of 23

PRIVILEGED & CONFIDENTIAL 23

APPLIED FILTERS

FUTURE OPPORTUNITIES

Visual Promoted filters: Help users better navigate (IE bra support levels, legging lengths, activity type)