Visual Process
A vertical sequence of numbered process phases each pairing a Placeholder artefact frame with a short paragraph naming the concrete finding or decision from that phase.
A vertical sequence of numbered process phases each pairing a Placeholder artefact frame with a short paragraph naming the concrete finding or decision from that phase.
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
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.
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
After
One strong use is a UX or product case study that documents how rather than just what. Other uses:
Tip: a caption that names a specific finding or decision from that phase beats a caption that just describes what the phase was called.