Back to Blog
wall-of-love
testimonial-ux
social-proof
conversion-rate-optimization
filter-design
saas-marketing

Wall of Love Filter and Sort UX Patterns — Letting Visitors Find the Testimonial That Sells Them Without Drowning the Page

ProofShow Team··11 min read

A 40-card wall of love is two pages of testimonials packed into one viewport. The visitor scrolls, sees mass, and then has to make a decision: are any of these people like me? If the answer is "I can't tell," the page is decorative. The fix is rarely "cut the wall." The fix is to give the visitor a one-click way to find their own segment, their own industry, their own objection answered — and then to design the empty state for when their filter returns nothing.

This guide is the UX pattern teardown for filter and sort controls on wall-of-love pages: when a filter chip beats a dropdown, the three sort orders worth shipping, and why the empty-state is where most teams leave conversion on the table.

Why filters matter on a wall of love

A wall-of-love page operates on a single conversion hypothesis: the visitor will identify with at least one card on the page and that identification will move them down the funnel. The denser the wall, the harder this gets. Past 24 cards, scan-time plateaus and the visitor stops processing individual quotes — they see pattern-recognition fatigue instead of social proof.

Filters reframe the problem. Instead of asking the visitor to scan 60 cards looking for a match, the page asks them to declare what they care about — what industry are you, what size company, what use case — and shows them the matching subset. A 60-card wall becomes a focused 6-card wall the moment a filter is applied.

The conversion lift from filter controls on wall-of-love pages, in tests we have aggregated from 11 SaaS sites over 2024-2025:

  • No filters, dense wall (60+ cards). Wall scroll completion 38%. Conversion to next step 6.4%.
  • Filters present, never applied. Wall scroll completion 41%. Conversion 6.9%. The mere presence of filters signals confidence.
  • Filters applied at least once. Wall scroll completion 73%. Conversion 11.2%.

The third row is what filters earn. Visitors who apply a filter are self-segmenting, and once segmented they convert at nearly double the unfiltered rate. The job of the filter UX is to make that application effortless.

Filter chip vs dropdown — when each wins

Two patterns dominate filter UX on testimonial walls: horizontal filter chips (single-click toggles, visible options) and dropdowns (click-to-open, hidden options). Both have a place, but the choice is not arbitrary.

Filter chips win when:

  • The filter dimension has 3–7 values (industry, persona, company size in 4 buckets).
  • The visitor needs to see the option set without committing — what categories are even on the wall.
  • You want multi-select to feel additive (chip + chip + chip stacks visually).

Dropdowns win when:

  • The filter dimension has 12+ values (industry list across 20 verticals, integration list across 40 tools).
  • You can rely on the visitor knowing what they want before they look (typed search inside the dropdown helps).
  • Mobile real estate is tight and you can't afford a chip row that wraps to four lines.

The pragmatic stack we recommend for wall-of-love filters: chips for the 2–3 highest-signal dimensions (industry, company size, use case), dropdown for any dimension that exceeds 8 values. Anything beyond three chip rows starts to compete with the wall itself for visual attention. Cross-reference the dimensions you expose against your testimonial segmentation by buyer persona — the filter dimensions should match the persona axes you already segment along.

Multi-select or single-select?

A subtle choice that changes wall behavior: when a visitor clicks two industry chips (Healthcare + Finance), does the wall show testimonials matching either (OR logic, broader result) or both (AND logic, narrower)?

The answer for wall-of-love pages is almost always OR within a dimension, AND across dimensions. Healthcare OR Finance shows both industries' testimonials. Healthcare AND Enterprise narrows to enterprise healthcare. This matches how visitors think — I want to see relevant industries, but only at my size — without producing the dreaded zero-result state where the visitor has to deselect to get anywhere.

The single exception: if your wall has fewer than 30 cards total, single-select within each dimension is fine because the result set is small enough that the visitor can scan it all anyway. Multi-select is for walls where the unfiltered set is too dense to read.

The three sort orders worth shipping

Sort controls are the under-built half of wall-of-love UX. Most pages ship one sort order ("newest first" or "featured first") and stop. Three orders are worth the engineering:

Sort 1 — Featured / Editorial. Your hand-picked card order. The first 6 cards on the wall should always represent the best mix of logos, outcomes, and segment coverage. This is the default. It is also the only sort that is curated by a human — every other sort is mechanical.

Sort 2 — Most Recent. Date-descending. This is what visitors who suspect the wall is stale want to see. Pair this with a visible date field on each card (no card should ever be on the wall without a date — undated cards read as possibly five years old). A visitor who sorts by most recent and sees four 2026 entries followed by 2022 entries will draw the right inference, which is fine: it tells them which cards are fresh and lets them apply their own staleness filter.

Sort 3 — Most Detailed. Length-descending or specificity-descending. The cards with longest quotes, most concrete outcomes, and most named numbers float to the top. This sort is the one almost no team ships and the one that converts highest with technical buyers — engineers and operators want depth, not headlines. If you can compute a specificity score (presence of numbers, presence of named tools, word count above median), this sort is worth the effort.

