Posted July 12, 2025 • Written by Jeremy Ardien

Intro

When I was still in college, I attended an Interaction Design class. There was one test that always stuck in my mind, a simple test to redesign an empty states page and explain why. The reason will change the way we see and design empty states.

This is the exact test.

What are the Empty States?

Before we jump into the problem, we need to understand what we are working on first. Imagine that when you are in a grocery store, you walk into an aisle looking for cereal, and there’s none. Probably you will see a red tag on the price on the counter that says “sold out”. Well, that’s essentially what an empty state is, but for an app or website. Empty states are a condition when you access a digital product and there are no available components to display.

Here are a few examples of empty states:

1. A 404 page will come up if you navigate to an empty website address
2. Google Chrome dinosaur game when there’s no internet connection
3. An empty result in Google Drive
4. Getting started page in Notion.

In the wild digital world, there are usually three different purposes and types of empty states. Let’s talk about those types from our examples above.