Back to Tooling Showcase

Product tour

Here's the lay of the land.

Interactive product tour overlaid on a fictional dashboard UI, with 5 sequential tour stops and contextual tooltips.

Workspace

Acme product team

Active projects

12

+2 this week

Open tasks

47

8 due today

Team members

8

2 invited

Activity score

92

+4 vs last week

Recent activity

  • Avery moved Onboarding redesign to In Review2m ago
  • Jordan commented on Pricing audit12m ago
  • Riley added 4 tasks to Q2 launch plan1h ago
  • Sam completed Stakeholder interviews3h ago

Welcome

Welcome to your dashboard. Want a quick tour?

Five stops, takes about a minute. You can leave any time and come back via the Reset tour button.

Demonstration only. The dashboard is static; clicking its elements does not navigate to real surfaces. The tour is the demonstration.

Skill demonstration

How this tool was built

Interactive-product-tour skill in action. Distinguishes tooltip-spam (every button has a tour stop, overwhelming) from one-and-done (tour shows once, never seen again, useless when forgotten) from contextual-when-needed (surfaces help at the moment friction occurs). Frame demonstrates contextual-when-needed at the new-user level: the tour runs once on first visit but the reset button means users can re-enter the tour when they need refresher help on a specific area, not just at first run.

The interactive-product-tour skill walks through the design discipline that distinguishes tooltip-spam and one-and-done tours from the contextual-when-needed pattern. Frame keeps the tour short (five stops), pairs each stop with a single concrete claim, and exposes a reset so users can re-enter the tour when they need a refresher rather than only at first run.

Demonstration only. The dashboard is static; clicking its elements does not navigate. The tour is the demonstration.