Empty states: the screen every SaaS product forgets to design
6 November 2026 / 3 min read
Open a new SaaS product and you will often meet a blank table, a chart with no line and the words "No data." That is the empty state, and for a new user it is the first real screen. It is usually the least designed one in the product.
It matters because a new user arrives with no data, little context and a short attention span. What the screen says decides whether they take a first action or close the tab.
Empty states are not one screen
Most teams treat the empty state as an extra screen, something to fill in at the end rather than a screen a person will really see. That is the commonest mistake we run into, and it costs products a lot of useful detail. There are several empty states, and each has its own job:
First use. A new account with nothing in it yet. Show what this place will become and give one clear way to start.
No results. A search or filter that returns nothing. Say what happened and offer a way out.
Cleared. The user finished or emptied everything. Confirm it, then get out of the way.
Expired or lapsed. Something that used to be there has stopped. Say what changed and what to do about it.
An example from our own work: Kriya Core
We have been designing Kriya Core, a gym management platform that we are building. It is not live on our site yet, but its empty states make a good example. Three of them matter most:
No members yet. What the app looks like before a gym has added anyone.
An expired member. What the screen looks like when a member's membership has run out.
The system itself expiring. What the gym sees when its own subscription is about to lapse.
Before we designed them, the product had almost no empty states. Screens started from an arbitrary number, a 1 or a 10, that meant nothing to the person looking at it. Fixing that was the biggest improvement. In the other states, the problem was clarity. The earlier designs did not say enough about what had happened.
How the user knows what to do next
We make the next step obvious through the content and through where the call to action sits. Placement does most of the work. A person should never have to search the screen for the way forward.
Onboarding is a big part of this in Kriya Core. The empty states double as an introduction: they show how the system works, what it does and what it lets the owner do. A first-use screen that only says "nothing here" wastes the best moment you will have to explain the product.
What a first-use screen needs
One plain sentence about what will live here
One primary action, not three
A preview, sample or illustration of the filled state, so the screen is not a void
A route to help or to import existing data, for people who do not want to start from zero
The preview matters more than it looks. A user who can picture the finished screen understands why the action is worth taking.
Mistakes we keep seeing
"No data" with no next step
A cheerful illustration standing in for a button
One message for both "nothing yet" and "nothing matches your filter"
Empty states that vanish after the first entry, so users forget where a feature lives
Asking for five things at once instead of choosing one
What we would add next
We would not change the three Kriya Core screens today. Once many gyms use the product every day, we expect to add tutorial screens to the empty states, so a person can go straight from the empty screen to the right tutorial and find what they need without leaving the product.
How to tell it is working
Track the share of new accounts that take the primary action in their first session, before and after a change. That one number tells you more than opinions about the illustration. If you can, test two wordings of the action button. Small changes to a button's wording often move behaviour more than visual polish.
Designing the first-run experience of a product? Our mobile app and product design page covers how we approach it.
Related services: custom development and integrations, web design and digital platforms.
