| name | testimonial-layouts |
| description | Use when designing testimonial sections. Covers the formats that work (single hero, 3-up cards, full-bleed quote), what makes a testimonial believable, and how to avoid the dead patterns (auto-rotating carousel, headless quotes).
|
Testimonial Layouts
Testimonials are high-leverage when believable, useless or worse when generic.
What makes a testimonial believable
A great testimonial has:
- Specific outcome ("cut our CSA score from 67 to 38 in 9 months")
- Named human + role + company logo
- Real photo (not stock)
- Optional: video version (1-2 min, native player)
A useless testimonial:
- "Great product! Highly recommend!" — Anonymous
- Vague claim ("life-changing")
- Stock-photo person, no name
Layout patterns
Pattern 1: Single hero quote (best)
One quote, named + photo + logo. Full width, large type, treated like a hero.
Pattern 2: 3-up testimonial cards
Three quotes side-by-side. Each card same height. Avatar + name + quote + logo.
Pattern 3: Logo bar + click-to-quote
Logo bar at top. Click any logo → modal with the full case study.
Pattern 4: Video grid
4-6 short video testimonials in a grid. Hover plays muted preview.
Anti-pattern: Auto-rotating carousel
Users hate it. Loses focus, hard to read at a pace, accessibility nightmare. Replace with static cards.
Quote selection
Cut for impact. A great quote:
- One sentence (not three)
- Specific number or comparison
- Sounds like the person actually said it (not marketing-speak)
Photos
Real photos > stock photos always. If you must use a placeholder:
- Use initials in a colored circle (looks intentional)
- NOT generic stock headshots (looks fake)
Where to place testimonials
- Right after the hero — early trust
- After major feature sections — close the loop
- On the pricing page next to the featured tier — reduce purchase anxiety
- Final-CTA section — last-mile assurance
Common mistakes
- Auto-rotating carousels (most common, most hostile to a11y)
- "Joe S., CEO" without company logo or photo
- Quotes longer than 30 words (skipped)
- Stock-photo people with name "John Customer"
- No outcome — just enthusiasm
Where this fits in X3 Compass
X3 Compass is pre-customer; once we have testimonials, the plan is single-hero quote in the hero strip + 3-up cards after the product tour.
