A better empty state

A better empty state

Design an empty state for a product screen.

Workflow

1. Identify why the screen is empty: first use, no search results, filtered content, removed items, or an error.
2. Explain the situation in a short, specific heading.
3. Add one sentence of useful context if needed.
4. Offer the most appropriate next action, with a clear button label.
5. Check that the proposed action is available to the current user.

Output

Supply heading, description, primary action, optional secondary action, and accessibility notes. Include variants for first use and no results when relevant. Avoid blaming the user, inventing content, or disguising an error as an empty collection.