6 Best Practices for Building an App Welcome Page

What is an app welcome page?

As the name suggests, a welcome page is the first landing page new users see when they sign up for your product.

For most businesses, the welcome page is the first thing their customers see after the app landing page and signup flow.

You have just a few seconds to make a good first impression, so it’s important to get it right.

The welcome page is normally built on a modal, since modals are large, striking UI patterns and good for getting users’ attention.

On mobile devices, modals often take up the whole screen.

Why is an app welcome page important for SaaS businesses?

All SaaS businesses have a financial incentive to make it as easy as possible for users to experience value from their apps — an onboarding milestone known as “activation.”

The faster and more consistently your customers activate, the more likely they are to become regular users of your app, driving up your user retention rate in the process.

With that context in mind, imagine that you’re a customer looking for a new consumer finance app on your search engines of choice. You browse some mobile app landing pages, and sign up to the two most promising candidates.

Upon finishing the signup sequence, one looks like this:

And the other looks like this:

Which one do you think you’ll choose?

Even after seeing a beautiful app landing page, if you’re greeted with an empty state like in the first example, there’s a good chance you’ll want to quit on the spot! At the very least, it’s unclear how to continue your user journey from here.

By contrast, the welcome screen in the second example speaks to you personally, uses striking imagery, and reminds you of the value you signed up for in the first place.

In other words, it’s very likely to reduce Time to Value. Here’s a reminder of what that means:

Over the long run, businesses with welcome pages that reduce Time to Value and make activation easy will outcompete those without them.

You have been warned!

Best practices for app welcome page design

Now that we know what an app welcome page is and why it’s an essential topic for UX designers working in the SaaS world, let’s look at the best practices that have been established by other businesses in this area.

App welcome page best practice #1: Don’t code it from scratch!

If this is the first welcome page you’re looking to build for your app, it might be tempting to think that you’re facing a unique challenge, and therefore require a unique solution with lots of bespoke code.

Well, let’s think about that reasoning for a moment.

Consider the amount of code you’ll need for a welcome page:

And every time your product marketers want to change the copy, the colors, the branding, or anything else, your developers will have to stop what they’re doing and make those changes manually.

That’s a lot of extra hassle, and the opportunity cost of them not coding your core product is quite high, especially given that developers are normally the most expensive people on most SaaS teams.

A better solution is to use onboarding software to build your welcome page without having to mess around with code.

Your product marketers will also be able to iterate on your welcome page design to their hearts’ content, without having to bother your devs every time they need help.

App welcome page best practice #2: See it as an opportunity to segment your customers

Consider that what your customers find valuable about your app is wholly subjective.

For example, if you have a project management app:

• CEOs care about the big picture of their business
• Managers want to ensure all the employees get tasks done on time and on budget
• Employees at the operational level are only interested in their respective tasks

It would be foolish to offer each one of these segments an identical user onboarding experience. You’d end up with a linear product tour and a high churn rate.

A better approach is to divide your customers into segments according to their Jobs to be Done.

And the welcome page is the perfect place to collect the data you need to build separate user segments.

You could divide your welcome page into two sections and have a separate section that asks segmentation questions as Kontentino does.

Alternatively, you could build your segmentation questions into one welcome page, like Postfity did here:

Both Kontentino and Postfity built their welcome pages with Userpilot. If you want to do the same for your app, grab a free demo today.

App welcome page best practice #3: Gamify your modal windows

If the purpose of a welcome page is to make users feel at home, what could be better than turning your app into a game?

Gamification, or the addition of game-like features to something that isn’t inherently playful, is a growing trend in the SaaS world.

As those of us who grew up surrounded by video games enter the workplace and start creating products, more and more apps are using elements like scoreboards, leveling up, and badges.

Given how many SaaS apps struggle with Day One churn, anything that can make the user experience more engaging is a plus.

I really like this example of a gamified welcome page as choosing a character automatically gets you more involved in the process and increases the chances of finishing the task.

While this is ostensibly a work app, it feels more like a character selection screen for an MMO game like World of Warcraft!

App welcome page best practice #4: Use any customer data you’ve collected to welcome people personally

Before your customer encounters your welcome screen, there is a good chance that they’ve already had dealings with your business in other ways that have led them to give you some of their data.

For instance:

• Perhaps you had a sales call in which they told you what they wanted to get from using your product.
• Have they completed an onboarding survey that indicated what industry they were in?
• Or maybe they filled in their name and job title on your signup page.

Whatever the source, you should look to include this data in some way on your welcome screen, because people respond well to being treated as individuals.

