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.
On this page
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.
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.
Avoid
Avoid
Avoid
Avoid
A problem slide: the issue stated plainly, from the customer's side, in one line.
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 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 and developer portfolio 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
- Carousel: one slide per act, plus a cover and a contact slide. LinkedIn carousels 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 for single sheet summaries.
- Portfolio sites: a cover sized for the platform, such as the 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile