The case study template

What every case study shows, in what order, at what size, and where each frame comes from. Apply this to an eleventh study without asking anyone a question.

Grounded in what already exists — see media inventory. The short version: the site already has cover, gallery[], diagram and video slots, uses only cover, and has 24 good image files on disk that nothing links to.

The principle

A case study is not a gallery. Six screenshots of a nice interface prove you can take screenshots. The frame set has to carry an argument:

This is who it was for → this is what was hard → this is how I solved it → this is what shipped → this is what it did.

Every frame below earns its place by doing one of those five jobs. If a frame does not, it is decoration and it comes out — a shorter case study that argues is stronger than a long one that displays.

The existing assets already imply this spine (brand → thinking → product). It was never written down, so it was never applied consistently and three-quarters of it was never published.

The frame set

Five mandatory frames. Two optional. Keep the existing 1440×928 and 565×800 — they are already universal, they already fit the grid, and changing them would orphan 24 working files to no benefit.

F1 — Cover

The only frame most people will ever see. It appears on /, on the category pages, and at the top of the study.

Not a screenshot. A composed image that says what kind of problem this was. zevo’s job is “peer-to-peer EV sharing”, not “here is an app”.

F2 — Brand plate

Client wordmark, centred, flat ground, nothing else. Ground colour comes from the client’s own palette — zevo is white-on-black, wire is black-on-light-grey.

It reads as a chapter heading and it costs nothing: the logo already exists as logo.svg in every study. Its real job is rhythm. Ten case studies without a recurring beat blur together.

F3 — The problem

The frame the current set is missing entirely, and the reason most portfolio case studies are boring. Everyone shows the solution. Almost nobody shows the thing that made it hard.

Concretely: the two systems of record behind Samsung’s storefront. The G7-grade trust Wire’s checkout had to carry. The fact that an EV sitting idle earns nothing. This is where a generated image genuinely helps — the problem is usually a situation, not a screen, and there is no screenshot of it.

F4 — The mechanism

An actual screen with callout lines and labelled explanations. zevo’s annotated wallet — “Available Cash”, “Pending Cash”, “Unpaid Payments” — is the strongest single asset in the entire set.

Figma export only, never generated. This frame’s whole value is that it is real. A synthesised version of a design decision is a lie about work you actually did, and it is the one frame where getting caught costs the most.

Always carries a caption. An annotation diagram without a sentence of context makes the reader do the work.

F5 — The product

Device mockups, in a composition, showing the thing running. zevo’s two-iPhone shot is the model.

Proof it shipped. Where there is a liveUrl, prefer a fresh capture over an old Figma export — a 2020 mockup of a site that is still live is a missed chance to show it survived.

F6 — The system — optional

Fills the unused diagram slot. A flow, an architecture sketch, a before/after.

Use it when the work was structural rather than visual — Samsung’s dual ERP/CRM integration, DePunks’ contract architecture. Skip it when the interface is the whole story.

F7 — Motion — optional

Fills the unused video slot, which has a poster field and styled CSS already waiting.

10–20 seconds. Use it only where a still genuinely cannot carry it: a contactless unlock, an agent acting on-chain, a checkout flow completing. Motion for its own sake is worse than no motion, because it costs the most to produce and the most to sit through.

Storyboards and prompts come first — see csm-005. Nothing renders until the prompt reads right on the page.

Wiring it up

Frames go in the slots that already exist:

cover: "../../assets/images/case-studies/<slug>/cover.png"
gallery:
  - src: "../../assets/images/case-studies/<slug>/2.png"   # F2 brand plate
    alt: "Zevo wordmark"
    caption: "Zevo — peer-to-peer EV sharing, 2026"
  - src: "../../assets/images/case-studies/<slug>/1.png"   # F4 mechanism
    alt: "Annotated wallet balance screen"
    caption: "Three money states a host has to tell apart at a glance."
  - src: "../../assets/images/case-studies/<slug>/3.png"   # F5 product
    alt: "Onboarding and EV search on iPhone"
diagram:
  src: "../../assets/images/case-studies/<slug>/flow.png"  # F6
  alt: "..."
  caption: "..."
video:
  src: "/video/<slug>.mp4"                                  # F7
  poster: "../../assets/images/case-studies/<slug>/cover.png"

Every gallery entry gets a caption. The slot supports it, nothing uses it, and an uncaptioned annotated spec wastes its own best quality.

Keep the 1/2/3 filenames on the eight studies that have them — renaming buys nothing and breaks git history. New studies should use f3-problem.png, f4-mechanism.png, f5-product.png, because a name that says what a frame does is how this template survives the next person.

Applying it to a study with nothing

agent4 and depunks have no cover, no frames, no logo — and both are featured. The template still applies; only the sources change:

F4 is the one that cannot be shortcut. Both projects are live and both are foogy’s own, so the screens exist to capture and annotate. That is an afternoon in Figma, not a generation job, and doing it is the difference between a case study and a landing page.

Checking a study against this

1. Are F1–F5 present?
2. Does F4 come from Figma or a real capture — never generated?
3. Does every gallery entry have a caption?
4. Can you say in one sentence what each frame argues? If not, cut it.
5. Do F3 and F1 share the art direction, or were they made in different moods?
6. Does the study read at 375px?

Validation

Required by csm-002: the template has to hold for two studies of opposite shape.

zevo — Figma link, six assets, live. F1 cover.png ✅ · F2 2.png ✅ · F4 1.png ✅ · F5 3.png ✅ · F3 missing, must be generated · F6 candidate (the money flow between host, guest and Zevo) · F7 candidate (contactless unlock). Verdict: four of five mandatory frames already exist on disk and are unpublished. Wiring them up is most of the work.

agent4 — no assets, no Figma, but live. F1 generated · F2 wordmark · F3 generated · F4 capture and annotate from agents4.fun · F5 live capture · F6 recommended. Verdict: nothing blocks it, and the plan is specific enough to hand to someone tomorrow.

The template holds at both ends. An eleventh study slots in by answering one question per frame.