SaaS Empty State Design: Turning Blank Screens Into Conversion Moments

Empty states are the most underdesigned part of most SaaS products. They receive two sentences of UX attention in a sprint that spends two weeks on the populated experience. And yet empty states are often the first thing a new user sees, and the most critical moment in determining whether they take their first meaningful action or leave.

This is not a small problem. A new user's first session is almost entirely spent in empty states. Getting them right is one of the highest-leverage design improvements most product teams are not making.

What an empty state is actually doing

Every empty state is doing one of two things. It is either helping the user understand what belongs in this view and take the first step toward filling it, or it is creating uncertainty that results in the user leaving without taking any action.

An empty state that says no data yet or you have no projects is doing the second thing. It tells the user that there is nothing to show but gives them no clear guidance on what to do about it. The user who lands here either already knows what to do or they do not. If they already know, the empty state is irrelevant. If they do not, the empty state has failed them.

A well-designed empty state does something more ambitious. It shows the user what this view will look like when it is populated. It gives them a specific, visible action to take their first step. And it optionally provides sample data so they can experience the populated version before committing their own information. It converts uncertainty into direction.

The three types of empty state, and what each one needs

Not all empty states are the same. The design should reflect which type of empty state it is.

First-use empty states appear the first time a user lands on a view. They are the most critical because they occur during the highest-stakes moment of the user journey. First-use empty states need the most detail: a clear explanation of what belongs here, a compelling reason to fill it, a prominent primary action, and ideally a preview of what the populated view looks like. Sample data or a template that pre-populates the first item is often worth the engineering cost here because the activation impact is highest.

Cleared empty states appear when a user deletes all their content in a view. The user is experienced enough to have had content here. They do not need the full explanation. A clear primary action and possibly a reminder of what they can do here is usually sufficient. The tone can be lighter and less instructional.

User-generated empty states appear when a user navigates to a part of the product they have not used before. The right design is similar to a first-use empty state but calibrated to the assumption that the user is familiar with the product in general. Skip the high-level explanation and focus on what is specific to this view.

Sample data: the most underused activation lever

The argument for sample data in empty states is simple: users who can see what the populated product looks like are more motivated to set it up than users who see a blank screen. A blank screen communicates nothing about value. A populated dashboard that clearly represents what the product can show you when it is working makes the value tangible.

According to Nielsen Norman Group's research on mental models, users rely heavily on visible examples to understand how a system works. Sample data provides that visible example at the exact moment when a new user is trying to form a mental model of the product.

The implementation detail that matters most: make it unmistakably clear that the data is sample data. Sample project, example task, demo workspace in the UI is enough. Users who mistake sample data for their real data have a confusing experience. Users who understand it is sample data and can see what the product looks like when populated have a much better first session.

The primary action: one clear path forward

Every empty state should have exactly one primary action that represents the most valuable first step a user can take from this view. Not three options. Not a carousel of suggestions. One clear action that gets the user from blank to something real.

The action should be visually prominent, labelled with what it does rather than what it is, and positioned where the eye naturally goes after reading the empty state explanation. Create your first project is better than new project. Add your team is better than invite. The label should make the action feel accessible and consequential rather than technical.

A secondary link for users who want to learn more before acting is legitimate. It should be visually subordinate to the primary action. The goal is to make the primary action the obvious choice, not to provide equal-weight options that create decision paralysis.

Measuring whether your empty states are working

The metric to watch is action rate from empty states: the percentage of users who see an empty state and take the primary action within that session. If the action rate on a critical empty state is low, the empty state is not doing its job.

Low action rate can mean the explanation is unclear, the primary action is not visible or compelling enough, or the sample data or preview is not sufficient to motivate action. Session recordings are the fastest way to diagnose which problem is causing the low action rate.

How Studio Maydit approaches empty state design

We treat empty states as first-class product design work, not as afterthoughts to polish after the populated states are complete. For onboarding-critical views, we design the empty state before the populated state to ensure the path from zero to first value is as clear as possible.

If your activation rate is lower than it should be and you have not recently reviewed your first-session empty state experience, that is almost always where the problem is. Book a free 30-minute call with Studio Maydit to talk through what your first session actually looks like and where the friction is.