Case studies are a great way to get new clients, but they’re only effective if potential clients actually read them and then decide to work with you. Make this happen by telling a compelling story using my super simple 3-part case study structure.

What is a case study?

First, let’s quickly cover definitions. Different people use the words “case study” and “portfolio” in different ways, and I want to make sure we’re on the same page.

Case study: an analysis of one specific web design project (example case study here)
Portfolio: a collection of case studies (you can see my portfolio here)

Simple enough, right?

How do case studies help you get new clients?

Through case studies, you can show potential clients what they want to know so they can decide whether to work with you.

When someone comes to your portfolio — perhaps after scrolling through your about page and checking out your packages — these are the three questions that they're asking:

1. Will you understand my business and what I want?

Every business is different. And every business owner believes that their problems are unique. Your clients are looking for assurance that you're capable of understanding them, and what they want.

2. What is your design style?

What do your other websites look like? Clients want to know that when they work with you, they’ll get a website that they like. They want a website that makes them look good in front of peers and clients.

3. Are you the kind of person I want to support and work with?

Clients who care about relationships — who think of each person they work with as a whole, multilayered individual — these clients want to know what kind of a person you are. They want to work with and support web designers whose values are aligned with theirs.

Well-structured case studies answer all three of these questions.

When when you create effective case studies and get them in front of the right people, you end up with great clients who:

Know what they want
Know and like your style
Trust you as an expert
Share your values

These clients are super fun and easy to work with, and you can sign more clients like these by putting care into how you structure your case studies.

The 3-part case study structure

Each case study I create has three main parts:

Part A: The transformation that your client experienced from working with you on this project. Think of this as an overview of your story.
Part B: The design decisions that you made throughout the project. This part represents the detailed middle part of your story.
Part C: The final result that you delivered for your client. This part covers the climax and the resolution of your story.

Let’s dive into each one in detail.

A) Transformation

Part A is all about the transformation that the client experienced from working with you on this project.

This is the super short version of the whole story: even if a potential client only reads this first third of the case study, they will leave with a good picture of the main storyline.

1. Client bio

At the top of every case study is the client bio, which introduces the main character in your story.

It doesn’t have to be long, but you want to share basic information like:

Their name and their business name
Who they help and how
What makes them different from their peers

Here’s an example from my case study for Meredith Keith-Chirch of M for Health. You can see the live case study here.

Client bio for Meredith Keith-Chirch of M for Health

Since M for Health is a personal brand and Meredith is the face of the business, I included a headshot. Stories with pictures are always more fun to read!

2. Project highlights

The second section is for the project highlights, and I think of this as the spoilers section.

It’s important to have this section near the top because some of your potential clients are going to want to know what happens at the end without having to go through the whole story.

I recommend sharing 3 to 4 results that your client got from this project. Ideally, these are the kinds of results that your potential clients are also looking for.

Project highlights from Meredith’s project

3. Project goals

The third section lists your project goals: What goals did you set for this project before you got started?

Ideally, you and your client agreed on some goals (my favorite way to do this is by creating a clear website project brief that the client signs off on before I start any design work).

This is a big part of your character and plot development.

4. The “before”

I call the fourth section the “before” and this is the final section in Part A of your case study.

As web designers, when we create full websites, we get to deliver some very tangible and visual transformations. We can show a picture of the before and a picture of the after, which isn’t always true for projects with narrower scopes of work, like brand strategy or copywriting.

This section is all about that “before” picture.

Here, you set the scene for your story and describe where your client was, and what their business looked like, before you started working together.

If you have screenshots of the old website, this is the perfect place for those.

For bonus points, include a direct quote from the client. What did they think were the old website’s limitations? How was their old website NOT supporting their business goals?

B) Design decisions

Part B is all about your expertise and how awesome you are at what you do. This is the middle part of the story, where different events take place and we learn more about the main character — in this case, your client (and their brand).

We focus on the decisions you made about the various design elements in this project, and how you went about achieving the project goals for your client.

I often include 3 sections here: colors and fonts, logo, and stock photography.

