Product demos & UI / Storyboard

Search, refine, select storyboard

Use this sequence to show how a viewer narrows a result set and chooses one item. The sample dataset stays stable so every list change follows a visible input.

By AnimroUpdated 2 min readAI-assisted · independently agent-reviewed

Who this is for: Teams explaining search and filtering.

What to prepare

  • Verified query behavior
  • Consistent sample records
  • Active-filter state
  • Selected-result detail

Scene-by-scene storyboard

30-second planning sequence · illustrative copy and visual direction

  1. 01

    0–5s

    Establish the search scope

    Show Sample documents with existing filters cleared or explicitly visible.

    On screen:Find an open packaging document

  2. 02

    5–10s

    Enter the query

    Enter packaging using the observed submission behavior; preserve the field and scope.

    On screen:Search: packaging

  3. 03

    10–15s

    Inspect initial matches

    Show Packaging review, Packaging archive and Packaging notes with their sample statuses.

    On screen:Three illustrative matches

  4. 04

    15–20s

    Refine by status

    Apply Open through the real filter control and keep the active chip visible.

    On screen:Status: Open

  5. 05

    20–26s

    Choose one result

    Show Packaging review and Packaging notes remaining; open Packaging review using supplied behavior.

    On screen:Inspect Packaging review

  6. 06

    26–30s

    Confirm the destination

    Hold the matching detail heading and Open status.

    On screen:Packaging review · Status: Open

Make it your own

Query and scope
Use an exact query with verified matching behavior and starting folder or workspace.
Sample records and statuses
Replace all initial and filtered records consistently so the stated count and Open condition remain correct.
Refinement behavior
Supply the actual filter control, apply step and selected-result navigation.

Prepare the result chain

Supply verified search semantics and matching initial, queried and filtered states. The fictional archive is Closed while the other two matches are Open. Use these values only if the actual sample workspace can reproduce them.

Adapt the refinement

A date, category or owner filter can replace status when its meaning is clear. Keep one refinement in the introductory cut. For a 60-second tutorial, show clearing the filter and explain the restored result set.

Review scope and count

Confirm that three displayed rows really support the chosen count, including pagination. Keep query and filter labels available during result inspection. Do not infer ranking logic or response speed from this edited storyboard.

Review checklist

  • Each result change has a visible cause.
  • The active filter stays readable.
  • The selected item matches the detail view.
Explore product demos & ui ↗