Can you UX designers improve your product’s blank slate UI design and drive more engagement?

Getting users started on a blank slate is a great way to go, but if designed badly, it could lead to poor user experience and overall confusion.

Add the right UI elements, and it becomes an effective way to communicate your product quickly.

In this article, we’ll show you why designing engaging first-time experiences is important, how to apply this to your product’s empty state, and some of the best examples out there to inspire you.

Let’s get started.

Summary of blank slate UI design examples

• A blank slate UI is the term used to describe the default state of an app or website that has no data.
• Take advantage of a blank slate to showcase your product, reduce frustration, and decrease time to value for a higher retention rate.

Here are a few things to keep in mind when designing them:

• Use a blank slate to showcase your product in action and set expectations.
• Insert quick tutorials like microvideos, tooltips, or modals to guide users in-app.
• A sample screenshot gives a user an idea of how other people are using the product.
• Add demo data to populate the interface of a complex app with use cases.
• Use a blank slate design that prompts a user to take a specific action.
• Include a warm, friendly message on your welcome screen to welcome new users and get them started, like Slack.
• Avoid cluttering your blank slate UI with unnecessary elements. Instead, use it to direct your users to take one action.
• Break down tasks into smaller actions with checklists.
• Use a simple checklist to encourage users to take action.
• Want to create a better product experience code-free? Book a demo call with our team and get started today!

What is blank slate UI?

A blank slate UI is an empty screen or white canvas in the default state of a web app. This usually happens when a user logs in to your product for the first time and there is no data in the platform to fill specific web pages.

To understand this better, take a look at this screen from LinkedIn. At a glance, you can tell it lacks visual elements and does not provide a clear direction for users to proceed.

This boring approach leads to users getting confused before experiencing the full product value.

What should you include on a blank slate to avoid empty screens?

Take advantage of the blank slate to showcase your product and set expectations, reduce user frustration, and decrease time to value. These, in turn, will drive a higher retention rate.

But what can you include on an empty state screen? Here are four things to consider:

1. Showcase your product and set expectations: if your product is a video tool, then creating an onboarding video with your product is a great idea to showcase your tool and trigger an Aha moment for the user.
2. Insert quick tutorials: Instead of leaving users on their own, guide them with tutorials. These could be with microvideos, tooltips, or modals.
3. Use a sample screenshot: Displaying a sample screenshot from a project shows the product in action. This will give the user an idea of how other people are using your product, and how they can too.
4. Add demo data for more complex apps: For complex apps, demo data helps to set the right expectations. The longer it takes to collect or add data, the longer it will take for the user to experience value.

Now let’s go over some examples of how you can apply the above.

Blank slate UX design examples that prompt user action

For users to take action, they need a nudge in the right direction. This includes showing them the next steps to take when interacting with your UI.

Take inspiration from the examples below on guiding users to take action.

Userpilot

There are two ways to get quick value with Userpilot:

1. The ”full install” way: install the JS snippet, and the Chrome extension builder, then create a flow directly in your app to see it live.

2. The ”shortcut”: install the Chrome extension builder and start building. You won’t be able to see your flows live inside your app, of course, but it’s an easy way to see the tool in action, and get value.

Userpilot’s empty state is focused on the above, prompting users to take action by installing the JavaScript code first. Then, a checklist pops up to walk users through experiencing the value of the product.

Slack

Slack uses the blank slate to welcome users, reinforce their messaging, and connect people to their brand with a friendly voice.

Could they have skipped this? Sure.

But including a warm message is a nice way to offer a personalized welcome and get customers started with one simple button.

Hotjar

Hotjar focuses on one action in their blank state UI. And that’s the one needed for the tool to work—installation.

It’s nice how they blurred the dashboard in the background to direct the eye of the user to one element. You get a glimpse of what to expect but still have your attention drawn towards installing the code—since Hotjar is useless without it.

ActiveCampaign Checklist

ActiveCampaign uses one of the most complex checklists in its onboarding flow. To make it simpler, they divided it into sections with instructions and multiple CTAs for learning and action.

Notice how they also included progress bars and checkmarks to encourage users. It’s all about action here.

Fullstory prompts you to install the Javascript

Without installing the snippet code, there’s not much one can do with Fullstory. And so, to help users get it right, they offer multiple ways of doing it with instructions.

For example, the highlighted snippet is for the Squarespace website. Which they probably recognized based on the URL provided during the signup process.

It’s a nice way to personalize the experience and remove steps from getting to value.

Productboard

It’s easy to see that there’s a lot going on here but in a good way. For example,

1. The progress bar displays the number of steps in the flow. With this you can get started by seeing where you need to go, and how far away you are.
2. There’s a checklist of tasks. By dividing the tasks into short actions, users can complete each task without getting overwhelmed.
3. Notice how there’s a clear differentiation between the 3 plans and the choice to explore each.

