patterns / null

Empty States


Looks like Reports haven't been set up yet

Set it up today to start improving your business through our integrated system.

Empty states can be employed to:

  • Make users aware that a feature is not configured for use.
  • Communicate that there is no data to display.
  • Act as a placeholder for regions in the app left blank intentionally.
  • Convey an error state, like a server response error, i.e., 404 or 500.
  • Display empty search results.
  • Help users onboard and encourage them to interact with the application
  • Prevent users from having to “back up” and go in a different direction


Empty states headlines should be proactive and helpful. Focus on the task ahead that will help them fill the empty state, rather than calling out what’s missing from the screen. Calling out what’s missing can work in description text, but it’s always better to give information about the filled state of the screen.

Bookmark Your Reports

Bookmarked reports will appear here for quick access.

No Bookmarks

You haven't bookmarked any reports yet.

Compared to Banners

Empty states differ from banners in that they are not intended to promote or advertise new features or functionality.

Looks like Reports haven't been set up yet

Set it up today to start improving your business through our integrated system.

Get Reports

Drive higher booking rates, increase revenue, and boost efficiency with a fully-integrated, cloud-based report system.

Compared to Introduction Screens

Empty states differ from introduction screens in the headline wording. They should give the user an instruction. Additionally, introduction screens will often be the first screen after launching a wizard, whereas an empty state would not likely be used in that scenario.

Set Up Your Reports

You can now create reports with rules based on your business needs. No more complex spreadsheets just to keep track of your business health.

Welcome to Your Reports Walkthrough

We will now teach you how to create reports with rules base don your business needs. This walkthrough will take 5-10 minutes.

Types of Empty States

First Time Setup

During the initial onboarding process, the user will encounter a lot of empty states. We should try to make these empty states fun and encouraging with an approachable tone and helpful content so the user feels supported and confident through the set up process. Since these empty states will only be seen once or twice, they can be celebratory and decorative without being overkill.

Educate the User

Sometimes the purpose of the empty state is to teach the user how to fill it by explaining what to do next or using a CTA to link them to a walk-through. Once the user learns how to fill the screen, there’s a good chance it may not be empty again. If it is likely to be empty again, an additional Recurring Empty State may be needed.

  • Keep explanations concise. Any longer than 200 characters and/or 4 lines of text should be made into a help article or walk-through.
  • If linking to a help article or walk-through, be sure to prime the user on what each will entail.
  • Illustrations are encouraged. See Illustrations for more information on how to employ them.
  • Keep the tone friendly and encouraging.
Illustration + Headline + Explanation

Build a Custom Report

Click "Add Filter" in the left column to include or exclude specific characteristics of your audience. You can nest segment logic and have as many segments as you need.

Illustration + Headline + Explanation + CTA

Build a Custom Report

Not sure how to get started? Let us take you through a quick walk-through.