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.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
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.