Case Study Pages That Sell the Next Project

A portfolio that only looks expensive is a gallery. A case study page that sells the next project is a sales asset: it shows the problem you walked into, the decisions you made, the proof you can cite, and the action a buyer should take. Pretty screenshots without stakes convince other designers. Buyers need causality. This spoke sits under Websites That Feel Like Films.

Case study page structure that works

I use a repeatable spine. Customize the voice and visuals; keep the spine honest.

1. Title card — Client or project name, one-line outcome or role, one dominant visual
2. Context — Who they are, what market, why the work mattered now
3. Problem — The constraint, failure, or ambition in concrete terms
4. Approach — What you did and why (not a tool dump)
5. Work — Media that proves craft: folds, flows, motion stills, before/after when fair
6. Outcomes — Metrics you can defend, quotes, qualitative results
7. Credits / stack — Short, optional, true
8. CTA — Invite the next project of the same class

If a section has nothing true to say, omit it. Empty “Results: engagement improved” is worse than no results block.

Title card rules

Brand of the client can be loud; your studio chrome should not smother it. One primary visual plane. One sentence that states the job (“Rebuilt the tour funnel for a touring artist” beats “A digital experience”). Link to live site only when the live site still represents the work.

Problem without drama fiction

Write the problem as an operator would recognize it: “Managers could not update dates without a developer,” “Homepage looked like a Linktree on a domain,” “Paid traffic landed on a fold with three competing CTAs.” Avoid invented crisis language. Buyers smell theater.

Approach as decisions

List decisions, not software logos. “We cut the fold to one CTA and moved proof to scene two” is approach. “We used React, GSAP, and Cloudflare” is ingredients. Ingredients can live in a short stack line; they are not the story.

Portfolio website that converts

Conversion for a studio portfolio is not “add to cart.” It is “this team has done my kind of hard thing; I should talk to them.”

Index vs case study

The work index should filter fast by lane (websites, automation, music, trades) without becoming a tag cloud. Each card needs: name, one-line outcome or category, and media that reads at small size. Clicking through should feel like entering a scene, not downloading a PDF vibe.

Depth over volume

Twelve thin case studies with stock phrasing lose to five deep ones with real constraints and media. If you cannot say something specific, keep the project on the index with a short caption and do not force a hollow case study URL.

Proof ethics

Only cite numbers you are allowed to cite. Prefer ranges, directional outcomes, or qualitative proof when NDAs block metrics. Named quotes beat anonymous “Marketing VP, Fortune 500.” Fake precision destroys trust when a prospect asks for detail on a call.

Writing voice for case studies

Terse. Active. Specific. No banned fluff words. No “journey.” Show the tradeoff you chose. Buyers hire judgment.

Bad: “We partnered to elevate the brand through a transformative digital journey.” Good: “We replaced a six-CTA homepage with a listen-first fold and a booking path managers can update.”

Keep paragraphs short. Use pull quotes sparingly. Let media carry what prose would over-explain.

Media direction

Case studies die when every figure is a tiny UI shot on a fake plastic device mockup. Prefer:

• Full-bleed crops of the real fold
• Short muted loops of motion that matter (with reduced-motion stills)
• Pairings: before wire or old fold vs new fold when comparison is fair
• Process artifacts only when they clarify a decision (not decoration)

Compress for LCP. A case study that takes eight seconds to show the work is an irony. Lazy-load below-fold galleries; prioritize the title card image.

CTA design: sell the next project, not a newsletter

Primary CTA should match the offer: start a websites sprint, book a call, request a similar build. Secondary can link to related work in the same lane. Avoid equal-weight buttons for “View more work” and “Contact” — contact should win visually at the end of a strong case study.

Pre-fill intent when you can (/contact?intent=websites-sprint) so the inbox carries context. Mention the case study class in the form helper text: “Tell us about a project like this.”

Templates and CMS

Structure case studies as a CMS collection with required fields: title, excerpt, hero, problem, approach, outcomes (optional long text), gallery, CTA label. Optional fields for metrics and quote. Locked template. This keeps the portfolio coherent when marketing adds projects after handoff — see the CMS spoke for editor patterns.

SEO and AI-visibility notes

Case study URLs should use clear slugs and titles that name the problem class, not only the client codename. Opening paragraphs should answer what was done for whom. Schema can help when appropriate; content honesty helps more. Internal links to the pillar and relevant spokes (motion, fold, Lighthouse) deepen topical clusters without stuffing.

Anti-patterns

