Tutorial screen examples

Flora

Community page where the user browses and starts interactive tutorials and video guides via horizontal carousels.

• Browse
• Templates

Assembly AI App Builder

Blog article providing a step-by-step guide on creating a customer portal, featuring a sticky table of contents and a sidebar call-to-action card.

Lovable

Long-form tutorial article explaining AI prompting techniques, featuring a sticky table of contents, code examples, and a bottom call-to-action banner.

Paper

List view where the user browses video tutorials and resources to get familiar with the product.

• Browse
• Tutorial

Morphic

Help center article explaining how to use the text-to-image feature, featuring a video tutorial, numbered steps, and a floating cookie consent banner.

Kinsta

Education program page where the user watches a video lesson on Gutenberg block development and navigates through course chapters in a sidebar.

Circleback

Help center article explaining how to record meetings with the desktop app, featuring a top search bar, right-side table of contents, related articles list, and a helpfulness feedback widget.

Capsule

List view for workflow automations showing an empty state with a video guide and a prompt to add the first automation for projects.

• Empty State
• Automation

Workflow

Detail page where an onboarding modal explains the live website browsing feature over a design review interface with a comment thread.

• AI Chat
• Comments

Slite

Onboarding screen where the user completes a getting-started checklist to structure their workspace, import docs, and invite teammates.

• Onboarding Checklist
• Getting Started

Outseta

Onboarding screen where the user follows a step-by-step setup guide to configure their account, connect integrations like Stripe, and invite team members.

• Onboarding Checklist
• Team Management

Mighty

Settings modal where the admin can view a video tutorial on automations and check their remaining trial days.

• Automation
• Settings