An Agency Portfolio Website: How to Write Case Studies That Sell (Structure, Proof, SEO)

Clients choose an agency based on proof: what exactly you did, under what conditions and what result the business got. That's exactly what they look for on Google, Behance and in recommendations. We break down how to build a portfolio that doesn't just display work but brings leads: the case study skeleton, proof with numbers, handling NDAs, SEO for individual cases and how to measure which cases actually sell.

01 In short: what you need to know

• A portfolio is not a gallery. A client wants to see the process and the result, not just pretty screenshots.
• The case study skeleton: client context → goals → constraints → solution (design / development / SEO) → before/after metrics → testimonial → "similar project" CTA.
• Without numbers, a case study is just a gallery. Add screenshots, process fragments and analytics data. If numbers aren't possible (NDA), replace them with verifiable qualitative proof.
• Every case study gets its own URL with a clear title, internal links to services and its own target queries. Case studies are landing pages for commercial queries.
• Show similarity, not just scale. A client looks for "a project like mine", so you need filters by industry and type of task.
• Don't invent. Fake numbers, testimonials and logos destroy trust faster than their absence does.

02 Why a portfolio is an agency's main sales tool

For a service business that sells a result invisible until purchase (a site, a system, SEO), the portfolio acts as "the product on the shelf". It removes the client's main objections:

A client usually views 2–4 case studies before writing. If none resembles their situation or contains a result, they move on.

03 What clients look for in a portfolio

People choosing an agency care not about "pretty or not" but about the predictability of the result.

• Similarity: have you done something in my industry, with my task, at my scale?
• Result: what changed for the business (leads, sales, speed, rankings)?
• Process: how do you work, and will it be clear to me what's going on?
• Team: who exactly will work on my project?
• Freshness: are you active, or is the portfolio outdated?
• Scale and complexity: can you handle my volumes and integrations?

They search on Google (queries like "website development for a medical clinic", "online store case study"), on Behance and Dribbble (visual search), in directories and through recommendations. So a portfolio has to work both as a page for people and as a set of pages for search.

04 Structure of the "Projects" section

/projects                      — hub: all case studies with filters
/projects/<case-slug>          — an individual case study
/projects?industry=medicine    — an industry filter (as a separate page if needed)

The "Projects" hub:

• Filters by industry (manufacturing, e-commerce, medicine, SaaS), type of task (site, store, platform, CRM, SEO), platform (WordPress, MODX, Laravel).
• Case card: an image, the client name (or "industry"), the task in one line, the main result figure.
• Priority: the strongest cases and those most similar to target clients first.
• A short intro on how you work on projects, and a CTA.
• Indexing: the hub has a unique title, an intro text and links to the cases.

How many cases to show: 6–12 quality ones are better than 40 "gallery" ones. Hide old and weak cases.

05 The case study skeleton: seven blocks

The skeleton: client context → goals → constraints → solution (design / development / SEO) → before/after metrics → testimonial → "similar project" CTA.

The figures in the examples are illustrative. In your own case studies use only real data.

How to write each block

1. Context. 2–4 sentences. Who the client is, what situation they came in with, what wasn't working. No praising epithets.

2. Goals. 2–4 goals in the form of measurable results. This is the base against which the reader judges the solution.

3. Constraints. The most often skipped block, yet it's what shows your expertise: you solved it not "in ideal conditions" but in real ones.

4. Solution. Not a list of work but the logic: what was decided, why, what was rejected. Split into design, development, SEO, integrations. Show process fragments (see below).

5. Metrics. A "before / after" table with the period and data source.

6. Testimonial. Specific, with a name, position and, where possible, a link to the source.

7. CTA. Not a generic "contact us" but "similar project": repeat the task in the client's wording.

An example metrics table

06 Proof: screenshots, process, numbers

Without numbers, a case study is just a gallery.

Proof comes in three types, and the strongest case studies combine them.

1. Visual proof

• Screenshots of key screens (desktop + mobile), in context, with captions.
• Before / after: the old and new versions side by side.
• Details: interface fragments, micro-interactions, the design system, animation (short videos or GIFs).
• Real use: screens on real devices, photos of the client's team with the product (with permission).

2. Process proof

It shows how you work. That's your difference.