• Gallery-only pages with no problem statement
• Tool logo walls as “approach”
• Metrics you cannot defend on a sales call
• Password gates with no context for prospects who need a peek (use share policies intentionally)
• Identical case study prose with nouns swapped
• CTA to nowhere (“Coming soon” at the end of a sales asset)

Length and pacing

A strong case study is often 400–800 words of prose plus media — enough to brief a buyer, not a novel. If you need a long technical teardown, separate it from the sales case study. Buyers skim; give them anchors (Problem, Approach, Outcomes) they can jump with headings.

Using case studies in sales

Send the one case study that matches the prospect’s constraint class, not your favorite aesthetics. On calls, walk the problem and decision, then open media. Do not screenshare twenty projects. One resonant proof beats a tour.

For inbound, let analytics show which case studies assist contact events. Double down on lanes that create conversations. Retire or rewrite pages that attract the wrong work.

Relationship to the rest of the site

Homepage and lane pages should tease proof; case studies should close belief. Do not paste full case studies onto the homepage. Do not leave case studies orphaned without paths back to /websites or the relevant lane. The film model still applies: each page one job. The case study’s job is belief for a specific class of project.

When you want portfolio pages built as sales assets — not only galleries — explore /websites or book a sprint at /contact?intent=websites-sprint.

Editing and QA checklist for case studies

Before publish, verify clearance on every asset and quote. Check that metrics include enough context to be honest. Confirm the CTA goes to the right intent URL. Confirm mobile screenshots are current — shipping old folds that no longer match production erodes trust.

Read the problem section aloud. If it sounds generic, rewrite until a practitioner in that industry nods. Read the closing CTA. If it cannot name who should hire you next, the study is still a gallery.

Check internal consistency with the offer page. If the case study promises a kind of engagement you no longer sell, update it or archive it. Outdated offers on proof pages create sales friction.

For SEO, write a unique meta description that states the problem and outcome. Avoid keyword stuffing. For humans sharing links, ensure Open Graph images show a recognizable frame from the work.

Add the case study to the selected work index with a hook line that matches the page. Mismatched teaser copy feels like bait. Keep teasers specific.

Quarterly, prune studies that no longer represent the studio. Portfolios accumulate nostalgia. Buyers want evidence you solve today’s problems with today’s stack and taste.

Repurpose carefully: a LinkedIn post can pull constraint + result; the page remains canonical. Do not fragment the story into conflicting versions across social and site.

If the project included motion, show it responsibly — short muted loops or filmstrips with captions. Do not autoplay multiple videos with sound. Pair with the motion discipline in Motion Systems That Ship.

For the wider frame that ties craft, conversion, and stack discipline together, read Websites That Feel Like Films. When you are ready to implement, explore /websites or book a sprint at /contact?intent=websites-sprint.

One more pass before it goes live

Print the page or view it on a phone and ask whether a skeptical buyer would understand the stakes in under a minute. If not, tighten the outcome line and problem statement. Then ship. Perfect is the enemy of published proof.

Also verify the live project link (if you include one) still matches the story you tell. A case study that praises a fold the client has since replaced trains distrust. When the live site drifts, update the study or mark the work as archival with a clear date.

Sales handoff after someone reads a case study

When a prospect mentions a specific study on a call, do not restart the entire portfolio tour. Ask which constraint resonated, then map it to their situation in two minutes. Send a follow-up with that study plus the matching offer CTA. Relevance beats volume.

If they found you through a study and still cannot tell how to hire you, the CTA failed. Fix the page before buying more traffic to it.

Explore /websites for the engagement model these studies are meant to sell, or book at /contact?intent=websites-sprint.

FAQ

What is the best case study page structure?

Title card, context, problem, approach, work media, outcomes, short credits, and a CTA aimed at the next similar project. Skip sections you cannot support with truth.

How do I make a portfolio website that converts?

Filter work by lane, deepen a few specific case studies, cite honest proof, and end with a contact path that carries intent. Volume without stakes is a gallery.

How long should a case study be?

Long enough to show constraint, decision, and proof — often a few hundred words plus media. If you need a technical essay, split it from the sales page.

What if NDAs block metrics?

Use qualitative outcomes, permitted ranges, process decisions, and quotes you can clear. Do not invent numbers.

Should every project get a case study?

No. Only projects where you can state a real problem and show work. Thin pages dilute stronger proofs.

Where should the CTA go?

After proof — typically the end — with optional quiet contact in the nav. The closing CTA should invite the next project of the same class, not a generic newsletter.