Let’s Build a Case Study Layout

We have amazing customers, great customer stories, fantastic case studies. They’re buried like three, four clicks in, and it drives me nuts.

Common tropes from customers

I hear the above comment on sales calls so many times. Showcasing case studies is challenging (where should you put them?) and they are hard to keep up to date.

Today, I want to tackle the latter: how can we make them simpler to keep up to date?

Today, we’re going to create a simple case study layout that you can use repeatedly. I’ll also summarize the key data you need for each case study so you can reduce the time you spend on each one.

We’re going to go over:

• What are common pain points that most of your clients have?
• What actions do you want visitors to take?
• What are the common elements we have to use on this layout?
• What data do we need to collect from each client?
• How does this boil down into a layout that converts?

Let’s establish baseline content

Your team should not spend countless hours putting together case studies for your website. When this happens, the most common reason is that there hasn’t been a clearly defined structure for how the case study will be laid out. Team members stare at a “blank screen” and don’t know where to start.

Before we dive into the layout, I want to hone in on answers to two questions that, if answered well, will make the rest of the page simple:

What do potential clients want to learn?

Start by going through all of the transcripts of your sales calls and answer these questions:

• What are common questions that are asked?
• What are the pain points people bring up?
• What “deep dive” questions are being asked (you know, the things not every one of your clients would need to know)?

I want to define these because you probably solve similar problems across your clients. While these answers won’t solve every client’s problem, they will keep you focused on what is most important to them.

What do you want potential clients to do?

I see this element missed the most. You (should) be proactively sending clients to individual case study pages as a part of the sales follow-through motions. Those case studies are saved away as unchangeable/untrackable PDF files attached to an email. One of the core benefits of having the information directly on the site is being able to embed actions on the page.

In order to do so, you need to know what action you want that potential customer to take.

Two easy examples to get you thinking would be:

1. If you’re using your case study pages well, and they get a lot of organic traffic, perhaps softer CTAs (like newsletter sign ups or the download of a lead magnet) would be good
2. Perhaps a sharper CTA (like scheduling a follow-up meeting) would be more beneficial if you’re primarily driving traffic on a call-by-call basis.

Section-by-section breakdown

Now that we have our common threads to pull from, let’s dive section-by-section through the layout. (You can jump to the full layout if you’d like).

Hero section

• Headline text: Describe the problem and solution in one sentence to let potential clients know they landed on a page that can help them.
• Two quick wins: Showcase two ways this led to success. Derive these quick wins from the common problem statements from earlier (that way they connect with a majority of your clients
• Company name: The company you did work for is important, but not as important as the problem you solved. Toss the name of the company at the top, and smaller.
• Image: It’s always good to break up text with visuals. If possible, upload an image to the side.

Problem statements

• Problems: List out each problem and describe it in a little more detail. If you can use common answers from the above list, this will reduce the creative energy you need to expend. You want readers to feel: “Oh yeah, that does sound like me.”

Solution description

• Heading: Describe the solution in one medium-length sentence. You want to showcase that you know how to solve these problems.
• Paragraph: Talk about how you came to this solution. Again, don’t reinvent the wheel here. If you can pull from your common problem/solution statements, simply tailor those to fit this case study.
• Bullet Points: Type out the wins. By having bullets, readers eyes will be drawn to this section. Make this text short and impactful.
• Button(s): Our first button on the page. Clicking on this will drive them down to the main form at the bottom of the page to get in touch. Use actionable words like: “Let’s solve this for you.”
• Image: We’re getting in areas of lots of text. Break it up with an image (preferably of your service/product).

Testimonials

• Testimonials: If you can have: the person’s name, job title, company, quote, and picture, all the better. The more you can make it feel like a real person is actually saying these words, the deeper the connection you’ll make with your target customer. Aim to collect all five pieces of that data.

Want to take a look at our entire project plan template?

Direct CTA

• Headline: Keep it short-n-sweet. What action do you want the visitor to take (we defined it above)? Talk about it here
• Button: Drive the visitor to make the action.

Gallery (if applicable)

• Gallery: This is where you can create a “wall of images” showcasing the visual nature of your work. Take screenshots or pictures to showcase the final product.

Form for action

• Heading: Make the heading a question and tie it to the company’s case study the visitor is reading. My example is generic, but if you can highlight the key problem in this question/header, even better.
• Form: For service-based business, I highly recommend a direct scheduling form with the person’s name and face showcased. However, if that’s not possible, collect the information in a standard form.

Summary of content to collect

Now that we’ve gone through every piece of the layout, let’s drop a quick summary of the data points you’ll need for each case study:

• Company name
• One sentence problem/solution statement
• Two quick wins
• Three problems (and one sentence descriptions)
• The solution
• One or two testimonials
• A few images (if applicable)

Copy these into your project management system in a “task template” so you have easy access to them every time you complete work for a new client. With these pieces of data in hand, building out a case study page is simply “fill in the blanks.”

I walked through variables on how pricing a website redesign works

Bonus features for your case study page

• Blog Posts: This is for the folks who want to dive deep. If this project used some highly technical services/tools that not every potential client is interested in, link to blog posts where you talk about your expertise in those areas.
• Videos: If your marketing budget allows, create some videos with (or without) the referenced client. This will allow you to showcase team members and add a more personal touch to these pages.
• Links to assets: If you can, link to any public-facing projects. For example, in the web world, we link out to our clients’ websites. If you can do something similar to showcase your work “out in the wild,” that will make case studies feel more real.

Full layout to download

You can download the full-resolution PNG. You can also jump back up to the walkthrough.