• Research fragments: site structure, query map, interviews, competitor analysis.
• Prototypes, moodboards, options and the rationale for the choice.
• The design system, components, tokens.
• Technical decisions: architecture, integrations, speed optimization (a diagram, a profiling screenshot).
• Stages and timelines: what happened and how long it took.

3. Result proof

• Analytics numbers: leads, conversion, traffic, rankings, speed, cost per lead.
• Business result: sales, payback, time saved (with the client's consent).
• Technical metrics: Core Web Vitals, accessibility score, number of issues fixed.
• Qualitative proof: a testimonial, changes in the client's processes, new capabilities.

The truthfulness rule. All numbers must be real, with a stated period and source. "Grew several times over" without a comparison base is not proof.

07 How to gather numbers for a case study

Numbers must be recorded before the project starts, otherwise "before" will have nothing to compare to.

Before work begins:

1. Record baseline metrics: leads, conversion, traffic by source, rankings, Core Web Vitals, bounces.
2. Agree with the client on access to analytics (GA4, Search Console, CRM) and permission to publish results.
3. Define goals and success metrics in the contract or brief.

After launch:

1. Wait for a sufficient period (usually 2–3 months, longer for SEO), compare periods of equal length and seasonality.
2. Account for other factors: advertising, seasonality, changes in the client's business, so you don't take credit you haven't earned.
3. Write down the methodology: what was measured, how, over what period.
4. Ask the client to confirm the numbers or provide their own.

08 NDA cases and cases without numbers

Not every client allows publishing numbers or even the name. That's no reason to give up on a case study.

Options:

How to agree on publication with a client:

1. Build the right to publish into the contract (with the option of anonymizing).
2. Offer the client a chance to review the text before publication.
3. Explain the benefit: a mention, a link, social proof for their brand.
4. Agree on what exactly may be shown: the name, screenshots, numbers.

09 Testimonials: how to get and show them

How to get them:

• Ask for a testimonial right after the result is achieved, when the impression is freshest.
• Ask specific questions: what problem they came with, why they chose you, what changed, what they liked about the process.
• Offer an interview or a video testimonial, because it's more convincing than anonymous text.

How to show them:

• Name, position, company, photo, and where possible a link to a profile or review on an external platform (Google, Clutch, LinkedIn).
• A quote with specifics ("cut the response time to a request from 4 hours to 15 minutes"), not generic words ("all great").
• The testimonial in the context of the case study, next to the result.

What not to do:

• Invent or edit testimonials in a way that changes their meaning.
• Show "testimonials" without authors.
• Use client logos without permission.

10 Case study SEO: landing pages for commercial queries

Case studies are landing pages for commercial queries. Separate URLs, clear titles, internal links to services.

Why it works

A person searching for "website development for a door online store" or "medical clinic website case study" is ready to choose a contractor. A case study that matches this query hits their intent exactly.

What to do

1. A separate URL for every case study: /projects/door-online-store-berezha, not a modal window or an anchor on one page.
2. A unique, clear title by the formula:

[Project type] for [industry/client]: [result] | CROPE

Examples (insert real numbers): "Door online store: +X% organic leads in 3 months | CROPE", "A manufacturer's website: LCP X.X s and lead growth | CROPE".

1. H1 and intro aligned with the query, with the key industry and type of task.
2. Meta description of 140–160 characters: task + result + a call to action.
3. Internal links from the case study to services ("Online store development", "SEO promotion", "MODX", "Laravel") and from service pages to relevant case studies.
4. Topic clusters: case studies by industry and service are linked to each other ("Similar projects").
5. Breadcrumbs: Home → Projects → Case study.
6. Unique content: don't copy descriptions from Behance or other sources.
7. Images: meaningful alt, file names, light formats, an OG image for social networks.
8. The "Projects" hub links to all cases, and the cases link back to the hub.

Key queries for case studies

An example case study template in Markdown (for a CMS)

# [Project type] for [client/industry]: [main result]

**Client:** … · **Industry:** … · **Services:** design, development, SEO · **Platform:** …
**Timeline:** … · **Team:** …

## Context
…

## Goals
- …

## Constraints
- …

## Solution
### Design
### Development
### SEO and analytics

## Results (before / after)
| Metric | Before | After | Period |
|---|---|---|---|

## Client testimonial
> "…" — Name, position, company

## A similar project?
[Describe your task] → form / contacts

## Similar case studies
- …

11 Schema.org markup for case studies

Markup helps search engines understand the page structure. Use JSON-LD and mark up only what's visible on the page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Door online store: growth in organic leads",
  "description": "A case study on developing and SEO-optimizing an online store",
  "image": "https://example.com/assets/projects/case-cover.jpg",
  "datePublished": "2026-07-14",
  "dateModified": "2026-10-15",
  "author": { "@type": "Organization", "name": "CROPE" },
  "publisher": { "@type": "Organization", "name": "CROPE" },
  "mainEntityOfPage": "https://example.com/projects/door-online-store"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
    { "@type": "ListItem", "position": 2, "name": "Projects", "item": "https://example.com/projects" },
    { "@type": "ListItem", "position": 3, "name": "Door online store" }
  ]
}
</script>

