Stop 13 · Design Portfolio StrategyTopics · 2/7

Case Study Structure

Part of the UI/UX Design Roadmap

In short

A good case study reads like a short story: there's a problem, some struggle, a solution and a lesson. Without that shape, it's just a pile of screens.

A common, effective structure — problem, research, process/iterations, final solution, outcome/impact, and reflection — giving reviewers a clear narrative to follow rather than a scattered collection of screens.

The jaadu, as a cooking show host, stirs a pan with bowls of ingredients laid out in a row.

Think of it like this

A cooking show episode

A cooking show doesn't start with the plated dish. It shows what we're making and why, the ingredients, the tricky steps, the tasting, and a tip for next time. Your case study follows the same order, so the reader stays with you.

Watch it happen

The six parts of a case study

Problem
Research
Process
Solution
Outcome
Reflection

1/6Problem: who struggled, with what, and why it mattered. Add your role, team and timeline.

The big ideas

What you need to know

TL;DR at the top

Open with a three-line summary: problem, what you did, result. Many readers stop there.

Headings as signposts

Clear section headings let readers jump to what they care about.

Cut ruthlessly

Show the few artefacts that moved the story forward, not every file you made.

Annotate visuals

Add short notes on screens to point out the decision. Don't make readers hunt.

See it in code

Walk through the code

text
1TL;DR: Hostel students missed mess meals because menus2changed without notice. I designed a menu + alert app.3In tests, 5 of 6 students found today's menu in 10s.4 5Role: Solo designer, 4 weeks, class project6Problem: ...7Research: 6 interviews, 1 survey (42 replies)8Process: 3 concepts -> 1 tested -> 2 rounds of fixes9Solution: ...10Outcome: ...11Reflection: ...

1/3The TL;DR: problem, what you did and a result, in three lines.

A case study skeleton. The TL;DR does most of the work for skimmers. Fill each section with one short paragraph before adding visuals.

Save yourself the pain

Common mistakes

Oops

Starting with three paragraphs about the company history.

Do this instead

Start with the user problem and your role. Add background only if it explains a decision.

Oops

Leaving out the outcome because the project was only a concept.

Do this instead

Share what you can: usability test results, peer feedback, or what you'd measure if it launched.

Your mission

Skeleton first

~30 min

Quick check

Why put a TL;DR at the top of a case study?

Go deeper

  1. 1Outline a case study structure for one of your practice projects using this framework.
  2. 2Learn why leading with the problem (not the final screen) draws readers in more effectively.
  3. 3Practice writing a one-paragraph summary for each section before filling in full detail.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge