Skip to content

Work / Trunk / Wiki / Surfaces

journey

Surfacecanonicalverified 2026-10-19

SURFACE.WEB.JOURNEY.JOURNEY

Summary

The whole product as page frames joined by arrows. What opens when you open a product.

Raw wireframe

  • .context/designs/web/journey/journey.html
  • .context/designs/web/journey/journey-empty.html — empty

Why it is drawn this way

No side panels. Journey is the map, so the canvas gets the whole width. Filters sit across the top: All, Open, Sign-in, each role, then your own journeys.

Laid out as the visitor moves (owner, 2026-10-19). The main way through runs straight along the top row: from the start, each step to the page that leads to the most pages after it. A branch hangs under the page it leaves. Pages the start never reaches sit in bands below, from the first column. Labels never sit on top of each other. A page whose address differs only by its query, and is built the same, is one page, so a form's scenarios are one frame.

Each frame carries its step in the walk, 1 for the first page opened, so how the person, or the capture, moved through the product reads at a glance. Pages only linked to, never opened, are hidden behind the Not captured chip; a filter with no page is not offered.

Links back and site-wide links are hidden until asked for. Every page links home, and a footer's Terms or a header's Sign in is on every page, so these cross the whole board and say nothing about the way through. A page most pages link to keeps only the start's link to it. The All links chip at the end of the filters shows the rest, with their count. A link picked is always drawn. A label sits where its arrow arrives.

A selection is a card on the canvas, not a panel: the page's facts, its links in and out, and Open in Pages.

Frames, not boxes. Each page is a small render of what it looks like, with its name, route and the roles that reach it.

An arrow is a click action. The label says what the person does. Two pages can be joined by more than one arrow.

Problems sit on the frame: a dead end, a page with no live way in, a missing state.

One bottom toolbar. Tools, zoom, viewport, state, Preview, Actions (⌘K), then View · Edit at the end, like Figma's Dev Mode switch.

Related

Sources