Nuances:

• For testimonials on your own site, don't mark up a star rating as reviews of your own organization. Search engine rules restrict such rich results, and incorrect markup is risky.
• Don't invent ratings or review counts.
• Check the markup in the Rich Results Test.

12 Visual presentation and speed

Visual presentation:

• Case hero: the title, one key figure, a main image, a short task.
• Contrast of rhythm: alternate text, screenshots, numbers and quotes.
• Device mockups help show responsiveness, but don't overdo the effects.
• A video overview (30–60 s) increases engagement, but it must not autoplay with sound.
• A unified case style: a template and grid. Then the hub looks cohesive and cases are easy to create.
• Real screenshots, not "template mockups" where it's visible the work isn't from a real project.

Speed:

A portfolio is image-heavy, and it's the one that's most often slow. That hurts both conversion and SEO.

• AVIF/WebP formats, responsive srcset, width/height.
• The hero image without loading="lazy", with fetchpriority="high"; the rest lazy.
• Video on user action, with a poster.
• Core Web Vitals benchmarks: LCP up to 2.5 s, INP up to 200 ms, CLS up to 0.1.
• Mobile version: convenient sliders with controls, large tap targets, fast loading.

An agency that sells speed and quality can't have a slow portfolio. It's the first thing an attentive client will check.

13 Behance, Dribbble, Clutch: where to distribute

Clients also search outside your site. Distribute case studies, but keep your own site as the primary source.

Rules:

• Don't copy one to one: adapt for the platform and keep the full version on your site.
• A link to your own site in every placement.
• Agree materials with the client, especially when publishing numbers.

14 The funnel: from case study to lead

A case study shouldn't just "show", it should lead to action.

Funnel elements:

1. Entry: search, social networks, ads, a recommendation.
2. The case study: context, solution, result.
3. A CTA inside the case: "Need a similar project? Describe your task" at the start, in the middle and at the end.
4. Similar case studies: a path to the next relevant projects.
5. A related service: a link to the service page with prices and process.
6. A form or messenger: minimum fields, a quick reply.
7. Follow-up: confirmation, response time, next steps.

CTA principles:

• Word it in the client's terms: not "Contact us" but "Discuss a project like this".
• Tie it to the case: the email subject or a "similar to case X" field is passed into the form.
• Pass the source to the CRM (UTM, case page) to see which cases bring leads.

// A click event on a case study CTA
document.querySelectorAll('[data-case-cta]').forEach((el) => {
  el.addEventListener('click', () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'case_cta_click',
      case_slug: el.dataset.caseSlug,
      cta_position: el.dataset.ctaPosition // top | middle | bottom
    });
  });
});

15 Portfolio metrics

How to improve:

1. See which cases bring leads and make more like them, expand them.
2. Rework or hide weak cases (little traffic and few leads).
3. Experiment with the title, the main figure, the CTA position.
4. Add to client surveys: "What convinced you?"

16 Common mistakes

• A case without a result: just screenshots and "we made a website".
• The language of process instead of the client's language: "markup, backend" instead of "shortened the path to a lead".
• One template phrase for all cases.
• No numbers and no period. "Grew significantly", "+300%" without a comparison base.
• Invented cases, numbers, testimonials and logos.
• Cases without their own URLs (a gallery with modal windows), so SEO doesn't work.
• No internal links to services and similar cases.
• Old and weak projects next to strong ones.
• A slow hub with heavy images.
• No CTA, or only a generic "Contact us".
• Everything about you, little about the client and their task.
• No client permission to publish.
• Not updated: the latest case is two years old.

