Interactive product canvas
Put the real workspace at the centre of the page, annotate the one interaction that matters, then map the workflow around it.
Page flow
6 sections in the order the visitor meets them. Taller bars mark the sections that need more space.
- OrientCanvas promise
- DemonstrateLive-looking canvas
- DemonstrateFocal interaction
- ProveReal artifact
- NavigateWorkflow annotations
- ConvertOpen the canvas
How the page leads to action
- 1
State the canvas promise in one line: what this surface is for.
- 2
Show the workspace at real density, populated with believable work.
- 3
Draw attention to the single focal interaction that defines the product.
- 4
Show a real artifact produced on the canvas, so the surface has an output.
- 5
Annotate the surrounding workflow: what happens before and after this screen.
- 6
Invite the visitor onto the canvas rather than into a form.
What each section needs to do
- OrientCanvas promise
- One sentence naming what the surface is for, so the dense screenshot below is readable.
- DemonstrateLive-looking canvas
- The real workspace at real density with real-looking content. Empty states and lorem ipsum both break the spell.
- DemonstrateFocal interaction
- One interaction — drag, multiplayer cursor, command, inline edit — isolated and shown working.
- ProveReal artifact
- Something finished that came off this canvas, proving the surface produces outcomes, not just views.
- NavigateWorkflow annotations
- Short labels placing this screen in the wider process: what feeds it, what it hands off.
- ConvertOpen the canvas
- An entry that lands the visitor on a populated canvas, never on an empty document.
Is this the right page flow?
Who it is for
Practitioners who will recognize a real workspace instantly and dismiss a fake one just as fast.
Products it suits
Canvas, editor and workspace products where the surface itself is the argument.
Not for
Backend services where the UI is incidental, so a staged canvas would flatter the wrong thing.
How the page proves its case
Which proof appears first, and what follows it.
- Primary: the workspace at real density, which practitioners read as authenticity.
- Secondary: the focal interaction, which shows what is different about this surface.
- Tertiary: the finished artifact, which converts a nice surface into a result.
Call to action plan
What the page asks for, what it offers instead, and where.
- Primary
- Open a populated canvas
- Secondary
- Watch the focal interaction, or explore the workflow around it
- Placement
- Primary action adjacent to the canvas, so the click happens where the interest is; repeated after the artifact.
Responsive behavior
What the sequence has to do when the viewport stops cooperating.
- The canvas crops rather than scales below tablet width: keep one region legible instead of shrinking everything.
- The focal interaction becomes a short looping clip on mobile rather than a hover-dependent demo.
- Workflow annotations move from callouts pinned to the canvas into an ordered list beneath it.
Anti-patterns
The failure modes that make this sequence stop working.
- A shrunken full-screenshot where nothing is readable, which proves only that a UI exists.
- An empty canvas, which shows the product's worst state as its first impression.
- Fabricated content that a practitioner will identify as fake in a second.
- Annotating twelve features instead of one focal interaction.
Build spec
What an agent needs in order to build Interactive product canvas: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.
Section specs
- 1.
Canvas promise
- Surface purpose sentence
- Who shares it
- No feature enumeration
Copy rule: Name the shared object ('one canvas your whole team edits'), in under twelve words.
- 2.
Live-looking canvas
- Populated real workspace
- Legible primary region at 1x
- Collaborator or state indicators
- Correct typography and tokens from the product
Copy rule: Content inside the canvas must read as real work, with plausible names and dates.
- 3.
Focal interaction
- One isolated interaction
- Before and after state
- Loop under five seconds
Copy rule: Caption the interaction with the verb the user performs, once.
- 4.
Real artifact
- Finished output
- Its origin on the canvas
- Who made it
Copy rule: Say what the artifact was used for after it left the canvas.
- 5.
Workflow annotations
- Upstream input
- This screen's job
- Downstream handoff
Copy rule: Three labels, four words each, in process order.
- 6.
Open the canvas
- Populated-entry action
- Guest or no-account path if it exists
- Sample file link
Copy rule: Promise a populated starting state explicitly.
Content slots
- canvasCapture
- A real, populated workspace capture at a resolution that stays legible at 1x.
- focalInteraction
- The one interaction that best distinguishes this surface, with before/after states.
- artifactExample
- A finished artifact produced on the canvas, with its purpose and maker.
- workflowNeighbours
- What feeds the canvas and what it hands off to.
- populatedEntry
- The URL or flow that opens a pre-filled canvas rather than an empty document.
Build order
- Capture the populated canvas first and confirm the primary region is legible at 1x.
- Isolate the focal interaction and produce its loop.
- Write the canvas promise from what the capture actually shows.
- Add the artifact and its origin, then the three workflow annotations.
- Wire the populated entry and verify it never lands on an empty state.
QA checks
- Text inside the canvas is readable without zooming on a laptop viewport.
- The canvas contains no lorem ipsum and no placeholder avatars.
- The focal interaction is understandable without its caption.
- The entry action opens a populated canvas.
- Only one interaction is annotated as focal.
Agent tags
The vocabulary an agent matches this recipe on.
- product-canvas
- focal-interaction
- real-density
- workflow-annotation
- workspace-entry