R11Show the product working
Free

Workflow storyboard

Walk the trigger, the middle steps, the handoff and the result in the order a real user meets them.

Back to page recipes

Section sequence

5sections, in the order the visitor meets them. Bar height is the section's weight in the page.

  1. OrientTrigger
  2. DemonstrateStage cards
  3. DemonstrateHandoff
  4. ProveResult artifact
  5. ConvertEnter at your stage

How the page argues

  1. 1

    Open on the trigger: the moment the work actually starts.

  2. 2

    Show the middle steps as states, each with its own screen or artifact.

  3. 3

    Make the handoff explicit — who or what picks the work up next.

  4. 4

    End on the result, in the form the organization keeps.

  5. 5

    Let the visitor enter at whichever stage they recognize as their problem.

What each section has to be

OrientTrigger
The originating event named concretely: a request arrives, a build fails, a customer writes in.
DemonstrateStage cards
Three to five stages, each with a real screen or artifact and the state change it produces.
DemonstrateHandoff
The moment work changes hands, between people, teams or agents, shown rather than implied.
ProveResult artifact
The durable output: the shipped change, the closed ticket, the published record.
ConvertEnter at your stage
Per-stage entry, so a visitor with one painful step can start there instead of adopting everything.

Is this the right sequence?

Who it is for

Teams evaluating whether the product fits a process they already run, and where it would slot in.

Products it suits

Workflow products and human-plus-agent processes with a genuine sequence of states.

Not for

A single-action tool, where a storyboard invents ceremony that the product does not have.

Evidence strategy

Which proof modes carry the page, in the order they land.

  1. Primary: sequence — the page mirrors a process the visitor already recognizes.
  2. Secondary: per-stage artifacts, which prove each step exists in the product.
  3. Tertiary: the durable result, which shows the process terminates in something valuable.

CTA plan

What the page asks for, what it offers instead, and where.

Primary
Start at the stage that hurts most
Secondary
See the whole flow end to end
Placement
A small action on each stage card, plus one whole-flow action after the result artifact.

Responsive behavior

What the sequence has to do when the viewport stops cooperating.

  • Stage cards go from a horizontal sequence to a vertical timeline with a visible connector and stage numbers.
  • Stage screenshots crop to the region that changed instead of scaling the whole UI.
  • The handoff keeps its own row on mobile; never collapse it into the adjacent stage.

Anti-patterns

The failure modes that make this sequence stop working.

  • Stages that are feature names rather than states of the work.
  • A storyboard with no handoff, which hides the part that actually breaks in real teams.
  • Seven stages, which is a process diagram and not a page.
  • Illustrated icons in place of real screens.

Build spec

What an agent needs in order to build Workflow storyboard: 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. 1.

    Trigger

    • The originating event
    • Who notices it
    • How it enters the system

    Copy rule: Describe the event, not the feature that receives it.

  2. 2.

    Stage cards

    • Three to five stages
    • Stage name as a state
    • Real screen or artifact per stage
    • The change each stage produces

    Copy rule: Name stages as states of the work ('triaged', 'in review'), not as product modules.

  3. 3.

    Handoff

    • Who hands off
    • Who receives
    • What travels with the work
    • Notification or approval mechanism

    Copy rule: Name both parties, including the agent if one is involved.

  4. 4.

    Result artifact

    • Durable output
    • Where it lives afterwards
    • Who consumes it

    Copy rule: Say what the organization keeps once the flow is done.

  5. 5.

    Enter at your stage

    • Per-stage action
    • Whole-flow action
    • Integration note per stage

    Copy rule: Each stage action names that stage's job.

Content slots

triggerEvent
The real event that starts this workflow for most customers.
stageSequence
Three to five work states with the screen or artifact for each.
handoffPoints
Where work changes hands, and what metadata travels with it.
durableResult
The output the organization retains, and where it is stored.
stageEntryPoints
How a customer can adopt one stage without adopting the whole flow.

Build order

  1. Map the real customer sequence, including the handoff, before choosing screens.
  2. Collect one real screen or artifact per stage.
  3. Build the stage cards, then the handoff as its own beat.
  4. Add the result artifact and where it lives.
  5. Wire per-stage entry points last.

QA checks

  • Every stage is a state of the work, not a product feature.
  • The handoff names both sides explicitly.
  • Each stage has a real screen or artifact.
  • The result artifact is something a customer would keep.
  • A visitor can start at stage three without reading stages one and two.

Agent tags

The vocabulary an agent matches this recipe on.

  • workflow-storyboard
  • stage-cards
  • handoff
  • result-artifact
  • stage-entry