Most testimonial pages are a wall of quotes in chronological order. Visitors scroll for ten seconds, read three or four randomly chosen ones, and leave. That is not a conversion page. That is a memorial.
A testimonial page that earns its keep on a B2B SaaS site is structured. It assumes the visitor arrived with a specific question — "is this product right for my situation?" — and helps them answer that question in under two minutes. The structure is the difference.
This article walks through the information architecture decisions that turn a wall of quotes into a navigable conversion page: how to group, how to filter, what order to present, and the five sections that should always be present.
The visitor's job
Before we get into structure, we need to be honest about why someone is on your testimonial page. They are not there to celebrate your customers. They are there to test their own situation against your customer base. Their unspoken question is:
"Has anyone with a job like mine, at a company like mine, used this product to solve a problem like mine?"
If your testimonial page is built to answer that one question quickly, it converts. If it is built to flatter you, it doesn't.
Every architectural decision below derives from that question.
The five sections that should always be present
A testimonial page that does its job has five distinct sections. They should appear in this order, because the order matches the decision sequence the visitor is running in their head.
Section 1 — The hero summary
A single line that summarizes who uses the product. Not a quote. A factual claim with a number.
Example: "Over 1,200 customer success teams use ProofShow to manage testimonial collection."
This serves two functions. It anchors expectation (the visitor now knows what kind of buyer is represented on the page), and it filters out misfit prospects fast — which is good, because misfit prospects do not convert anyway.
Section 2 — A short row of recognizable customer logos
Three to seven logos in a single horizontal row, muted styling. This is the same logo strip pattern that appears on the homepage trust bar — see our trust bar customer logos vs testimonial quotes piece for the detailed reasoning. On the testimonial page it serves as a quick visual anchor for "real companies."
If you have a sortable directory of customers, link to it from this section. Do not list every customer. Three to seven is the right density.
Section 3 — The filterable testimonial grid
This is the main attraction. A grid of testimonial cards that visitors can filter by role, industry, company size, and use case. The filter is not optional. A grid without filters is a wall of quotes again.
The minimum filter set is:
- Role (engineer, marketer, founder, customer success manager, etc.)
- Industry (SaaS, e-commerce, agency, etc.)
- Company size (small, mid-market, enterprise)
- Use case (the specific job your product does — e.g., "collect testimonials from NPS promoters")
Pick filter values that map to how your prospects describe themselves, not how you describe your customer base internally. Our filter and search UX piece covers how to map customer language to filter taxonomy.
Each card should show: photo, name, title, company, a 20-to-60-word quote, and a "read more" link to a longer case study if one exists.
Section 4 — Two or three full-length case studies
Below the grid, feature two or three case studies as deeper proof. Each case study should answer four questions:
- What was the company's situation before they adopted the product?
- What did they try first that didn't work?
- How did your product change their situation?
- What measurable outcome resulted?
The reason for two or three (not ten) is decision economics. A visitor who needs more than three deep examples is researching, not buying. Help the researcher by linking to a separate /customers directory, but keep the testimonial page focused on the buyer.
For the structural difference between case studies and testimonials, see case study vs testimonial.
Section 5 — A clear conversion CTA
The final section repeats the same CTA from the homepage hero. A testimonial page is a mid-funnel page. The visitor who reads all the way through is high-intent. Give them an obvious next step.
Two CTAs is the right number: a primary CTA (start trial, request demo) and a secondary CTA (read pricing, see product tour). Three or more is clutter.
Filter design: the part most pages get wrong
The filter row above the testimonial grid is the single most leveraged piece of UI on the page. Done well, it cuts the visitor's time-to-relevant-quote from "scroll randomly for two minutes" to "click two filters, read three quotes, decide."
The most common mistake is treating filters as taxonomic. Designers list every dimension they can pull from the testimonial database: industry, role, region, plan tier, year. The result is a filter row with twelve dropdowns that visitors ignore.
A useful filter row has at most four dropdowns and surfaces the values the visitor will actually use. Run a mental test: if a visitor selects two filters, do enough testimonials remain to be useful? If yes, the filter is well-designed. If you end up with zero results on common combinations, your filter set is too granular.
A good filter row also exposes the filter values as default-visible, not behind a click. A row that shows "Role: Engineer, Marketer, Founder, CS Manager" lets the visitor pick at a glance. A dropdown that hides those values until clicked loses half the engagement.
Grouping vs filtering: when to use which
Grouping (rendering testimonials in pre-labeled sections, e.g., "From engineers," "From founders") is a stronger anchor than filtering when:
- Your product has 2 to 4 clearly distinct buyer personas.
- The visitor's persona is the single most useful axis for them to navigate by.
- You have enough testimonials per group (at least 5) to make each section feel substantial.
Grouping is weaker than filtering when:
- The visitor cares about multiple dimensions simultaneously (role + company size).
- You have many small groups (10 industries, 5 in each) — grouping turns this into a long, repetitive page.
- The same testimonial is relevant under multiple labels.
Most testimonial pages should use filtering as the primary navigation and use grouping only for the case-study section.
Pagination and load behavior
How you load testimonials matters more than designers usually credit.
- All at once works if you have fewer than 30 testimonials. Visitor scrolls, sees the variety, leaves with a strong impression of volume.
- Lazy load on scroll works for 30 to 200 testimonials. The visitor feels there is more available without paying the rendering cost of all of them at first paint.
- Pagination with page numbers is the right pattern only if you have 200+ testimonials and a meaningful sort order. Otherwise it feels like a search result page, which is the wrong frame for a conversion page.
Avoid infinite scroll without a visible "you've seen 30 of 142" counter. Visitors lose orientation and disengage.
Mobile considerations
On mobile, the filter row collapses to a single "Filters" button that opens a modal. The trust bar logos compress to two rows. The testimonial cards stack vertically with one card per row.
The one thing that matters most on mobile is that the quote text is large enough to read without zooming. 16-pixel minimum, 18 is better. Photos can shrink. Names can wrap. The quote itself cannot be small.
For more on the mobile-specific tradeoffs, our testimonial display mobile optimization piece covers the breakpoints in detail.
What to put above the fold
The hero summary line and the start of the filter row should both be visible above the fold on a 1366×768 desktop viewport. The first three testimonial cards should be visible immediately on scroll.
If your hero is tall enough that the filter row is below the fold, your hero is too tall.
Closing rule
The information architecture of a testimonial page is in service of one job: helping a visitor find someone like themselves who succeeded with your product. Every section, every filter, every card should pass the test "does this help with that?"
If the answer is "it looks nice" rather than "it helps," cut it.