About this block

Visual Process walks through five phases of the Tend onboarding redesign (Discovery, Mapping, Prototyping, Testing, Handoff and ship) as a vertical sequence of rows, each pairing a Placeholder at aspect-4/3 with a numbered phase name and a short paragraph. The captions are concrete: six interviews, nine of 14 required fields deferred, a labelling problem found overnight and revised, all five test teams completing step one in 45 seconds. The lede names the duration: five phases over six weeks.

Steps are a typed array. Showing the primary artefact from each phase as a Placeholder frame is the distinctive structure: it reads as a documented process rather than a summary.

When to use

Reach for this block as the process section of a project case study page, after the challenge-and-solution framing and before the impact summary. The installer replaces each Placeholder with the real artefact (wireframe, prototype screenshot, test recording) and rewrites each caption around their actual steps.

A natural flow around it on a Portfolio Pro page:

Before

• Challenge and solution

After

• Impact summary
• Next project teaser

What you can display

One strong use is a UX or product case study that documents how rather than just what. Other uses:

• Engineering project. Phases become plan, build, test, deploy with a screenshot or diagram each.
• Brand project. Discovery, moodboard, concepts, refinement, final mark as the five frames.
• Research project. Recruitment, interviews, synthesis, insight, recommendation as the steps.

Tip: a caption that names a specific finding or decision from that phase beats a caption that just describes what the phase was called.