Gallery

Design a guided tutorial for first-time users who need to learn how to browse the product catalog or content library. This is not a marketing walkthrough; it should teach the core browsing model directly in the UI: where to start, how to move through categories, how to narrow results, and how to open an item without getting lost.

Use the real interface as the lesson surface. Show the navigation pattern, the search entry point, category or section switching, filters, and the content grid or list. Each step should point to one action only, with short copy that explains why it matters and what happens next. Keep the tutorial anchored to the area being explained so the page still feels usable while the guidance is visible.

Include a clear step count, back/next controls, and a skip option from the first screen. If the user dismisses the tutorial, they should land in browsing with no dead end. If they complete it, show a brief confirmation and return them to the same place they left off.

Design for interruption and recovery. The user should be able to continue browsing with the tutorial open, close it at any time, and resume without losing context. Treat the tutorial as a helper layer, not a separate product tour.