Table of Contents
- What to look at on any case study page
- 1. HubSpot: the number comes with its "before"
- 2. Stripe: the vendor hero, rescued by "Products used"
- 3. Slack: filters, with an empty state somebody actually wrote
- 4. Zapier: the customer is a person, not a logo
- 5. Figma: 125 stories, tagged until they're findable
- 6. Webflow: a self-serve button on a case study page
- 7. Twilio: know which kind of number you're showing
- 8. Atlassian: lead with a quote that holds a number
- What the eight have in common
- If you have three case studies, not 125
- Doing this with Testimonial
- Wrapping up
Image URL
Do not index
Do not index
AI summary
The article analyzes eight live case‑study pages from HubSpot, Stripe, Slack, Zapier, Figma, Webflow, Twilio and Atlassian, identifying five key elements—hero messaging, customer identification, a clear result number with context, an appropriate CTA, and scalable filtering—and shows how each site applies or misses them; it then offers concise guidelines for building effective case‑study hubs with limited stories, recommending simple cards, visitor‑focused hero copy, matching CTAs, and careful use of filters and permissions.
Title
Case Study Website Teardown: 8 Landing Pages, Annotated
Date
Oct 5, 2026
Description
Eight live case study pages from HubSpot, Stripe, Slack, Zapier, Figma, Webflow, Twilio and Atlassian, annotated: the hero, the number, the CTA and the filters.
Status
In progress
Current Column
In the queue
Person
Writer
Most case study pages are a grid of logos with "Read story" under each one.
A buyer lands there from a sales email, scans for a company like theirs, finds nothing that says "this is you," and leaves. The stories were fine. The page never told them which one to open.
So this teardown ignores the stories and looks at the page that holds them: what sits in the hero, how the customer is introduced, where the number goes, where the call to action goes, and what happens once there are more than ten stories. Eight live pages, all checked on 5 October 2026.
If you have not written the case studies yet, start with our guide to customer case studies. For where case studies sit next to quotes, videos and reviews, see how testimonials work end to end.
What to look at on any case study page
Five things, in the order a visitor meets them:
- The hero. Is it about the vendor, the customers, or the visitor?
- Who the customer is. A logo, a company name in a headline, or a named person with a job title?
- The number. Is there one on the card, and does it come with a baseline or a time window?
- The call to action. Sales, self-serve signup, or just "Read story"?
- Scale. How does the page cope with 12 stories? With 125?
Every example below gets judged on those five. None of them gets all five right, and that's useful too.
1. HubSpot: the number comes with its "before"
HubSpot's case studies page opens with "Real success stories, Remarkable growth." and then, straight under the headline, a line that reads "Find a success story relevant to your business," followed by an industry picker with 29 options.
That's the first good decision. The page assumes you came to find yourself, and hands you the tool before anything else.
The four featured stories are better still. Each one leads with three large numbers, and the numbers carry their baseline. RevenueWell's reads "20% MQL meeting booking rate (up from 8%)", then "65% opportunity creation rate (up from 9%)", then "62% closed-won rate (up from 4%)". A short paragraph underneath turns the same numbers into one sentence about what RevenueWell did.
A bare "20%" means nothing to a stranger. "Up from 8%" is a story in four words.
What it costs: three big metrics per story gets dense fast. Some stories mix outcome numbers with descriptive ones, like Octagos's "18 months to build marketing function." That's context, not a result, and it sits at the same size as the results.
Copy: the baseline in brackets. Skip: the third number when you only have two good ones.
2. Stripe: the vendor hero, rescued by "Products used"
Stripe's customers page breaks the rule I'd give most people. Its H1, "The payments platform behind millions of businesses," is about Stripe, not about any customer. The two buttons under it are "See all stories" and "Contact sales."
It gets away with it because of what comes next.
A strip headed "We help customers achieve measurable results" puts one customer and one number on each line: "$70M total increase in Postmates' annual revenue," "10% uplift in Twilio's payment acceptance rate," and "12 new countries" over "Noom expansion in one month with Stripe." The customer name sits inside the number, so you can't read one without the other.
Then every story card carries a "Products used" label — "Connect, Billing, 3 more" on one, "Payments, Stripe Sigma" on another. A buyer who only cares about Billing can scan the cards by product and skip everything else.
That's the cleverest thing on any page here. Most of the pages here filter by industry. Stripe also lets you sort by what you'd actually buy.
What it costs: the hero tells a first-time visitor nothing about the stories. If your brand isn't already familiar, a vendor-first hero just delays the proof.
Copy: a "Products used" or "Plan" line on every card. Skip: the vendor-first headline, unless people already know your name.
3. Slack: filters, with an empty state somebody actually wrote
Slack's customer stories page leads with "Inspiring stories, remarkable productivity," two buttons ("Watch demo" and "See all stories"), and three featured stories with the company in every headline: Rivian, Anthropic, Box.
Below that, "Browse even more stories" opens a filter on four axes: industry, department, business size and region. Department is the interesting one. A head of sales and an IT lead at the same company want different stories, and Slack lets them say which one they are.
The best detail is small. Filter too narrowly and the page says: "We're having a bit of trouble finding a story so precise. Let's give it another go, this time with fewer filters." Somebody wrote the empty state. A blank grid would let the visitor assume there are no stories at all.
The page closes on aggregate numbers, "338% return on investment" and "$2.1 million in productivity savings," with footnotes naming the sources: a Forrester Total Economic Impact study and a survey of weekly Slack users. If you put a summary number on your hub, footnote it like that or leave it off.
What it costs: four filter axes is a lot of UI for a visitor who wanted one story.
Copy: a "department" or "role" filter, and a written empty state. Skip: an unsourced aggregate number.
4. Zapier: the customer is a person, not a logo
Zapier's customer stories has the plainest hero here: "See Automation in Action," one line about the 3.4 million businesses using it, and a single "Contact Sales" button.
The cards are where it's different. They name the employee who built the thing, not just the company.
"Rubén del Fresno built workflows that move partners from signed to online" (Just Eat Spain). "Corey Smith is a Senior Technical Support Engineer at ClickUp." "Nick Krekis was part of a four-person tiger team bringing AI agents into Miro." The headlines follow suit: "How one engineer saved ClickUp's support team 917+ hours a month."
That's a smart call for a product bought by the people who use it. The visitor isn't "a company like ClickUp." They're "a support engineer like Corey." The filter matches that thinking: RevOps, Marketing, IT, HR, Sales, Customer Support. It's sorted by job, not industry.
What it costs: every card leans on one hero, and you need that person's permission to be named, on top of the company's. That's two approvals per story.
Copy: the person's name and role on the card, for anything bought bottom-up. Skip: it when the buyer is the CFO and the user is somebody else.
5. Figma: 125 stories, tagged until they're findable
Figma's customers page says "Showing 125 results" above the grid, so it's facing a problem most of us won't have for years.
The answer is tags. Every card carries industry, region, company size, the outcomes it shows ("Time to market," "Design systems," "Dev efficiency") and the products used ("Figma Design," "Figma Make"). The Adyen card, for instance, reads "Financial Services, Netherlands, Enterprise," then its outcomes, then "Figma Make."
The tags do two jobs. They're the filter, and they're also a way to scan a card in a second without reading the summary.
What it costs: at the extreme it's label soup. The Shakers card carries fifteen labels, from "Spain" to "Figma Make." Past six or seven, a reader stops reading tags and starts skipping them.
Copy: outcome tags ("faster onboarding," "fewer tickets"), not just industry. Skip: tagging everything just because you can. Pick the three a buyer would filter on.
6. Webflow: a self-serve button on a case study page
Webflow's customer stories leads with "You're in great company" and a "Get started — it's free" button. It's the only page in this set where the hero's main action is signing up, not reading or calling sales.
If your product is self-serve, that's the honest CTA. A visitor who has just read that Purpose Brands saw "+20% YoY lead growth, first two weeks post-launch" may well want to try it, not book a demo.
Look at that number again. It's one figure, with its time window attached. Cotality's card does the same: "90 days to publish, ~2 days, down from >two weeks." Webflow gives each card one number and a qualifier, not three numbers.
There are audience switches as well: "Enterprise" and "Agency," and "Stories for" Engineering or Marketing.
What it costs: the qualifiers make some numbers harder to scan. "~2 days, down from >two weeks" takes a second read.
Copy: one number per card, with the time window. Skip: the free-signup CTA if your deals start with a sales call. Match the button to how people actually buy.
7. Twilio: know which kind of number you're showing
Twilio's customer stories opens with "Get inspired with Twilio customer stories" and five featured stories. Each has three numbers, and the five sets mix two different kinds of number.
Toyota Connected's are outcomes: "1 day proof of concept," "13% after call work reduction," "18% drop in monthly avg handle time." Those describe what changed.
Resy's are scale: "35M+ registered users," "16K+ restaurants on Resy," "21M+ messages sent monthly." Those describe how big the customer is. They tell you Resy trusts Twilio with a lot of traffic, and that's a fair proof point. But it's a different claim from "this got better."
Both kinds belong on a case study page. Just don't style them the same and hope nobody notices. A visitor comparing cards will read "35M+" as a result unless the page tells them otherwise.
The filter below covers industry and use case ("Contact center," "Alerts and notifications," and so on), under a "335,000+ brands building with Twilio" line.
What it costs: three numbers each across five featured stories is fifteen big numbers before the grid even starts.
Copy: a "use case" filter. Skip: mixing scale and outcome numbers in one row without a label.
8. Atlassian: lead with a quote that holds a number
Atlassian's customer stories opens with "Customer stories driven by the power of teamwork," then goes straight to quotes from named customers with their job titles, each with a "Read customer story" link.
The strongest one does what a case study hero should: it puts the number in the customer's mouth.
"As we've started to build a System of Work with Atlassian, tooling spend is down 54% annually, and we've been able to reinvest 40% of our OpEx expenses back into the business within three years – without dropping work."
— Jason Andrews, Vice President of Strategy & Planning – Engineering Operations, Cisco
A number on a card is a vendor claim. The same number in a named VP's sentence is testimony.
Compare it with the Domino's quote right next to it: "At Domino's, we have a motto: 'Every order counts.'" It's warm, and it has nothing a buyer can check.
What it costs: quote-led heroes only work when the quotes are specific. Most customers give you the Domino's version, not the Cisco one, unless you ask for the number.
Copy: a named, titled quote with a figure in it, as the first thing on the page. Skip: a slogan quote in the hero slot.
What the eight have in common
Line them up and the pattern is clear:
- All eight put numbers on the hub page itself, not only inside the stories. None of them relies on "Read story" alone.
- All eight help a visitor find themselves: by industry (HubSpot, Slack, Figma), by job (Zapier, Slack), by product (Stripe, Figma), or by use case (Twilio).
- The CTA follows how the company sells. Sales-led pages say "Contact sales." Webflow, which you can start using for free, says "Get started — it's free."
- The customer's name is never more than a line away from the result. Stripe puts it inside the number. Atlassian puts the number inside the quote.
And what none of them does: lead with a logo wall and nothing else.
If you have three case studies, not 125
Most readers here aren't Figma, so here's what I'd actually build first.
- Skip filters until you have about ten stories. A filter over three cards is decoration.
- One card per story, with four lines: customer name and role, one number with its baseline or time window, one sentence of context, and "Read the story."
- A hero that talks to the visitor, not about you. HubSpot's "Find a success story relevant to your business" is the right instinct even without the picker.
- One CTA that matches how you sell. Self-serve gets a signup button. Sales-led gets "Talk to us."
- Permission for every name and logo on the page. The page is public. The customer's sign-off on the story doesn't automatically cover their logo on your hub, so ask for both. The legal side of testimonials covers what to get in writing.
If the card is the problem, the story usually is too. Case study formats covers how to structure the story so it has one number a rep can quote.
Doing this with Testimonial
This post is about the page, and you'll build that in whatever runs your site: Webflow, WordPress, anything.
Where Testimonial comes in is earlier, at the step that leaves most of these pages empty: getting the stories. Case Study sends your customer a question set they answer on their own time, typing or by voice, with no call to schedule. Answers arrive in your inbox already attributed to the person you invited. Put "What's your role?" and "What number changed?" in the question set and half the card is written for you. Running a case study interview without a call walks through the questions that produce a number worth putting on a card.
Case Study is on the Ultimate + plan, priced per space. Details are on pricing.
Wrapping up
That's eight case study pages, and the five things to copy from them: a hero that talks to the visitor, the customer named next to the result, one number with its baseline, a CTA that matches how you sell, and filters once you've earned them.
Building your first one and stuck on the card? Reply and tell me what you've got. I'll tell you which number I'd lead with.
Written by
