Process Walkthrough
A numbered sequence of project steps each with a large step number, title, duration, paragraph, and a Placeholder showing the artefact.
A numbered sequence of project steps each with a large step number, title, duration, paragraph, and a Placeholder showing the artefact.
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
Process Walkthrough documents five steps over nine weeks as alternating image-and-text rows: a large number, the step title, a duration, and a paragraph of decisions made, each paired with a Placeholder showing the artefact from that moment. The copy is honest: Discovery found that every team had built a spreadsheet beside the product because the product could not show two time periods at once. Handoff filed eleven notes, all addressed before launch.
Steps are one array. The large muted step number is the distinctive choice: it anchors the sequence visually and makes the nine-week timeline readable at a glance.
Reach for this block as the process body of a project page or a detailed case study section on a long-form portfolio page. The installer swaps the step titles, durations, descriptions, and Placeholder images for their own process.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the UX design process for a complex product engagement. Other uses:
Tip: include one thing that did not go as planned; a process section that never names a problem or pivot reads as fiction, not documentation.