# Case study design: show the problem, the work and the result

[Canonical HTML page](https://gradiently.design/guide/case-study-design)

Most case studies are a gallery with a paragraph on top. The ones that win work tell a story a stranger can follow in a minute. That takes a clear structure, visuals that carry it and a format for every place you publish.

## The short version

- A good case study tells one story in three parts: the problem, the work and the result.
- The result should appear in the first screen or on the first slide, because many readers never scroll to the end.
- Every section of a case study should have its own visual, from a before image to process sketches to the finished work in use.
- Only claim results you can show, and get the client's permission before naming them or sharing figures.
- One case study can be published as a web page, a PDF, a slide in a pitch deck and a social carousel if it shares one consistent look.

Strong **case study design** follows three acts: the problem, the work and the result. Open with a headline that states the outcome, show what was wrong before, walk through the decisions that changed it, then prove it worked with the finished piece in real use. Give each act its own visual and keep the words short. A prospective client should understand what you did and why it mattered in the time it takes to scroll one screen.

## The structure of a good case study

Designers, agencies, consultants and software companies all write case studies, and the shape that works is the same for each. It reads like a short story with a clear turning point, and it puts the ending at the start as well as at the end.

1. **Headline: the outcome** "A menu that halved ordering questions" beats "Restaurant rebrand". Name the client and the work in a line beneath.
2. **The problem** What was wrong, for whom, and why it mattered to the business. Two or three sentences and a before image.
3. **The approach** The two or three decisions that made the difference, and why. Not every step you took.
4. **The work** The finished pieces, shown large and in context: on a phone, on a shelf, on a street.
5. **The result** What changed, in the client's words or numbers you have permission to share.
6. **The next step** One line inviting a reader with a similar problem to get in touch.

> **Ask before you share** Check your contract and ask the client before naming them, showing unreleased work or publishing any figures. If you cannot share numbers, describe the change in words they approve.

Choose which projects to write up with the same care. Three case studies that match the clients you want next are worth more than ten that cover everything you have done. If you want more restaurant work, lead with the restaurant; if you want software clients, lead with the dashboard, even if it was a smaller job.

## Visuals for each part of the story

A wall of finished mockups tells the reader you can make nice things. It does not tell them you can solve their problem. Match each section to a visual that proves that section's point.

| Section | Visual that proves it | Avoid |
| --- | --- | --- |
| Problem | The old version, a confusing screen, a cluttered shelf | Mocking the client's old work |
| Approach | Sketches, a moodboard, two options side by side, the brief | Dozens of process photos |
| Work | The finished piece in real use, then key details | Only floating mockups on grey |
| Result | A short client quote, an approved number set large, the work in the wild | Vague claims with no source |

One proving visual per section is enough. More than three images in a row and the story stalls.

A widescreen case study slide titled The problem, stating that diners could not find the vegan dishes on a menu

A problem slide: the issue stated plainly, from the customer's side, in one line.

A matching widescreen slide titled The result, with the headline Ordering questions halved over the same gradient

The result slide in the same style. The outcome is the headline, with its source stated beneath.

The example above is invented to show the shape, but look at the source line under the result. A number with an attribution reads as evidence; a number on its own reads as marketing. [Visual hierarchy](https://gradiently.design/guide/visual-hierarchy) helps decide what to set large.

## Case study layout on a web page

On a portfolio or company site, a case study is a long page. Most visitors read the first screen, skim the headings and look at the pictures. Design for exactly that.

### Avoid

- A full screen hero image with no words
- The result hidden at the very bottom
- Long paragraphs between images
- Every image the same size
- No way to contact you at the end

### Do

- Headline, client and outcome in the first screen
- A short summary box: client, role, timeline, result
- Headings that tell the story when skimmed alone
- Large hero images, smaller detail images
- A clear next step and a link to the next case study

A consistent background for section dividers, quotes and result panels keeps a long page feeling like one piece and gives the eye somewhere to rest between images. [Designer portfolio tips](https://gradiently.design/guide/designer-portfolio-tips) and [developer portfolio](https://gradiently.design/guide/developer-portfolio-design) cover the wider site around it.

## One case study in several formats

A case study is too much work to publish once. The same story can live as a page on your site, a PDF to attach to proposals, two slides in a pitch deck and a carousel on LinkedIn or Instagram. Each needs its own size.

- Slide 1920×1080: 1920 × 1080
- A4 PDF 2480×3508: 2480 × 3508
- Carousel 1080×1350: 1080 × 1350
- Behance cover 1616×1264: 1616 × 1264

Four homes for one case study, drawn to scale. The story stays the same; the crop and the word count change.

- **Carousel:** one slide per act, plus a cover and a contact slide. [LinkedIn carousels](https://gradiently.design/guide/linkedin-thought-leader-content) shows the format.
- **Pitch deck:** a problem slide and a result slide, as in the pair above.
- **PDF:** two to four A4 or Letter pages; see [one pager design](https://gradiently.design/guide/one-pager-design) for single sheet summaries.
- **Portfolio sites:** a cover sized for the platform, such as the [Behance cover size](https://gradiently.design/guide/behance-cover-size).

Gradiently helps here because a Mark renders fresh at every size: design the case study once, and Pro resizes it to every format in one step, with the same background and type across the slide, the PDF and the carousel pages.

## FAQ

### What should a case study include?

An outcome headline, the problem, your approach, the finished work in context, the result and a next step for the reader.

### How long should a design case study be?

Long enough to show the turning point and no longer. Most good ones can be skimmed in a minute and read fully in five.

### Can I write a case study without results data?

Yes. Use a client quote or a description of what changed that the client approves. Never invent numbers.

### Where should the result go in a case study?

In the headline or first screen, and again in more detail at the end. Many readers never reach the bottom.

### What format should a case study be?

A web page is the main home, with a PDF for proposals, slides for pitches and a carousel for social, all in the same style.