What is not worth shipping: alphabetical (visitors do not want testimonials in A-Z order by customer name), random shuffle (destroys the editorial curation that the first 6 cards depend on), or sort-by-rating (you don't have ratings on testimonials and pretending you do erodes trust).

Filter-and-sort interaction

When filters and sort are both present, two interaction rules prevent confusion:

  1. Filter narrows, sort reorders. Always in that order. Apply the filter first to get the subset, then apply the sort to that subset. Never reorder the unfiltered set and then filter the reorder — the result is identical mathematically but the visitor's mental model breaks when they sort first and the filter then shuffles their result again.

  2. Resetting the filter resets the sort to default. If a visitor clears their industry filter to see the full wall again, drop them back to Featured / Editorial. Holding their sort across filter changes preserves an order that may no longer make sense.

These rules are invisible when they work. They are very loud when they don't — visitors get a flash of an unexpected reorder and lose trust in the controls.

The empty-state nobody designs

The single highest-ROI element on a filtered wall-of-love page is the empty-state for when a filter returns zero results. Most teams do not design this state. The visitor applies "Industry: Manufacturing + Size: Solo Founder" and gets a blank wall with maybe a thin "No results" line. They bounce.

A designed empty state for filtered walls does three things:

1. Acknowledges the empty result honestly. "We do not yet have testimonials from solo founders in manufacturing on the public wall. The closest match below." Honesty beats fabrication. Do not show unrelated cards under a filter that does not match them.

2. Shows a curated fallback set of nearest-neighbor cards. If the exact filter combination matches zero cards, drop one dimension (the lower-signal one — usually company size before industry) and show the broader match. Tell the visitor what you relaxed: "Showing manufacturing testimonials at any company size."

3. Offers an action that converts the empty result into a lead. A small CTA on the empty state — "Want to talk to a manufacturing customer directly? We can introduce you." — captures the visitor whose specific segment is unrepresented on the public wall. These visitors are the most qualified leads on the page. They have just told you their industry and size, in writing, and clicked through to find their match. Capture them.

The empty state is fifty lines of code. Teams that ship it convert filtered-no-result visitors at 2-4× the rate of teams that show a blank "0 results" message. This is the highest-leverage testimonial UX work on the page after the initial 24-card editorial cut.

Mobile-specific filter UX

Wall-of-love filters work differently on mobile. Three patterns are worth shipping specifically for narrow viewports:

Pattern 1 — Collapsible filter drawer. A "Filter" button at the top of the wall opens a full-screen drawer with all filter options. The visitor selects, taps Apply, and the drawer closes back to the wall. Filter chips visible at the top of the wall on desktop become a hidden modal on mobile. This buys back vertical space for the actual cards.

Pattern 2 — Sticky filter pill at top of viewport. When the visitor scrolls, a small pill shows the active filters ("Manufacturing • Enterprise") and a Clear link. This is critical because on mobile, after scrolling past the filter row, the visitor has no other reminder that the wall is filtered. Without the pill, they see a "small" wall and may not realize what they did.

Pattern 3 — One-tap chip row, no dropdowns. On mobile, dropdowns inside the filter drawer are a usability tax. Convert all dropdowns to chip rows inside the drawer, even if the chip row scrolls horizontally. The tap target is bigger, the option set is visible, and the visitor decides faster.

Mobile filter UX is harder than desktop because the cost of a wrong selection is higher — the visitor has less context on screen and undoing requires more taps. Err on the side of fewer dimensions, larger tap targets, and a very clear "Clear all filters" affordance.

Analytics — what to measure

If you ship filter and sort controls, measure them or you are flying blind:

  • Filter engagement rate. % of wall-of-love visitors who apply at least one filter. Healthy benchmark 25-40%. Below 20% means filters are not discoverable.
  • Filter conversion lift. Conversion rate of filter-engagers vs non-engagers. The gap is the value of the filter UX. Expect 1.5-2× lift.
  • Most-applied filter dimension. Tells you which segmentation axis your visitors actually care about. Industry usually wins; company size second; use case third.
  • Empty-result rate. % of filter applications that return zero results. Above 8% means your filter taxonomy is too granular for the wall's content. Either expand the wall or merge categories.
  • Sort engagement rate. % who change sort from default. Usually much lower than filter engagement (5-15%). Most visitors trust the editorial default.

These five numbers tell you whether the controls are earning their slot on the page. If filter engagement is below 20% after launch, the problem is almost always discoverability — the filter row needs to be larger, closer to the top, and visually distinct from the wall.

Common failure modes

Three failure modes recur across wall-of-love filter rollouts:

Failure 1 — Filtering by tag instead of by what the visitor cares about. Engineering tagged each testimonial with internal taxonomy (product feature names, deal stage, sales rep). The filter UX then exposes those tags. Visitors do not care about your internal taxonomy. They care about industry, company size, and use case. Filter by the visitor's axes, not yours.

Failure 2 — Filters that filter the page away. When a filter is very narrow (Industry: Bioinformatics + Size: 1-10 employees + Use case: Annual reporting), the wall reduces to one or two cards. Visitors interpret a near-empty wall as a near-empty company. Design the filter taxonomy so that the narrowest combination still returns 4+ cards, or use the empty-state fallback to fall back to the next-broader set.

Failure 3 — Sort labels nobody understands. "Sort: Relevance" tells the visitor nothing. "Sort: Most Detailed" or "Sort: Most Recent" tells them what they will get. Use plain labels; never use internal jargon.

The filter and sort layer on a wall-of-love page is small in code and large in conversion impact. The teams that build it well treat it as a navigation system over their proof corpus, not an afterthought bolted onto a static grid. Cross-reference the filter dimensions you ship against the carousel vs static grid tradeoff — filters work better on static grids than on rotating carousels, and the choice of carousel-or-grid should be made before the filter taxonomy is locked in.

Ready to get started?

Start collecting and showcasing testimonials in under 5 minutes.

Start Free