About this block

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.

When to use

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

• Case study cover
• Case study split

After

• Testimonial in case
• Metrics grid case

What you can display

One strong use is the UX design process for a complex product engagement. Other uses:

• Agency production pipeline. Brief, concept, production, review, delivery as five stages.
• Development project. Discovery, architecture, build, test, ship as the steps, with code screenshots.
• Three-step version. A shorter engagement documented in three stages with wider images.

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.