Path canvas
A path canvas is a board of a product's screens, captured from a screen-recording walkthrough and laid out left-to-right in the order a user actually hits them. Each branch gets labeled with the condition that routes a user down it, so the board maps not just the screens but what sends someone to each one.
Definition
A design artifact that makes the provider's path through the affordance landscape visually inspectable as a single object, assembled by arranging screenshots from a screen-recording walkthrough spatially on a canvas.
How the canvas is built
Practitioners walk through the offering as a real signup-cohort user would, recording the screen as they go. They pull screenshots from the recording and arrange them in Figma, with horizontal position approximating chronological order of encounter. "If [condition]" labels mark conditional routes — what circumstances send a user to one branch versus another. Where the product is instrumented, each screen pairs with its tracking event name (view_dashboard, submit_onboarding_question) underneath, so visual reading and behavioral measurement can cross-reference at any point. Practitioner notes attach as Figma comments, which lets teammates route questions and feedback to specific screens.
The build comes from the walkthrough, not from internal product specs or design files. Specs describe what the team intended; the walkthrough captures what the user actually encounters. Different captures of the same offering — desktop versus mobile, English versus localized variants, different accessibility settings — produce different canvases. The variation surfaces inconsistency in the offering's actual surface that design docs would have hidden.
Although the canvas gets deployed most often in post-signup activation work, the primitive applies to any user flow. Given a starting-state / resulting-state pair, the canvas can be built of the affordance landscape between them — acquisition flows, retention flows, expansion flows, and sub-workflows within any larger transition are all valid scopes.
Two reading modes
- Landscape-wide reading surfaces structural properties only visible when the whole landscape is co-visible: density imbalances across phases (this phase has dozens of screens, that one has three), branches the team didn't realize they'd built, dead-end clusters, sections marked with explicit "??" because nobody can account for what users do there. A practitioner clicking through the offering in real time can't see an L-curve in workflow geometry or the comparative thinness of one branch versus another; the canvas form makes those system-level properties inspectable.
- Adjacency reading surfaces what screen N+1 looks like immediately after screen N: register-shifts, vocabulary inconsistencies, layout discontinuities, unstated context-switches — moments where the transition from one screen to the next breaks the user's pursuit-context. Each adjacency is a transition the practitioner can evaluate for whether it preserves scent-continuity. This is the primary site for catching scent-breaking visually, before behavioral data has surfaced it.
Position in affordance-design work
The canvas is pattern-level work — visual, comparative, heuristic — deployed openly as the setup that constrains hypothesis space for per-step and per-affordance audits. It surfaces which screens warrant deeper investigation. Tracking event names paired with screens bridge into metric-level work — a screen that looks problematic on the canvas has the event name underneath as the entry point into multiplier analysis.
Example
A practitioner running a post-signup activation engagement for a SaaS product signs up as a real user, screen-records the full first-session experience through onboarding into the dashboard, and pulls around forty screenshots into Figma. They lay them left-to-right by encounter order, branch where the product asks "Are you using this for personal or team work?" with "If personal" and "If team" labels, and pair each screen with its tracking event name.
Landscape-wide reading surfaces that the "team" branch runs eleven screens before the user reaches anything resembling value, while the "personal" branch runs four. Adjacency reading surfaces that the signup confirmation page ends with a copy line about "exploring your dashboard," but the next screen is a workspace-setup wizard about inviting teammates — a register-shift the user wasn't primed for. Both readings produce candidate investigation points; the tracking event names underneath each candidate route into the next stage of behavioral analysis.