Great case studies are not just well-written — they are well-presented. Visual storytelling combines imagery, layout, and pacing to create an experience that keeps reviewers engaged from start to finish. The goal is to make your work easy to understand, pleasant to browse, and memorable.
Narrative Flow
Your case study should read like a story with a clear beginning, middle, and end. The sequence in which you reveal information matters just as much as the information itself.
A strong narrative flow typically follows this pattern:
- Hook — A compelling hero image or statement that captures attention immediately. This might be a polished mockup of the final product or a bold statistic about the impact.
- Context — Background information about the project, client, and constraints. Keep this brief — just enough to set the scene.
- Tension — The core problem or challenge. This creates a reason for the reader to keep scrolling.
- Journey — Your process, research, and explorations. This is the longest section and shows your craft.
- Resolution — The final solution, results, and reflections. End on a high note.
Practical tip: Place your strongest visual — usually the final design — both at the top (as a hook) and at the bottom (as a resolution). This technique, sometimes called "bookending," gives the reviewer a preview of where the story is going and a satisfying conclusion.
Annotated Mockups
Raw screenshots rarely communicate your design decisions on their own. Annotations add the layer of explanation that transforms a picture into evidence of your thinking.
Types of annotations that work well:
- Callout boxes — Small text blocks connected to specific UI elements with lines or arrows. Use these to explain why a particular design choice was made.
- Numbered highlights — Circle or highlight specific areas and list corresponding explanations below the image. This keeps the image clean while providing detail.
- Comparison annotations — Side-by-side images with labels like "Before" and "After" or "Option A" and "Option B" with notes explaining the differences.
Keep annotations minimal and focused. If you annotate everything, nothing stands out. Choose the 2-3 most important decisions per screen and explain those.
Process Documentation
Showing the messy middle of your design process builds credibility. It proves that your polished final product was the result of deliberate exploration, not a lucky first attempt.
Process artifacts to capture and include:
- Photos of whiteboard sessions — Even a quick phone photo of sticky notes or sketches adds authenticity. These do not need to be high quality.
- Screenshots of your design file — Show the Figma canvas with multiple iterations visible. This gives reviewers a sense of scale.
- Workshop outputs — Photos or screenshots from design sprints, card sorting exercises, or affinity mapping sessions.
- Progression timelines — A sequence of 3-5 screenshots showing how a design evolved from rough wireframe to polished mockup.
Practical tip: Get in the habit of taking screenshots and photos during your design process, not after. It is almost impossible to recreate authentic process documentation retroactively.
Video Walkthroughs
For interactive or animated work, static images fall short. Short video walkthroughs or animated prototypes bring your designs to life.
When to use video:
- Complex interaction patterns that require seeing motion to understand
- Animated transitions and micro-interactions
- Multi-step user flows where context between screens matters
- Responsive behavior across different device sizes
Best practices for portfolio videos:
- Keep them under 60 seconds — reviewers will not watch longer
- Start with the most impressive moment, not a slow buildup
- Add subtle captions or annotations if the interaction needs explanation
- Use smooth, realistic scrolling and clicking speeds — not rushed
- Host videos so they load quickly, or use optimized GIFs for short clips
Layout and Visual Rhythm
The layout of your case study itself is a design exercise. Treat it with the same care you would treat a client project.
- Alternate between full-width images and text sections to create rhythm
- Use consistent spacing between sections
- Group related images together rather than scattering them
- Leave generous whitespace — dense case studies feel overwhelming
Key Takeaways
- Structure your case study as a story with a hook, tension, and resolution
- Use annotations to explain design decisions, not just show screens
- Capture process artifacts during the project, not after
- Include short video walkthroughs for interactive and animated work
- Treat your case study layout as a design project in itself