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.

Use the dimension that changed

Before and after is a change in time, so the control should let the reader move through time. A side-by-side layout works when shape or scale is the comparison. Two versions of the same screen are states, not separate objects. Put those states in the same frame and let the reader switch between them.