Notion UI Flows — Design Patterns & Interactions

The AI workspace that works for you

Use as AI Instruction

This flow demonstrates configuring AI instructions within Notion's workspace settings. The user navigates through a tabbed settings interface, accessing the dedicated AI configuration panel to customize how AI features behave. The recording captures the progressive disclosure pattern, where expanding collapsible sections reveals nested configuration options. Auto-transition states smoothly guide users between settings tabs and panels, creating a guided, low-friction settings experience ideal for advanced feature customization.

Smooth — auto-transitions between states, instant tab switching, progressive disclosure of options.

  1. Open workspace settings
  2. Navigate to AI settings tab
  3. Expand AI instruction section
  4. Configure instruction parameters
  5. Confirm AI settings changes

Insert into page

This recording demonstrates Notion's block insertion workflow—a core content creation pattern where users access a searchable command menu to add rich content types to their page. The flow showcases modal dialogs, auto-transitioning states, and lazy-loaded block previews. Designers can study how Notion surfaces block discovery through intuitive menu hierarchies, reduces cognitive load via progressive disclosure, and maintains smooth visual feedback during insertion. Key patterns include palette invocation, filtered search, and asynchronous content rendering.

Snappy—instant menu reveal, seamless auto-transitions, no confirmation friction.

  1. Open insert block menu
  2. Auto-transition to block options
  3. Select or search block type
  4. Auto-transition to preview state
  5. Block inserted into page

Rewrite Feedback

This recording demonstrates Notion's AI-powered content rewriting workflow, showcasing how users interact with the Rewrite Feedback feature. The flow captures the seamless integration of generative AI feedback within the document editor, including text selection, AI suggestion panels, and quick-apply interactions. Designers will observe modal transitions, state management during content transformation, and the UX patterns for accepting or rejecting AI-generated alternatives. This pattern is essential for understanding AI-assisted editing workflows, contextual tool discovery, and real-time cont

Responsive — instant AI suggestions, smooth modal transitions, immediate feedback on rewrite acceptance

  1. Open document content in editor
  2. Select text needing revision
  3. Trigger AI rewrite command
  4. Review generated alternatives
  5. Accept or reject suggestion
  6. Confirm changes to document

Inline Rewrite (Reformat)

User invokes Notion's inline AI rewrite feature to reformat selected content, triggering a command palette with contextual writing options (Proofread, Explain, Reformat). The AI generates alternative text asynchronously, streaming results into a live preview panel. User reviews the AI-generated output and accepts or rejects the suggestion, with the rewritten content either replacing the original or discarding the edit. This demonstrates progressive AI-assisted content editing with explicit acceptance gates and undo capability.

Snappy — inline edits preview in real-time, accept/reject gating prevents accidental commits

  1. Select text and open AI rewrite options
  2. Choose Reformat from writing suggestions menu
  3. Review AI-generated content and accept changes

AI Response Feedback

User interacts with Notion's AI response feedback mechanism within the editor canvas. This flow demonstrates how users evaluate, accept, or dismiss AI-generated content suggestions through lightweight feedback controls. The pattern showcases non-blocking toast notifications, smooth state transitions, and contextual UI updates without page reloads. Ideal for studying AI assistance patterns, real-time feedback loops, and micro-interaction design for content generation workflows.

Instantaneous — immediate visual feedback, automatic state transitions, zero-friction dismissal.

  1. View AI-generated response in editor
  2. Trigger feedback interaction panel
  3. Review generated content suggestion
  4. Toggle acceptance or dismissal state
  5. Confirm feedback submission silently

First Prompt

User triggers Notion AI to generate a task tracker database through conversational prompt. The flow demonstrates AI-assisted content creation where a natural language request automatically scaffolds a structured database with pre-configured views, filters, and automations. After AI processes the request, the system displays token usage metrics and completion status, then seamlessly transitions to the newly created database view. This pattern combines AI chat interfaces, instant database generation, and success confirmation—ideal for exploring generative UI, autonomous scaffolding, and zero-con

Instant—AI generates structure in real-time, no blocking dialogs, immediate database access.

  1. Prompt AI to create task tracker database
  2. Wait for AI generation and token processing
  3. View newly created task tracker database

Log in flow

This recording captures Notion's authentication and login flow, showcasing the credential entry interface where users authenticate via email/password or social providers. The flow demonstrates form input states, validation feedback, error messaging, and submission patterns. Designers can study credential input field styling, button affordance, social login integration, and password recovery options. Relevant for studying authentication UX, accessible form design, credential input patterns, and frictionless sign-in experiences.

Streamlined — instant validation, minimal friction, fast authentication submission.

  1. Enter email address in login field
  2. Enter password and submit credentials
  3. Authenticate and access workspace dashboard