17 Checklist before publishing a case study

Content

• All seven blocks are present: context, goals, constraints, solution, metrics, testimonial, CTA
• Goals are worded as business results
• It's described why decisions were made, not only what was done
• Before/after metrics with period and source (or an honest substitute if the numbers are under NDA)
• A testimonial with name and position, agreed with the client
• All figures, logos and testimonials are genuine

Proof

• Desktop and mobile screenshots, in context
• Process fragments (research, prototypes, design system, architecture)
• The client's permission to publish is in place

SEO

• A separate URL with a clear slug
• Unique title, H1, meta description
• Internal links to services and similar cases
• Breadcrumbs, JSON-LD (Article, BreadcrumbList)
• alt for images, an OG image

Speed and UX

• AVIF/WebP images, hero without lazy, width/height
• LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 on mobile
• Readable on a phone, large tap targets
• Accessibility: contrast, alt, keyboard

Conversion

• A "similar project" CTA at the start, in the middle and at the end
• The source (UTM, case page) is passed to the CRM
• Analytics events are set up

Distribution

• An adapted version for Behance / Dribbble / LinkedIn with a link to the site
• A review request on Clutch or Google

18 FAQ

What should be in an agency case study?

Client context, goals, constraints, the solution (design, development, SEO), before and after metrics, a client testimonial and a "similar project" call to action. Add screenshots, process fragments and analytics data.

How many case studies does a site need?

6–12 strong ones that show your specialization are better than dozens of weak ones. Show cases of different task types and industries you want to work in, and hide outdated ones.

How do I write a case study if the client doesn't allow publishing numbers?

Use relative changes or ranges, technical metrics (Core Web Vitals, accessibility), a description of the process and challenges, a qualitative testimonial. You can anonymize the client: "a building materials manufacturer (B2B)".

Do I need separate pages for each case study?

Yes. A separate URL lets you index the case for specific commercial queries, link to it and build internal linking with services and similar projects.

How do I measure a project's result for a case study?

Record baseline metrics before the start (leads, traffic, conversion, rankings, speed), agree on analytics access with the client and compare periods of equal length after launch. Account for other factors such as advertising and seasonality.

Can I use case studies without naming the client?

Yes, if there's no permission. Describe the industry and the task, with no logo or domain. But cases with names and links inspire more trust, so agree on permission at the start of the project.

How do I SEO-optimize a case study?

A separate URL, a unique title by the formula "project type for industry: result", H1 and intro with the key topic, internal links to services and similar cases, breadcrumbs, JSON-LD, optimized images with alt.

Do I need to post case studies on Behance?

It's useful as an additional channel for visual search, but keep your own site as the primary source: it has the full case, SEO and conversion. Add a link to the case page from Behance.

What if I have no big clients?

Show quality projects of the scale you really work at, and your own projects or products. Trust is built by specifics, process and result, not by loud logos.

How often should I update the portfolio?

Add new cases regularly (for example once every 1–2 months), remove weak and outdated ones, and check the relevance of links and figures.

19 Summary

An agency portfolio sells when it shows not "what we did" but "what changed for the client". That takes structure, truthful proof and technical quality: a case study with context and goals, a solution with logic, before/after numbers, a testimonial and a clear CTA, that opens fast and can be found in search.

The order of action:

1. Record metrics before the project starts and agree on permission to publish.
2. Write cases by the skeleton: context → goals → constraints → solution → metrics → testimonial → CTA.
3. Back them up with numbers, screenshots and process fragments. Without numbers a case is just a gallery.
4. Give every case its own URL, title, internal links to services and markup.
5. Add filters by industry and task and show similar projects.
6. Measure which cases bring leads and develop them.
7. Don't invent: trust matters more than any figure.

Want a portfolio that brings leads, not just looks good?

We'll build a projects section with a case template, an SEO structure and analytics, and help you gather the numbers and format cases so they sell.

Discuss your project at crope.pro