Outcome First Case
A case study that leads with the result at display size before a ruled divider reveals the problem and approach in two equal columns.
A case study that leads with the result at display size before a ruled divider reveals the problem and approach in two equal columns.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Outcome First Case leads with the result at display size before explaining anything: cut onboarding drop-off by 28%, measured over 60 days and described as the single largest activation improvement in two years. Below a ruled divider, two columns carry the problem (40% of free signups never sent a single invite) and what changed (the required path cut to three steps, everything else deferred to an in-product checklist). Context line above the headline names the project and year in muted small text.
The two body columns are one array. Putting the number first is the distinctive choice, it respects that most readers form an opinion before they read the argument, so the argument should follow, not precede.
Reach for this block when the result is strong enough to speak before the context, and when the reader skimming the page should stop at the number rather than at the heading. The installer replaces the result line, the context sentence, and both column bodies with their real project.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the fintech onboarding outcome opener. Other outcome-first shapes:
Tip: the context sentence under the result is as important as the number itself, name the window and the baseline or the figure reads as unverifiable.