Empty State Design Template for Product Managers

A product with 10 core screens typically has 30-50 distinct empty state contexts when you account for all five types (first-use, no-results, cleared, error, permission) across each screen. Not all need custom illustrations, but each needs at least a headline, body, and primary action. Prioritize the states users encounter most frequently.

Illustrations help for first-use and cleared states where they can show a preview of the populated screen or celebrate an accomplishment. They add visual weight and warmth. For no-results and error states, a simple icon is usually sufficient. Skip illustrations entirely if the team does not have design capacity. A well-written headline and action button are more important than art.

Replace the entire table body with a single centered row spanning all columns. Show the empty state content (headline, body, action) inside that row. Do not show table headers above an empty state for first-use scenarios, as the headers add clutter without context. For no-results states after filtering, keep the headers visible so the user remembers what they were filtering.

Sample data (pre-populated demo content) is effective for features where the value is hard to explain in text. A chart with no data says nothing. A chart with sample data shows the user exactly what they will get. Label sample data clearly ("Sample data. Create your first entry to see real numbers.") so users do not confuse it with their own content. ---