Product Growth Report

Empty State Design: Action Prompts Over Blank Pages

Empty state design transforms blank screens into action prompts. Instead of “No data yet,” users see templates, sample data, or guided actions that answer “What should I do first?” Guided empty states increase activation by 30-40%.1 Notion, Airtable, and Figma never show truly blank screens.

Empty State Design
  1. 1
    User arrives at empty view Dashboard, workspace, project list
  2. 2
    Instead of "No data" Product shows actionable content
  3. 3
    User takes suggested action Creates first item from template/guide
  4. 4
    Empty state disappears Real data replaces the prompt
  5. 5
    User continues with momentum First action leads to second

The problem empty state design solves is cognitive paralysis. Users don’t know what to do first. Actionable empty states remove decision friction by providing different types of guidance:

Empty State TypeWhat It ShowsBest For
Action promptSingle clear CTAFirst-time users
Template galleryStarting points to duplicateFlexible tools
Sample dataPre-populated examplesData-driven products
Tutorial overlayGuided walkthroughComplex products

Empty State Components

Every empty state should answer “What should I do first?” with a single, obvious action:

ElementPurposeExample
Clear headlineExplain what goes here”Your projects will appear here”
Benefit statementWhy this matters”Track progress across your team”
Primary CTAOne clear next step”Create your first project”
Secondary optionAlternative path”Import from existing tool”
VisualMake it feel intentionalIllustration, not error

When empty state design works

ConditionWorksFails
Blank screensDashboards, lists, workspacesSingle obvious action only
First actionMultiple possible starting pointsOne clear CTA is enough
Learning curveFeatures require discoverySimple, self-explanatory product
TemplatesContent to show in empty stateNo templates available
Data dependencyProduct empty until user adds contentUsers bring their data (use import wizard)

Best Fit Products

CategoryExamples
Workspace toolsNotion, Coda
Project managementAsana, Linear
Design toolsFigma, Canva
Database toolsAirtable, Coda
AnalyticsMixpanel, Amplitude

Empty State Design Examples

Notion: Template Gallery Instead of Blank Page

Never a truly blank page. Notion (100M+ users) displays a template gallery organized by use case whenever users create new pages. Users duplicate a relevant template and customize rather than starting from zero.2

How It Works

Notion Empty State Design Flow
  1. 1
    User creates new page in Notion
  2. 2
    Instead of blank page, sees template options
  3. 3
    Templates organized by use case (project management, notes, etc.)
  4. 4
    User picks relevant template
  5. 5
    Page populated with structure and examples
  6. 6
    User customizes rather than starting from zero

Lessons

  1. Never show a truly blank page. Blank page anxiety is real. Replace empty states with template options so users always have a clear starting point.
  2. Organize templates by use case. Categories help users find relevant starting points and discover what’s possible with your product.
  3. Make customizing easier than creating. One-click duplication removes friction. Users modify faster than they build from scratch.
  4. Use templates as product education. Each template demonstrates features through example, teaching capabilities while solving real problems.

Airtable: Sample Bases to Explore

Sample bases alongside an empty workspace. Airtable (unlimited databases, 1,200 records free) shows working examples users can explore before building their own, reaching a working database in minutes.3

How It Works

Airtable Empty State Design Flow
  1. 1
    New user creates workspace
  2. 2
    Sample bases appear alongside empty space
  3. 3
    Samples show common use cases (CRM, project tracker, etc.)
  4. 4
    User can explore samples to understand product
  5. 5
    User duplicates and modifies for their needs

Lessons

  1. Let users explore before building. Working examples let users understand your product’s capability before committing to their own project.
  2. Make abstract concepts concrete. “Database” is hard to visualize. Sample bases show exactly what’s possible and how it works.
  3. Use realistic sample data. Generic “Lorem ipsum” feels hollow. Real-seeming data builds confidence and helps users imagine their own use case.
  4. Match samples to common needs. Cover the use cases users actually have, like CRM, project tracking, or inventory management.

Figma: Tutorial Content in New Files

New files aren’t blank. Figma (20M+ users) pre-populates with tutorial content: example shapes, instructions, interactive elements. Users learn by manipulating, then delete the tutorial when ready for real work. Interactive practice beats passive reading.4

How It Works

Figma Empty State Design Flow
  1. 1
    User creates new design file
  2. 2
    File contains tutorial content (shapes, instructions)
  3. 3
    User learns by manipulating example elements
  4. 4
    Tutorial teaches core tools through practice
  5. 5
    User deletes tutorial when ready to start real work

Lessons

  1. Active practice beats passive reading. Users learn faster by manipulating example elements than by reading documentation.
  2. Keep education in context. Learning inside the product, right where users will work, sticks better than external tutorials.
  3. Make tutorials optional. Power users should be able to skip or delete tutorial content without friction.
  4. Highlight key capabilities early. Use tutorial content to surface the features that create “aha” moments.

Choosing Is Easier Than Imagining

The blank screen isn’t ugly. It’s paralyzing. Users stare at empty states and wonder: What should I do? Am I doing it right? Does this even matter? Great empty states answer all three questions before they’re asked. Notion shows templates because “pick a template” is easier than “imagine what you want to build.”

What People ThinkWhat Actually Works
”Add illustrations to empty screens""Remove the first decision"
"Explain what will go here""Show what users can do here"
"Make empty feel less empty""Make first action obvious”

Action Items

  1. Audit all empty states: Sign up as a new user. Screenshot every blank screen you encounter: dashboards, lists, workspaces, reports. Most products have 5-10 empty states. List them all.
  2. Define the ideal first action: For each empty state, what should users do? Not “add data” but specifically: “Create your first project” or “Import your contacts.” One clear action per screen.
  3. Replace “No data” with CTAs: Every “No data yet” message is a missed opportunity. Add a headline explaining what goes here, a benefit statement, and a primary action button. Make the path forward obvious.
  4. Add templates or samples: Give users starting points, not blank canvases. Notion shows templates. Airtable shows sample bases. “Pick a template” is easier than “imagine what you want.”
  5. Find your worst empty state: Filter recordings to users who churned within 24 hours. Where did they land and leave? The empty state with the highest exit rate is your activation killer. Fix that one first.

Footnotes

  1. Toptal, “Empty State UX Design,” 2024. Eleken, “Empty State UX Examples.” 30-40% activation improvement from guided empty states. Users decide within 3-7 days. ↩ ↩2

  2. Notion company metrics, “100 Million of You” blog. Template gallery as empty state strategy. ↩

  3. OpenView Partners, Airtable case study. Sample bases and onboarding approach. ↩

  4. Figma S-1 Filing (2025), UX research. In-file tutorial content approach. ↩

Next: Interactive Sandbox