Ui App Design Welcome Screen

Welcome screens in SaaS apps are an underutilized piece of real estate that can be so much more than just a welcome message. A well-designed welcome screen can have a significant impact on your new user activation, satisfaction level, and ultimately – churn and retention. They can help you convert more users from viral user referrals. If you think I'm overselling it – keep reading.

And yet, according to our State of SaaS Onboarding 2020 research – 40% of SaaS businesses don't have them at all, and the majority of the remaining 60% – are not even using their full potential.

How to design the perfect Welcome Screen for your SaaS – both for new and invited users – to turn it into a tool for segmentation, personalization, and conversion rate optimization? You will find all the answers below!

In a hurry? Jump to the relevant section:

Benefits of the Welcome Screen
Segment your users right
Personalize the onboarding journey for shorter Time to Value
Don't lose the invited users
Convert more leads from user referrals
Welcome Screen design and examples + how to build them
Adding micro surveys to Welcome Screens
Gamifying the Welcome Screen
Final thoughts

TL;DR:

Welcome screens provide a unique opportunity to segment your new users by role, goals and use case. This can be critical in further personalization of their onboarding. And as we all know – the more personalized and relevant the onboarding flow, the faster your users understand the value of your product.
You can use a micro survey in your welcome screen to segment the new users, or even…gamify the whole experience by letting the user choose their 'avatar' (role) and their 'adventure' (use case).
This will allow you to customize the onboarding flow to the needs of each segment of your users – e.g. an agency/enterprise user may be interested in learning about completely different features than an SMB user.
As a result – you will get more users to the 'Aha moment!' (the realization of the value of your product) faster, thus reducing the Time To Value (TTV).
Building your welcome screens in your product adoption platform will allow you to instantly segment your audience by their responses, and build follow-up experience flows and trigger the right onboarding sequence for the right segment.
Welcome screens are also critical for converting and onboarding the users invited by other users (be it from company accounts or viral referrals).

Why do you need a Welcome Screen for your app? Benefits of the Welcome Screen

Source: Kontentino

The first reason is quite obvious – to welcome your new users. Little gestures like greeting them by their first name, introducing yourself (with your photo for the extra personal touch), and letting them know what they can expect next go a long way.

But being cutesy with your welcome screen message will not compensate for poor new user onboarding. Your users want to reach their professional goals with your tool and meet their expectations as fast as possible. We are here to do business, not make friends after all.

That's why it is so important to use your welcome screen to segment your new users, and then show them the right experience flow that will get them where they want to go.

Segment Your Users Right

Source: Kontentino

Now, depending on how complex your product is you may be targeting several different personas, who want to do very different things inside your app.

Let's take our own example: Userpilot is a 'product adoption platform' for 'product teams'.

Speaking of adoption: why not join our FREE Product Adoption school to learn all about it?

But what does this really mean? In practice, Userpilot can be used by:

A Product Marketing Manager or a Product Manager who wants to build a new user onboarding flow without involving their devs
A PM who wants to run an NPS survey in-app
A PMM who wants to announce new product launches inside their app
A Customer Service Manager who wants to quickly promote their new Advanced User Webinar to a specific segment of the users

…as you can see, these use cases and goals are very different.

We can't risk dragging a busy PM through a long product tour about building onboarding experiences if all they came for is the NPS (which is why everybody hates product tours, btw.)

So we need to ask them who they are, and what they want to do.

And the welcome screen is the perfect place to do this.

Some of our users have already implemented this:

Kontentino decided to put the micro survey in the second part of their welcome screen. If you compromised on the design and give up on the large icon buttons – you could probably manage to merge it with the welcome message, like Postfity did:

Source: Postfity

We will talk about how to put that micro survey into the welcome screen a bit later, pluse how to gamify the whole experience.

But now – think about how asking these questions impacts your user's experience later.

Look at ConvertKit's (an email marketing platform for creatives) welcome screen:

Source: ConvertKit

If you're moving from another email marketing tool, you probably have an email list that you want to import.

You will also be more familiar with email marketing in general – so Convertkit can skip some of the basic explanations for you.

On the other hand – if you're a complete newbie – you may need help with basic things.

Your user journey milestones and the 'aha moment' will also be completely different:

as an email marketing newbie, it may be when you've collected your first 100 subscribers;
for a seasoned email marketer, it may be when you see how easy it is to create an automated email sequence;

As you see, what answers your users give in the welcome screen should determine what they see next.

That's why early user segmentation is so important.

Personalize the onboarding journey for shorter Time to Value

To follow up on what we've discussed in the previous point – ConvertKit's onboarding flow really differs depending on your answer:

If you said you are moving from another tool, it would make sense to ask which one and offer customized help with the move, right? Duh!

ConvertKit did exactly that:

This is what 'advanced' email users see in the next step: a checklist pointing them straight to the advanced email features:

On the other hand, when you choose 'I'm just starting with email' in the first step, you get a different next step:

This checklist points them to the basic features that will allow them to collect their subscribers and perform basic actions (sending the first email).

