Case Study Design
A design case study with a sticky screen stack and result strip on the left and a four-section narrative (problem, approach, constraint, outcome) on the right.
A design case study with a sticky screen stack and result strip on the left and a four-section narrative (problem, approach, constraint, outcome) on the right.
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
Case Study Design tells the Tend mobile redesign as four sections (The problem, The approach, The constraint, The outcome) in a scrolling right column beside a sticky left column holding a two-column Placeholder screen stack and a three-cell result strip. The constraint section is the distinctive detail: no changes to the data model and no new API endpoints for the first eight weeks, naming the real limit that shaped the design.
Sections and results are two typed arrays; the left column is sticky at top-24 so the result figures stay visible while the narrative scrolls. Check-in completion rising from 34% to 61% and time dropping to 48 seconds are the outcome the installer will replace with their own numbers.
Reach for this block as the body of a project page for a digital design case study with measurable outcomes. The installer swaps the project name, the screen Placeholders, the four section texts, and the three result figures, keeping a constraint section that names the real limit.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product design case study with screen stack and result strip. Other design case layouts:
Tip: the constraint section is the part other case studies skip; naming the limit explains the tradeoff and makes the outcome credible rather than a brag.