SaaS Empty State Design: 9 Patterns That Drive Activation
Good SaaS empty state design might be the highest-ROI thing your product team is ignoring.
Think about the first time a user logs into your product. The dashboard loads. There’s no data because they’re new. Just a screen that says “No projects yet” and a small button somewhere. They sit there for two seconds, maybe three. Then they close the tab. Whatever you spent on acquiring that user gone.
That moment is an empty state. And it’s one of the most leveraged design surfaces in your entire product, because it sits at the exact friction point between sign-up and activation. Get it right and users find their footing fast. Get it wrong and you’re losing users you already paid to acquire.
This post covers nine patterns we’ve seen actually move the needle. With named examples from Slack, Notion, Webflow, Dropbox, and Spotify. Skip to whichever empty state you’re stuck on.
Skip to a pattern
First-time dashboard · Demo data · No search results · Completed task list · Error/404 page · Locked/upgrade · Filtered to nothing · Loading state · Permission denied
What counts as an empty state (and why it matters)
An empty state is any screen, panel, or component that exists in your product but currently has no data to show. First-time dashboards. Empty inboxes. Search queries that returned nothing. A list with all items completed. A permission-denied page.
Most teams treat these as edge cases. They’re not. They show up at the highest-leverage moments in the user journey usually when the user is most uncertain about whether your product is worth their time.
Designed badly, they tell the user the product is broken. Designed well, they’re a teaching surface, a personality moment, and a conversion lever all at once.
The four parts of a good empty state
Before getting into the nine patterns, here’s the anatomy. Every empty state worth shipping has these four elements. Some have all four explicitly. Some bake one or two into the others. None skip them entirely.
1. A headline that explains why it’s empty
Not “No data found.” Not “Empty.” A headline that tells the user what this screen is and why nothing’s here yet. Slack’s empty workspace doesn’t say “No channels.” It says “You’re in. Let’s create your first channel.”
2. A line of supporting context
What is this screen for? What will it look like once it has data? Two sentences max. Most teams skip this and the empty state ends up feeling cold.
3. A clear next action
One primary CTA. Not three. The user just landed here give them one obvious thing to do. “Create your first project,” “Connect a data source,” “Invite a teammate.”
4. Optional: an illustration or visual
Optional means optional. A good illustration adds personality. A bad one fills space without earning it. If you can’t make it work in two days, ship without it. The headline and CTA are doing the actual work.
9 empty state patterns and when to use each
These are the nine most common empty state contexts in a B2B SaaS product. Each has a different goal. Each calls for a different design choice.
1. The first-time dashboard
When: A new user logs in and your dashboard has no data because they haven’t done anything yet.
This is the highest-stakes empty state in your entire product. It’s the moment users decide whether your product is worth their time. Webflow nails this the first-time dashboard puts a giant “Create new site” CTA in the center of the screen, with everything else dimmed. There’s no decision to make. The user knows exactly what to do.
The rule
Strip the screen to one action. Make that action visible from the first pixel. If you have multiple CTAs, you don’t trust your own product enough.
2. The pre-populated demo state
When: Your product has a steep learning curve and users won’t get value until they’ve connected real data.
Instead of an empty dashboard, drop the user into a demo. Sample data, sample charts, sample everything clearly labeled as a demo so it’s not deceptive. The marketing automation tool Autopilot saw their trial-to-paid conversion jump after they let users explore demo journey templates before committing real data. Users don’t have to imagine what the product can do. They see it doing the thing.
The rule
Use demo data when the product’s value is hard to explain in a tooltip. Always label it clearly so users know what’s real and what isn’t.
3. The no-search-results state
When: A user searches and nothing matches.
This is where most products give up. “No results found.” Period. Slack does it better a search with no results offers two clear paths: refine the search, or jump to the channel directory. Every dead-end empty state should feel like a hallway with three doors, not a wall. Suggest spelling fixes. Surface broader matches. Show recent items. Anything but a brick wall.
The rule
Never let the user feel stuck. Always offer at least one alternate route from a no-results screen.
4. The completed task list
When: The user has cleared their inbox, finished all their tasks, or otherwise reached “zero.”
This is a good empty state. Don’t ruin it with corporate language. The classic example is “Inbox Zero” celebrations the empty state should reward the user for getting there, not feel sterile. A short, warm message and maybe a small illustration. Not a wall of text reminding them to invite teammates or upgrade their plan. Don’t punish completion.
The rule
Match the tone to the moment. Finishing something feels good. Your design should feel that way too.
5. The error / 404 state
When: Something broke or a page doesn’t exist.
Errors are emotionally negative. A good empty state for errors does three things: explains what went wrong in plain language, offers a way out (back to home, contact support, retry), and maintains personality without being flippant. Dropbox’s 404 is a good model clear illustration, friendly headline, three options for what to do next. Not a stack trace. Not a one-liner that helps no one.
The rule
When something breaks, the empty state’s first job is to make the user feel like a person, not a bug ticket. Give them a path forward.
6. The locked / upgrade state
When: A user tries to access a feature gated behind a higher plan.
This is the trickiest one because it’s also a sales surface. Done badly, it feels like a trap. Done well, it’s a graceful upgrade prompt. Spotify’s six-skip limit handles this well the warning shows up before the user hits the wall, framed as a discovery moment rather than a punishment. Show what’s possible at the next tier. Make the upgrade feel like an invitation, not a paywall.
The rule
The locked state should sell the next plan, not punish the current one. Lead with what they’d unlock, not what they can’t do.
7. The filtered-to-nothing state
When: A user applies filters that return zero matches.
Different from no-search-results. This one is about filter combinations the user actively chose. The fix is straightforward show which filters are active, make it one click to remove the most restrictive one, and surface the closest match if you can. Linear and Notion both handle this well: the filter chips are visible, individually removable, and the empty state suggests which one is probably the culprit.
The rule
Make the user’s chosen filters visible and one-click removable. The empty state should diagnose its own cause.
8. The loading state
When: Data is on its way but hasn’t arrived yet.
Technically not always an empty state, but it sits in the same psychological space — the user is staring at nothing, wondering if the product is working. The right move is skeleton screens (placeholder shapes that mimic the layout that’s loading) rather than spinners. Skeletons make the wait feel shorter because the user sees structure before content. Spinners just make people stare at a spinner.
The rule
Use skeleton screens for anything over 500ms. Spinners are fine for instant interactions; nothing else.
9. The permission-denied state
When: A user tries to access something their role doesn’t allow.
Permission errors feel like getting yelled at. Most products do this badly — a stark message, no context, no path forward. The better version explains why the permission is missing (your role doesn’t include X), names the action that would resolve it (ask your admin, switch workspaces), and links directly to that action where possible. The user should never have to figure out who to email.
The rule
When a user doesn’t have permission, name the next person they should talk to. Don’t just shut the door.
How to pick the right pattern
Three quick questions:
- Why is the screen empty? (User is new → first-time pattern. Search returned nothing → no-results pattern. User finished → completion pattern.)
- What does the user need next? (Take an action → primary CTA. Understand why → explanation. Recover from a mistake → escape route.)
- What feeling should the screen create? (Excited to start → demo data. Reassured → friendly explanation. Rewarded → completion celebration.)
Five empty state mistakes we see weekly
1. The default “No data found” message
If your empty state could appear in any product on earth without changing a word, you didn’t design an empty state. You hid one. Replace generic copy with something specific to what the screen does.
2. Three CTAs competing for attention
First-time empty states should have one CTA. We’ve seen products with five buttons on a single empty screen. The user picks none of them. Pick the action you most want the user to take and make every other CTA disappear or shrink.
3. Using empty state to upsell new users
Locked-feature empty states are fine for upgrade prompts. First-time empty states are not. A new user who sees a paywall before seeing value bounces. Save the upsell for after activation, not before.
4. Skipping mobile entirely
Empty states tested on a 1440px desktop look terrible on a 375px phone illustrations crowd out the CTA, headlines wrap awkwardly, the primary action ends up below the fold. Test every empty state on mobile first. If it doesn’t work there, redesign it.
5. Forgetting empty states exist in non-onboarding contexts
Most teams design the first-time dashboard well and ignore every other empty state. Then a power user filters down to nothing and hits a 2014-era “No matches” screen with no recovery path. Audit every screen in your product for empty states. There are more than you think.
Where to start this week
Don’t try to redesign every empty state at once. Pick the one that matters most:
- Audit the first-time dashboard. Sign up as a new user. Take a screenshot. If it doesn’t have a clear single primary action, you’ve found your highest-leverage fix.
- Search your product for nothing. Type “asdfasdf” into the main search bar. Whatever shows up that’s another empty state most products handle badly.
- Filter to zero. Apply enough filters in any list view to return no results. The recovery path you see (or don’t see) is your filtered-to-nothing empty state.
Three audits. An hour each. By Friday you’ll have a list of empty states that are quietly costing you activation and you’ll know exactly which ones to fix first.
Want a fresh look at your empty states?
We’ll audit your first-time experience and the three empty states that most affect activation. Show you what’s silently killing conversion. 30 minutes, no pitch.
FAQ
What is an empty state in SaaS UX?
An empty state is any screen, panel, or component in a SaaS product that exists but currently has no data to display. Common examples include a new user's first-time dashboard, a search query that returns no results, a completed inbox, a filtered list with zero matches, or a 404 error page. Empty states matter because they appear at high-friction moments usually when the user is most uncertain about whether your product is worth their time.
What's the difference between an empty state and onboarding?
Onboarding is the entire journey a new user takes from sign-up to activation. An empty state is a single screen the user might encounter during that journey (and beyond). Empty states often play a role in onboarding the first-time dashboard is technically an empty state but they also appear long after onboarding ends. A search with no results, a permission-denied page, and a filtered-to-nothing list are all empty states unrelated to onboarding.
Should every empty state have an illustration?
No. Illustrations are optional. They add personality and visual interest, but they're not what makes an empty state work. The headline, supporting context, and primary CTA do that. If a great illustration takes weeks to produce or doesn't fit your brand, ship without it. A clean text-and-button empty state outperforms a beautifully illustrated one with unclear messaging every time.
What's the most common empty state mistake?
Generic copy like "No data found" or "Empty." If the same message could appear in any product on earth, you didn't design an empty state you defaulted out of one. Specific copy that explains why the screen is empty and what the user can do next outperforms generic messaging consistently, regardless of how the rest of the screen is designed.
Should I use demo data for the first-time dashboard?
It depends on your product. Demo data works well when your product's value is hard to grasp without seeing it in action analytics tools, marketing automation, complex dashboards. It works less well when users need to feel ownership of the workspace immediately. The trade-off is between "show what's possible" (demo data) and "yours from day one" (clean dashboard with one clear CTA). Test both with real users before deciding.
Shah
UX Specialist & Product Designer
Shah 
