Case Study · UX Research + Product Design · Sep – Dec 2023

Known
Source

A secondhand luxury marketplace where users abandoned with clear intent. I ran end-to-end research, diagnosed the failure points in the search and filter system, and redesigned the mobile experience — cutting task completion time by 60%.

Role UX Researcher & Mobile Designer Duration Sep 2023 – Dec 2023 Team 4 Designers
UX Research Mobile Design Usability Testing Accessibility Audit E-Commerce WCAG 2.1
Known Source Redesign
Fig. 1 · Known Source — Redesigned mobile search and filter experience. The final hybrid filter system collapsed three scroll levels into one and raised filter clarity ratings 2.7x.
60%
Reduction in task completion time measured across five usability sessions
3→1
Scroll levels collapsed — three nested layers reduced to a single surface
2.7×
Filter clarity rating improvement — 1.8 to 4.8 on a five-point scale
6
WCAG 2.1 violations caught and resolved via accessibility audit
I · The Problem

Users Knew What They Wanted. The Interface Made It Impossible to Find.

Known Source serves buyers who arrive with specific, high-intent queries. A vintage Chanel blazer in size 6. A Bottega Veneta bag in a specific colorway. These aren't browsing sessions — they're searches with clear criteria. The failure wasn't inventory. It was friction between user intent and the interface's ability to act on it.

High bounce rates and low conversion weren't random. Every friction point was traceable to a specific interaction breakdown in the search and filter system.

  • Three levels of nested navigation — category, subcategory, and filter panel each required separate scroll interactions, compounding on mobile
  • No persistent filter state — applied filters disappeared on page scroll, forcing users to reapply from scratch
  • No active filter visibility — users couldn't tell which filters were active or how to remove them
  • Search results misaligned with intent — keyword search returned semantically adjacent items rather than matches
  • Touch target failures — filter checkboxes sized below the 44px minimum, causing mis-taps on mobile
Current State Journey Map

Fig. 2 · Current state journey map — annotated friction points across the existing mobile search flow. Red annotations mark confirmed drop-off zones from analytics and session observation.

EXISTING EXPERIENCE · FRICTION MAP Land on App Search Navigate Filters Review Results Attempt Purchase off-target results cause first drop-off 3-level scroll system most abandonment here filters disappear state lost on scroll wrong items in cart due to filter confusion ~30% drop ~55% drop (peak friction) ~20% drop FRICTION MAP · CURRENT STATE · CONFIRMED BY USABILITY OBSERVATION + ANALYTICS REVIEW

Fig. 3 · Friction map of the existing experience. The filter system at step 3 accounted for the largest observed abandonment — 55% of participants in early testing gave up at this point.

II · Research

Six Sessions. Every Participant Hit the Same Three Walls.

I conducted and analyzed moderated usability testing with six participants from Known Source's target demographic — resale buyers aged 22 to 38 with prior experience on luxury secondhand platforms. Each session ran 40 minutes around the same core task: find a specific item and apply three filters you'd use in a real purchase decision.

I coded session recordings using thematic analysis, then mapped findings to interaction touchpoints. The data converged on three failure categories that explained virtually all observed friction.

Moderated usability testingThematic codingWCAG 2.1 accessibility auditTaguetteMiro affinity mapping
Research Findings and Affinity Map

Fig. 4 · Research synthesis — affinity mapping from six participant sessions. Three failure categories drove virtually all observed friction.

My Specific Contribution: Accessibility Audit

In addition to the shared research effort, I owned a full WCAG 2.1 accessibility audit of the existing mobile experience. This added a layer of evidence the team hadn't surfaced through observation alone — many of the friction patterns users described verbally had quantifiable technical roots.

WCAG 2.1 ACCESSIBILITY AUDIT FINDINGS AA FAILURE · 2.1.1 Touch Target Size Filter checkboxes measured at 28×28px. WCAG minimum: 44×44px. → Mis-taps observed in 5/6 sessions AA FAILURE · 1.4.3 Contrast Ratio Filter label text: 2.8:1 contrast ratio. WCAG AA requirement: 4.5:1 minimum. → Active filter state invisible in sunlight AA FAILURE · 4.1.2 No State Announcement Applied filters not communicated to assistive technology (missing ARIA). → Screen reader users had no filter feedback A FAILURE · 2.4.3 Focus Order Filter modal trap — keyboard focus did not cycle within the modal. → Keyboard-only users couldn't close filters A FAILURE · 1.3.1 Info and Relationships Filter groups structured via color only — no semantic group labels. → Category relationships not perceivable RESOLVED IN REDESIGN All 6 Violations Addressed The redesign resolved each violation — 44px targets, 4.5:1+ contrast, ARIA labels, focus management, and semantic grouping.

Fig. 5 · Accessibility audit findings — six WCAG 2.1 violations identified across touch targets, contrast, focus management, and semantic structure. All six were resolved in the redesign.

5/6
participants mis-tapped filter checkboxes at least once. Root cause: 28px touch targets against a 44px WCAG minimum.
100%
of participants failed to identify which filters they had applied mid-task. The active filter state was invisible on scroll.
4/6
participants abandoned the filter interaction entirely and switched to infinite manual scroll as a workaround.
"
I don't even know what I'm filtering by at this point. I just want to see the Chanel section. Why does it make me scroll through everything first?
Participant 03 — Moderated usability session, Think-aloud protocol
III · Design Goals

Three goals, each traceable to a specific research finding.

Goal 01 · From finding 1

