Before After Case
A redesign case study with two Placeholder images side by side, each followed by a paragraph that names the problem or outcome and one unresolved edge case.
A redesign case study with two Placeholder images side by side, each followed by a paragraph that names the problem or outcome and one unresolved edge case.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Before And After Case puts two states of the same surface side by side: the original checkout with seven fields on a single scrolling page that lost 61% of buyers at the payment step, and the revised checkout split into three screens where average completion time dropped from 4 min 12 sec to 2 min 40 sec. A short paragraph under each image explains the reasoning, including one open edge case in the After column.
The two sides are one array of two objects sharing the same shape. Naming an unresolved edge case in the After paragraph is the distinctive detail, a redesign with no caveats reads as a pitch, not a record.
Reach for this block when the case study is fundamentally a redesign and the strongest evidence is the visible difference between old and new. The installer swaps both Placeholder images for real screens and rewrites the paragraphs for their specific change and its measured outcome.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the checkout redesign comparison. Other before-and-after shapes:
Tip: the After paragraph is where credibility lives, name what is still unresolved and the comparison reads as honest rather than promotional.