UI design for empty states, zero data, and on-boarding

Published in

Rareview

7 min readSep 21, 2016

As UI and UX designers, we typically focus on designing screens and parts of Websites and Applications that contain large amounts of data. This is a natural focus because users spend most of their time inside our applications interacting with data. However, the empty state, or zero data state — as well as the onboarding process often get ignored until the app is nearly compete and someone realizes that when no data exists, the app simply displays a blank screen. Or, you notice that when a user first signs up, they are just thrown into the app without much instruction at all. Both cases are less than ideal.

A zero data world is a cold place. When first time users look at your app and all it does is show a blank slate without any guidance then you’re probably missing out on an opportunity.
goodui.org

There are various ways to onboard a user and several types of empty states — such as first use, user cleared, and errors; and each one deserves design and thought consideration. However, we’re going to focus on first use here (and how that correlates to onboarding) because that is an opportunity to show your users how to get started using your app in a constructive and efficient way. The alternative of course, is sending the user directly into your app after signup to a blank slate and letting them figure it out on their own — which is not ideal.

We’ve used several methods in many of our apps and what we have found is that when you guide the user through an initial visit, adoption rates are much higher and the user feels more confident using your app. Therefore, theperceived value of your app is much higher.

To illustrate this effect and some variations on what you might do, let’s take a look at our project management application Projecturf as an example case study to demonstrate the value of first use empty states and onboarding a new user.

The Empty State

Like most designers, when we first designed the latest version of Projecturf we focused on the overall structure, visual design, and how to interact and manage data. What we neglected to think about was what the user would see the first time they sign up and enter the app. We ended up having the user go from the Website sign up form straight into an empty dashboard in the app. We did nothing to guide the user down a path that would make the app easier to use and point out the value of certain elements within the app. The user was left to fend for themselves on an empty screen; aimlessly clicking around while we hoped they would “figure it out” — not good.

We quickly added some handwritten text with an arrow to point the user to the spot on the screen where they create a new project and we put a little message in the middle of the screen that told the user to add some data. This was an improvement, but not quite the adoption boost we were hoping for.

Projecturf’s empty dashboard has an icon and text in the middle of the screen to tell the user how to add data

Welcome Screen

Once we figured out that this is not the best way to convert someone from a trial to a paid user who understands how to use the system, we decided to add in a Welcome screen that pointed out certain features of the app quickly. Again, this was another improvement, but not enough to actually aid the user in figuring out how to really use Projecturf effectively.

Example Data

So, we decided that we should actually show the user how to use Projecturf. We loaded the app with a sample project. All sections in the project were enabled and sample data was put in so that the user would see what a project looked like and how you might use the system to manage projects and tasks.

However, we found some issues with doing this. The user would sometimes simply delete the sample project so they didn’t have fake data in their account. Or, since they didn’t create the project themselves, they still had to surf around and figure out what data was created for them, where it was, and what it meant.

Guided Setup

The final evolution of our process to deal with the empty states and onboarding was creating a guided setup for the first time user. This has increased conversion rates by as much as 30–40%. Here’s what we’re doing.

The user signs up on our website and instead of being thrown directly into the app, they are sent into our setup screens.
The user walks through a 3-step process where they create their first project, add at least one task, and invite others to the project. Our usage statistics and research have shown that managing tasks is one of the most used functions of our software and as more people are added to the app to collaborate, the long-term retention rate of that customer for Projecturf increases accordingly. So we are showing a user how to use the app now by requiring them to take some of the most important steps to getting Projecturf setup and running. This is really important — not only does it get data into they system, but it trains the user to do certain things before they even get inside the app (Twitter has a similar approach which is shown below in the screenshots).
Once the setup is complete, the user is sent into the app and it’s now setup and ready for use. The project they created is there, tasks exist, and co-workers have been invited.
The Dashboard is empty because no real activity has occurred yet, so we still tell the user what to do next using a simple icon and text on the screen to deal with the empty state.

Projecturf onboarding step 1 — telling the user a few tips about the app.

Projecturf onboarding step 2 — forces the user to create a new project and asks them to invite collaborators to show the importance.

Projecturf onboarding step 3 — forces the user to create at least one task since that action establishes a baseline for how to interact with the app.

This has been a very interesting process and from a design-perspective, it’s important to realize the value in onboarding a new customer and dealing with empty states and zero data. Usage and adoption rates will increase — and that’s good for business!

More Examples

We’ve collected some more screens and examples of empty states and zero data below. This gives you a good idea of what other apps are doing. It’s food for thought on how you can improve your empty states and onboarding processes.

goodui.org shows the value in telling the user to do something when no data exists.

During Twitter’s onboarding process, the user must follow at least 5 people to continue, which instills the purpose of Twitter from the start (following and sharing).