Airtable

Airtable used to have a more complex empty screen with templates and a lot of actions. Now, they have only one. If you push users to do everything or give them too many options, it can result in no action.

With their new approach, it is easier to get users to take action. Their new approach is clean and has fewer steps that users can easily complete.

Mixpanel

Mixpanel uses demo data as an alternative, but the main action they want you to take is to connect your data.

Without it, you can’t see the value of the product, since this is a product analytics tool.

They use the empty state to offer multiple options to connect your data.

Trello

Trello takes different approaches based on the account type.

The free account focuses on simplicity and demo content. The premium account, however, pushes users to take action with a checklist that focuses on building a team, integrating other apps and exploring advanced features like automation.

Not being free means you want users to see the value fast, and building a board can be done on the free plan too. So their focus is on bringing your work into the platform and start building.

Innvision

When there’s nothing to show, add options for users to get started. This is what Innvision did in their empty state. They displayed templates and help guides for users, in case they’re not ready to start right now.

Blank slate UX design examples that showcase the product

Nothing excites a new user more than seeing a product in action. When you can showcase your product from the first screen, this is the best way to get users to experience a quick Aha moment.

Here is some inspiration on how to design a blank slate UI design that does just that.

Notion

Notion displays a brilliant checklist to showcase their product in action. The checklist is a series of tips, but it also shows what one created with the tool will look like.

Plus, they mixed this with an onboarding video to help users get started. Observe how each microvideo is divided into sections for people to understand what’s happening faster.

Todoist

Want to showcase your product in a creative way? See how Todoist showcases their product to prompt action.

It looks like a checklist, but it was built using the product itself instead of the standard modal and slideout checklists we see in most SaaS products.

Asana

Instead of seeing a blank screen, you get a simple board with personalized data.

Asana uses the data collected during the signup to personalize your dashboard for the first time, so you don’t have to start from scratch.

Miro

Miro is all about personalization at every step. They learn about their users based on their choices during the onboarding process.

Then, they show users relevant templates for a quick start.

For example, when you choose strategy and planning, you get to see this modal next.

If you dismiss it, you are welcomed and invited to take a quick tour to showcase getting started with quick tutorials.

And if you just want to skip and get to the main dashboard, it won’t be empty either. Your template will be there, plus a checklist and your first board (the one from the previous step, already created).

H2 Blank Slate UX design examples that use quick tutorials

Fill your blank slate interface with quick tutorials to guide users as they learn about your product. Use microvideos, tooltips, or modals to display the right help at the right time when the user needs it.

Mural

Mural prompts users to learn with quick videos. Each video is short, colorful, and focuses on completing one action at a time. Also, notice how they included templates for a quick start.

Loom

Loom combines learning and showcasing their product in their onboarding. It makes sense, as Loom is a video tool. After recording a few videos, you’ll notice that your dashboard will look similar to the one on the empty screen.

The blank slate is full of videos, showing exactly what the empty state looks like. But the videos here serve as learning experiences to get users to start.

Linkgraph

Being a complex SEO platform, Linkgraph uses a lot of quick tutorials to help users understand each section of the app. But with so many videos on display at once, it can be a bit overwhelming.

What they could have done differently was focus on a different display and show one video per section. This would have decluttered the UI and made it easier for users to start.

Blank slate UX design examples that use demo data

Demo data is made-up placeholder customer data to get users to understand the product value, fast. In many cases, when we first start using an app, there is no real customer data to work with.

This can be challenging, especially for new users exploring a complex tool.

Trello

We’ve seen the experience for premium accounts at Trello with the checklist prompt. But when you sign up for a free account, you get prompted to either create a board or check the welcome board.

The welcome board is filled with demo data meant to showcase the product in action and help you see the value of the web app.

Mixpanel

As a complex tool that requires data before a user can see the value, Mixpanel does a great job of delivering value fast with demo content. A user might be skeptical about connecting their data sources while testing the product because of the effort involved in case the tool doesn’t work.

Or they might not have any data yet.

Demo content works great for complex products as it shows the user how the product will help.

Basecamp

Basecamp creates a mixture of prompting users to take action and displaying sample data on their blank slate UI.

Look closely at the screen, and you’ll see that there’s a lot going on here, which can be overwhelming to the user. They could have stuck to creating a simpler view to help users get started quickly. Maybe eliminating some of the elements to help simplify the screen.

The sample dashboards, however, do help. If you click on them, they give you a more simple view of what you can achieve with the product.

Conclusion

Boring empty states is a major user experience mistake that can turn users off before they experience the actual value of your product.

Fortunately, the blank slate UI design can be an effective way to overcome this, as long as it is implemented properly and not cluttered. Blank slate UIs are great for helping people understand how to use your product and move through your value proposition quickly and easily.

Want to create a better product experience code-free? Book a demo call with our team and get started today!