Before and after belongs to the reader

Stacking old and new on the same canvas reads as one composition, not two states. The fix is a tab.

First pass of the EA Pogo case study. I showed the redesign by stacking the old wireframe above the new one. Same width. Same column. Side by side on desktop, stacked on mobile. Looked clean to me. First viewer who saw it, this is confusing, doesn't show shit.

Why stacked comparisons fail

When two states of the same screen sit on one surface, the eye does not read before and after. It reads one composition. The labels saying which is which need a second pass. By the time you have parsed it, the comparison the case study was making has already lost its punch.

The tab fix

Rebuilt as a tabbed toggle. One frame. One set of dimensions. A pair of buttons, before and after. State preserved between sections. The reader clicks back and forth in the same spatial location. The change becomes literal. The button is the difference. Cognitive load drops to zero.

The general lesson

Anywhere you show two versions of the same thing, decide whether the comparison is spatial or temporal. Side by side is spatial. Only works when the two things have different shapes. Two layouts of the same screen do not have different shapes. They have different states. State changes belong on a toggle, not a grid. Same logic for A/B test results, version diffs, product evolution timelines. Pick the dimension that actually changed and put the control there.