5. Colors and fonts

For me, the fifth section is usually colors and fonts — I create a color palette and typography system for every website I create.

I say “colors and fonts” because these are the everyday words my clients use to talk about their color palettes and typography systems. I like to use simple language and keep my content jargon-free.

The “Colors & Fonts” section of Meredith’s case study

6. Logo

The sixth section is all about logos. For every project, I create a set of logos, usually a main primary logo and a brand mark, and sometimes a secondary logo.

The “Logos & Brand Mark” section of Meredith’s case study

7. Stock photography

Most of my website projects also require some stock photos that complement the client’s existing brand photos — and I cover these in the seventh section.

The “Stock Photography” section of Meredith’s case study

It’s super important that in addition to showing these design elements visually, you also write a few short sentences here explaining the thinking behind your design decisions.

Why did you choose these colors and fonts?
Why did you design a logo that looks like this?
Why did you pick these stock photos for the website?

I know this can be a little annoying (why can’t you just show your pretty images and be done with it?) but this is really how you establish yourself as the expert — by showing your thinking and decision making process.

C) Final result

This third and final part of your case study is all about showing off the website, and the results that it got and delivered for your client. In other words, it’s all about how amazing and great at your job you are! You’re going to show off the finished website, highlight the results, and share a testimonial from the client.

The main focus is what your client got out of this project and how much they loved working with you.

8. Website

In the eighth section, we finally get to show off the completed website. Continuing the story analogy — this is your climax, where everything we’ve seen so far comes together.

Show off #allthescreenshots and don’t forget the mobile views.

As with the design elements, it’s important to add a few lines here about the considerations that went into this website design. I often comment on the website structure and customer journey here.

The “Website” section of Meredith’s case study

9. Results

Section nine is all about the results. This is the ending of your story, where we learn how the main character has been changed as a result of this project.

A website is just a tool — most clients don’t really want a website, they want the business results that the website brings.

So tell your potential clients who are reading this case study what results you delivered with this project. This section can be exactly the same as the Project Highlights section.

If you find it difficult to put into words the results you got for your client, it can be helpful to review your project goals and talk about how you achieved them.

I also recommend adding a testimonial from the client here. This way, you get to share in your client’s words what they got out of this project.

The “Results” section of Meredith’s case study

10. Call to action

The final section in your case study must be a call to action.

This is where you say to the reader — your potential client — if you also want the kinds of results that you’ve seen here, let’s talk about how I can help you with your website.

Make it very clear what they should do as their next step if they’re interested in working with you.

The “Call to Action” section of Meredith’s case study

Recap

Here’s a quick recap of the sections we covered in this blog post.

Part A: Transformation

Client bio (introduce your main character)
Project highlights (spill those spoilers)
Project goals (tell us more about the main character and their story)
The “before” (set the scene before you go deeper into the story)

Part B: Design decisions

Colors and fonts (build on the story)
Logo (then build some more)
Stock photos (give us more action)

Part C: Final result

Website (describe the climax of the story)
Results (tell us the end of the story)
Call to action (tell us what to do next)

Follow this structure when you create your next case study, to ensure that you answer all the important questions that your potential clients are asking.

That will make it super easy for great-fit clients to decide that they want you to create their website.

Your shortcut to creating a your next case study

If you’re feeling motivated to create a new case study, but are worried that this is going to take too long, I got you.

I don’t want creating your case study to turn into yet another marketing project that slows you down, keeping you from signing new clients and earning cash.

That’s why I created Case Study Recipe — to help you build your portfolio quickly using my templates, word banks, and repeatable process.

Whether you need help coming up with the words for your case study, or the step-by-step instructions for putting together a case study that reads like a story, you’ll love Case Study Recipe.

Case Study Recipe is a self-paced course that will give you everything you need to start and complete a new case study in just a few days.

Click the button below to get all the details. When you sign up, you’ll get immediate access to all of the course content.

Go to Case Study Recipe

How to structure an effective case study for your web design portfolio

What is a case study?

How do case studies help you get new clients?