Persistent Filter Visibility

Applied filters must remain visible throughout the results view. Users need to know what's active without scrolling back to the filter panel. Persistent pill UI with one-tap removal.

Goal 02 · From finding 2

Flatten Navigation Depth

Collapse three scroll levels into one. The filter interaction should feel like a sidebar, not a journey. Every filter option reachable within two taps from search results.

Goal 03 · From audit

Meet WCAG 2.1 AA

44px touch targets on all interactive elements. 4.5:1+ contrast on all text. ARIA labels on state changes. Keyboard-navigable modals. Every violation found in the audit resolved.

IV · Design Process

The Filter Iteration: Three Variants, One Hybrid That Won

The core design challenge was the filter system. We prototyped three distinct patterns and tested each with participants from the original research group before committing to a direction.

FILTER PATTERN COMPARISON · THREE VARIANTS TESTED VARIANT A · HORIZONTAL FILTERS Brand Size Condition Color 👜 👔 Discoverable but consumes too much mobile real estate VARIANT B · FULL MODAL Filter by Brand › Size › Condition › Color › [ modal covers content · flow disrupted ] Most options but interrupts browsing flow entirely VARIANT C · HYBRID (CHOSEN) Brand Size All filters › Chanel ✕ M ✕ 👜 🧥 Speed for common filters + power for advanced — both satisfied

Fig. 6 · Filter pattern comparison — three variants tested with participants. The hybrid approach (Variant C) gave users speed for frequent filters and depth for advanced ones without requiring a context switch.

Why the Hybrid Won.

Users needed two different speeds depending on the filter. A buyer filtering by brand — which they do on nearly every session — wanted it reachable in one tap without any modal. A buyer filtering by a combination of authentication status, seller rating, and price range was willing to open a drawer.

The hybrid satisfied both without compromising either. Quick-access horizontal pills for the four most-used filters. A persistent "All filters" drawer for everything else. Applied filters shown as removable pills directly below the search bar — visible at all times, regardless of scroll position.

  • Horizontal quick-access: top four filters (brand, size, condition, price) always one tap away
  • Applied filter pills: persistent below the search bar — always visible, always removable
  • Full filter drawer: bottom sheet, not full-screen modal — preserves context of what you're filtering
  • Filter count badge: when drawer is closed, shows number of active filters at a glance
"Users needed speed for common filters and depth for advanced ones. The hybrid gave both without requiring them to switch mental modes."
Wireframe iterationsWireframe explorations

Fig. 7–8 · Wireframe iterations — testing horizontal vs. modal vs. hybrid layout across three rounds. Annotations show which decisions each test informed.

High-Fidelity: Translating Research into Interaction

Every high-fidelity decision maps directly to a research finding. 44px touch targets replacing the 28px originals. Active filter pills that persist through scroll. Bottom sheet filter drawer instead of full-screen modal. Semantic grouping with visible category labels. Contrast ratios verified at 4.5:1 minimum across all text.

High-Fidelity Mobile Screens

Fig. 9 · High-fidelity mobile screens — final hybrid filter system with persistent pill active states, bottom sheet drawer, and touch-optimized interaction targets throughout.

V · Testing & Results

Same Task. Same Five Users. The Before and After Numbers.

We ran comparative usability testing against the existing Known Source experience with five participants drawn from the original research cohort. Each completed the same task on both the original and redesigned prototypes, with order counterbalanced to control for learning effects.

Task: Search for a corset top and apply three filters you would use in a real purchase decision.

Participants rated agreement with four statements on a 1–5 scale. Ratings were collected for both the existing and redesigned experiences within the same session.

Comparative usability ratings — 1 (strongly disagree) to 5 (strongly agree)
StatementBeforeAfterChange
Easy to find what I'm looking for2.54.3+72%
Filters are intuitive to use2.04.5+125%
I understand which filters are active1.84.8+167%
Search results match what I was looking for2.34.0+74%

The largest single improvement — 167% — was on filter state comprehension. Persistent pills directly addressed the most-cited frustration from every prior session.

BEFORE / AFTER · TASK COMPLETION TIME Before redesign avg 4:20 After redesign avg 1:44 60% REDUCTION IN TASK COMPLETION TIME · MEASURED ACROSS FIVE PARTICIPANTS

Fig. 10 · Task completion time comparison — average task duration dropped from 4:20 to 1:44 across five comparative usability sessions. The filter redesign was the primary driver.

Final prototype walkthrough

Fig. 11 · Final prototype walkthrough — redesigned mobile search and filter experience with hybrid filter system, persistent pills, and accessibility-compliant touch targets throughout.

VI · Reflections

What This Project Made Clear About Research-Led Design.

The 167% improvement in filter state comprehension came from one specific intervention: persistent filter pills that didn't disappear on scroll. That fix was directly traceable to a finding from the first research session. The research didn't inform the design — it specified it. That precision is what good mixed-methods research enables.

Running the accessibility audit alongside usability testing revealed something important: many "user experience" problems have quantifiable technical roots. A filter that users called "confusing" had a contrast ratio of 2.8:1 against a 4.5:1 requirement. The usability session gave us the behavior; the audit gave us the mechanism. Both were necessary to design the right fix.

The constraint from SEO — which required certain URL structures — initially felt like an obstacle to the search redesign. Working within it taught me that business constraints are part of the design problem, not exceptions to it. The hybrid filter system worked with the URL structure rather than against it.

← All Projects
Next Project
HackNYU