As a minimum, this means addressing your customers by their first name, like Rocketbots does here:

But the best welcome screens take this ethos of personalization to the next level, speaking directly to the specific value that each individual user wishes to get from your app.

Consider variables like what language your customer speaks, what plan they’re on and what role they play in their organization, and adapt the welcome screen to their individual situation.

And if you don’t have enough data yet to personalize your welcome screen, then you can take inspiration from Quickbooks and see this as an excuse to find out more about your customer’s use case:

App welcome page best practice #5: Make the next steps in your onboarding process obvious

We mentioned earlier that the worst thing you can greet your new customers with is an empty state like this:

In the absence of a clear path through your app, your user is likely to feel confused, freeze up, or even churn.

A welcome page solves this problem by pointing your customers directly towards an enticing CTA.

Ideally, your CTA subtly reiterates the value of your product, as in this example from property app Touchlight:

If you’re unsure what the next step in your onboarding flow should be after your welcome page, a good default option is to give your customer an interactive walkthrough of your app’s features, like Kommunicate did here:

Whatever your CTA points towards, you should always ensure that you give your user a way to decline to click on it, if they so choose.

An X button at the top right of your welcome screen will do the trick nicely.

App welcome page best practice #6: Steer your user’s focus towards the Aha Moment

Have you ever wondered what all successful product experiences have in common?

In each case, there is a moment where the user thinks: “Wow, I can really see myself getting something out of this!”

We refer to this emotional realization as the “Aha Moment.” All the onboarding assets you create should be leading towards it — including your welcome page.

There are a number of ways your welcome screen might help you with this goal.

You could restate your value proposition in the copy like ActiveCampaign did in this example:

If your brand’s USP is connected to better customer support or a smoother product journey, you could also include a smiley photo of one of your team members as a way of sub-communicating that:

If you’re unsure what the Aha Moment looks like for your app, you could also emulate Postfity and include an onboarding survey on your welcome page:

By finding out more about who your customers are and why they’re coming to your app, you’ll be better placed in the future to predict how you can give them that Wow Moment that they’re looking for.

3 App welcome page examples that will inspire you to create your own

Now that you know what makes a good welcome page, let me share some that other SaaS businesses have created.

App welcome page example #1: JetAdmin

JetAdmin lets you create internal apps for your business without the hassle of having to code.

After you go through their signup sequence, here’s what their welcome page looks like:

The copy is brief; you can tell that JetAdmin wants its customers to get in as quickly as possible.

It also speaks to the value that JetAdmin is going to offer, namely: “building your apps.”

There’s a bit of interactivity and personalization in the two form fields that new users have to fill out.

JetAdmin can use the data in the second field, in particular, to get a sense of what their customers want to build with their technology, and then segment users accordingly.

Even the copy on the CTA is carefully worded to remind users that they will be creating app projects with JetAdmin.

App welcome page example #2: Backlink Manager

Backlink Manager is an app that helps busy SEO teams build links and track link building tasks.

Their welcome screen looks like this:

It’s smart how the copy distills Backlink Manager’s value proposition down to just a few words: “build your backlinks faster.”

As a means of segmenting new users, the welcome page includes a microsurvey. This aims to understand the specific problem that each new user is looking to solve with Backlink Manager.

The rest of the product tour can be customized accordingly.

One notable thing about this particular welcome screen is how it respects each user’s autonomy. There are three options in terms of the next steps:

1. The user can watch the intro video
2. They can click the CTA, and start using the software immediately
3. If neither of those things is appealing, they can also exit the modal by clicking on the button

App welcome page example #3: ConvertKit

Our last example of a welcome screen comes from ConvertKit.

Their welcome page is somewhat unusual, in that it allows you to flip through multiple modals on one page:

As highlighted on the screenshot, ConvertKit will customize the rest of the user’s subsequent onboarding flow on the basis of how they answer the questions in this onboarding survey.

For companies like ConvertKit which have lots of information to share on their welcome page, splitting that over multiple modals is a bit tidier than trying to cram everything onto one screen.

It’s a bit less overwhelming for the user, too.

Note also how the welcome page is nicely branded.

Conclusion

Having finished this article, you now know:

• What a welcome page is
• Why welcome screens are important for SaaS companies
• As well as some best practices for building good welcome pages

If you’re looking for a hassle-free way to create your welcome screen without having to code, you should give Userpilot a try.

You can build welcome screens on Userpilot’s modal templates in a matter of minutes, no matter how technical you are. Get a free demo today!

[/vc_column_text][/vc_column][/vc_row][/vc_section]