8 blank state examples you can use to improve user experience during onboarding

20
8 Blank State Examples You Can Use to Improve User Experience During Onboarding

Upload: eduard-chilcos

Post on 14-Apr-2017

190 views

Category:

Design


0 download

TRANSCRIPT

Page 1: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

8 Blank State Examples You Can Use to Improve User

Experience During Onboarding

Page 2: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

Having analyzed the pricing strategies of 100 SaaS companies, today we’re picking 20 of them to analyze their blank state pages.

Having looked at all of them in details, we found eight main categories:

Page 3: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

1. Dashboard filled with default data: AcuityScheduling2. Dashboard filled with sample data: Groove3. Tutorial: Mixpanel4. Call to action: Campaign Monitor, Zengine5. No blank state: Mouseflow, Kissmetrics6. Hybrid: Basecamp7. Empty dashboard: 123contactform, Google Analytics8. Everything laid out: Mailigen, TalentLMS

Page 4: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

1. Dashboards filled with default data

This is the type of dashboard where default data is filled in automatically to show you the features of the app. The important thing to note is that this is data that you would actually be able to use

Page 5: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

For Acuity Scheduling you get a week’s schedule automatically filled in to help you understand how you can organize your work week. It shows you that you can schedule a lunch break, or set yourself as not available during weekends.

Page 6: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

2. Dashboards filled with sample data

This is very similar to the dashboards with default data but with the one key difference: you have no actual use for the sample data. You see it within the app, you see what it looks like, and then you just go ahead and delete it.

Page 7: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

In Groove you get a couple of sample notifications from the Groove team to show you what it looks like when a customer creates a ticket.

Page 8: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

3. Tutorial

For this type of app, the first thing you see after you register is a video tutorial showing you more info about the features of the app.

Page 9: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

In Mixpanel you see a video for every feature of the app.

Each of the videos explain how the feature works, and show you how you can use it.

Page 10: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

4. Call to action

On this type of screen you get prompted to take the action required for you to be able to use the product.

Page 11: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

For Campaign Monitor it means that you have to set up the first campaign. You get directed to this page which prompts you to go

ahead and start creating the campaign.

Page 12: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

5. No Blank State

This type of app doesn’t let you see the next screen unless you perform the required action.

Page 13: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

This is what Kissmetrics displays.

Unless you install the code on your website, you won’t be able to get past this screen and see any features within the app.

Page 14: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

6. Hybrid

This type of page combines multiple blank state designs.

Page 15: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

Basecamp is in a category of its own. The two options displayed after the onboarding is complete feature a dashboard filled with sample data and a

call to action.

Page 16: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

7. Empty dashboard

This is the state where the user sees the dashboard without any data. You have to take an action (i.e. implement the tracking code) before it will become awash with data.

Page 17: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

With Google Analytics you first have to install the tracking code on your website and only then will the dashboard start to show you the data.

Page 18: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

8. Everything laid out

We’ve also found a couple of products that display every single feature as soon as you finish registering for them. You are bombarded with a screen with lots of options.

This might be a bit too much for a regular user, but it’s an option that could work in a scenario where the user would receive training or view a demo prior to using the product.

Page 19: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

This is the screen that you get to after logging in for the first time.

Although you can experience Mailigen in 3 easy steps, it seems a bit confusing at first because you don’t know where you should click first.

Page 20: 8 Blank State Examples You Can Use to Improve User Experience During Onboarding

Having seen how other SaaS companies are handling their blank page states, the next step is to go back to your own app and choose the option that makes most sense for your product and users.

Which of the examples above closely match what you are currently serving up on your blank state pages? Or maybe you have a different example entirely?

Originally posted on the InnerTrends blog.