As you see can – the micro survey in the welcome screen is essential to providing the user with a more relevant onboarding experience.

This allows the app product manager or marketer to build an interactive, personalized walkthrough (here are 5 examples of interactive walkthroughs you can use as inspiration) instead of the boring, old-school product tour.

As a result, the users achieve their goals faster, become more satisfied, and stay for longer.

We will see how to build such welcome screens in the following sections.

Don't lose the invited users

'John is inviting you to join his workspace!' – we all know these emails.

But if what happens next looks anything like this:

Source Storychief

…things may get a little…difficult.

As an invited user, how are you supposed to figure out how to make the best use of your invite if all you see is an empty dashboard?

No onboarding flow, no tooltips helping you pick up where John left off, nothing?

This is another excellent example of a use case where the right welcome screen can save the day.

Design a different welcome screen for invited users, reflecting the use cases an invitee may find themselves in. This is what StoryChief's story could have looked like (if they used Userpilot ;)):

Since StoryChief is a platform for writing, editing and pushing content to different channels – blogs and social media – an invited user may need to either edit someone else's post, schedule a social media post with links to the published content, or write a (guest) post of their own.

Giving them an option to pick their use case and then showing them how to accomplish their goals will significantly reduce their TTV – and thus make StoryChief a more productive content collaboration tool.

All this thanks to a small welcome screen that can be literally designed in 5 minutes (let us show you how).

Btw. – Here's a full guide on onboarding the invited user if you want to read more about it!

Convert more people from user referrals

Now, there are invites and there are invites.

If you're lucky enough to have a product with a viral coefficient (meaning each of your users generates a certain number of new users by some sort of an invitation or referral – think early Facebook, or Dropbox) – a welcome screen will give you an opportunity to convert more of this kind of users.

Each time a user sends an invite, you have an opportunity to convert the invitee into a new user.

But you need to really sell the tool to such invitee – remember, they haven't made the decision to join themselves. And it's not the inviting user's job to convey the value proposition of your product.

So make sure that in your welcome screen for the referee you include information about your product

Like in the example below:

Source: BacklinkManager

Welcome Screen Design and Examples + How to build them?

Now that we have discussed the different upsides of welcome screens, let's zoom in on the specific UI patterns that will allow you to reap these benefits. We'll show you how to build them + a few good examples.

Building a SaaS app Welcome Screen from scratch

If you opt for a code-free product experience tool like Userpilot to build your welcome screen – it will literally take you minutes to design one.

Plus – it will be easier to segment the users by responses, and instantly trigger the right follow-up onboarding experiences.

Remember the microsurvey from Postfity's welcome screen?

Source: Postfity

Postfity can sort the users by the answers:

…create a new segment out of them:

…and instantly target the right segment with the right follow-up experience:

This is why building your welcome screen in your product adoption tool makes life a lot easier.

So – here's how to build a welcome screen in Userpilot:

Go the experiences tab, navigate to the page where you want your Welcome Screen to appear, and choose 'modal' from the available UI patterns:

Then, select one of the several available templates:

saas welcome screen template userpilot personal

saas welcome screen template userpilot progressive

…and start customizing it to match your branding and use case.

Well, that was easy. No, let's learn how to add a micro survey to your welcome screen

How to add micro surveys to Welcome Screens?

As we've mentioned earlier – the key to a successful welcome screen is collecting data about your users' role, goals and Job-To-Be-Done. In other words – who they are, and what they 'hired' your product for.

The easiest way to do this is by asking questions with a microsurvey.

Userpilot allows you to easily embed a micro survey into a welcome screen modal with either multiple-choice questions with radio buttons, or a short or long text answer:

If you want to build a more sophisticated welcome screen survey, you may want to use the HTML editor:

Now that you know how to build your welcome screen micro survey, let's look at some design inspiration.

Here are a few examples of good welcome screen micro surveys:

Source: Quickbooks

Quickbooks provides a neat icon-based survey asking the user about their use case.

Kontentino did something similar, throwing in a progress bar, radio buttons and regular buttons to the mix:

If you really want to take your welcome screen game to the next level….why not gamify it? 😉

Gamifyting the Welcome Screen

Adding gamification elements into a welcome screen makes it more engaging. Simply put – it means users will be more likely to provide the answers.

So – how to gamify your welcome screen?

Here are a few options:

Replace the radio buttons/icon buttons asking about the role with avatars:

Source: eset.com

…and allow the users to pick their own 'scenario' of the 'game' corresponding to their use case/JTBD:

Source: Asana

Result? More answers, less frustration.

Final Thoughts

A welcome screen that says 'hello' and nothing else is a big missed opportunity. An opportunity to learn more about your new user and personalize their onboarding accordingly, as well as to reduce TTV for the new and invited users, and to convert more referees.

Plus, if you just say 'hi' in your welcome screen – then it makes it just another annoying popup that separates your users from what they want to do.

So – regardless of what your product is – take note of the best practices for building welcome screens that provide real value for your users. You will be paid back for your effort in higher retention rates over time.