Case-study pages that do more than show screenshots

A case study is a record of a constraint, a decision, and what changed in the work. Screenshots show the result of those sentences. They do not replace them.

If you are learning how to write a design case study, start with the problem the team was willing to refuse. A gallery of final frames can look finished and still leave a founder with nothing to judge.

Name the constraint in the first screen

People decide quickly whether a page is worth staying on. Nielsen Norman Group, summarizing large-scale research in 2011, put it plainly: users often leave within 10 to 20 seconds, and a page has to communicate its value in about 10 seconds if it wants longer attention. A case study spends that time the same way a homepage does. Say what the project was, who it was for, and which limit shaped the work.

The constraint might be a heritage brand that needed a modern site without losing the craft, which is the public shape of the Thomas Bewick project. It might be a shop leaving an older ecommerce stack, which is the public shape of Down the Cove. It might be a product interface that had to be scanned, which is the kind of problem behind Trade Moai, Got Next, and Leadly. Write the constraint in one or two sentences. If you need a paragraph of studio history before the reader knows what they are looking at, move that paragraph down.

Skip the weather of the engagement. "We were thrilled to partner" tells a buyer nothing they can use. The constraint does. It is the reason the later pictures are not arbitrary.

The decision, then the picture

A useful middle is a small number of decisions. Three is plenty. For each one, write what was chosen, what was set aside, and why.

On an editorial site, a decision might be to let the craft lead the homepage and to keep navigation quiet. On a shop, a decision might be to keep the catalog and the URLs that already made sense, and to rebuild the product page and the checkout around them. On a product, a decision might be to cut screens that shared one choice, so the interface showed the next action instead of every possible one.

Then show the picture that proves the decision. Crop it so the relevant part is obvious. Caption it with the decision, not with "final design." A row of untitled mockups asks the reader to invent the story. Some readers will invent the wrong one.

Google's helpful-content guidance asks whether a page offers original information, and whether it shows first-hand experience. A case study is one of the few pages where you have that experience by definition, if your team did the work. Use it. Name the tradeoff. If a path was rejected because it would have confused returning customers, say so. That sentence is more persuasive than a larger screenshot.

If you did not make the work, do not write as if you did. A write-up of someone else's public site can be a critique. It should be labeled as one.

What you may say changed

Say what changed in the work itself. The navigation got shorter. The type became a system. The checkout dropped fields that were not required. The brand and the interface started from the same idea. Those are observations a reader can check against the pictures.

Leave numbers out unless you can point at a real source the client has already made public. A made-up lift in conversion, a made-up timeline, or a quotation the client never said will fail the first time a buyer asks to see it. Qualitative change is allowed. "The shop reads as one brand instead of a pile of plugins" is a claim about the work. It is not a statistic.

Cover the unglamorous parts when they mattered. A migration that kept checkout intact is a decision. A handoff that put logos, files, and project notes where the client could find them is a decision. Hanabi's portal is that kind of object: brand files, docs, and updates after delivery. If a project depended on it, the case study can say so without turning the portal into the hero of every story.

End the piece on the limit of the advice. This approach fit a heritage brand, a small shop, or an early product. It is not a template for every company with a website.

A shape you can reuse

Use the same outline until it becomes habit:

1. One sentence on who it was for and what was at risk.
2. The constraint you refused to break.
3. Two or three decisions, each with a picture and a reason.
4. What changed in the work, in language a stranger can verify.
5. What you would do differently if the constraint had been different.

Keep the page short enough to finish. A founder reading between meetings will give you the opening and maybe one decision. Put the strongest decision first. Supporting frames can follow. Process diagrams help when they show a sequence the reader must understand. They hurt when they decorate a story that never names a choice.

Write in the voice of the studio, not in the voice of an award entry. Short sentences. The name of the project. The name of the object on the screen. If a sentence could sit on any studio's site, cut it and write the specific one.

Show the work to someone who was not in the project. Ask them what they think was decided. If they cannot answer, the pictures are leading and the sentences are late.

How this helps the next reader

A case study has two readers. One is comparing partners and wants to know if you have solved a problem like theirs. The other is on your team, six months later, trying to remember why a choice was made. Write for both. The constraint and the decision serve the buyer. The same lines serve the team.

Group the studies by the kind of problem, not only by how polished the frames look. A calm brand site such as Wabisabi teaches a different lesson than a community sports site such as Ballarat Box Sports. Put that lesson in the title of the page so the right buyer opens it.

The studies themselves live with the selected work. Read them for the problem and the restraint, then decide whether the studio builds the kind of thing you need.

Before you trust a gallery, read how to read a studio portfolio. The questions in that piece are the ones your case study should be able to answer without a tour from the person who made it.