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

Here’s a sobering truth: an attractive welcome page design can sometimes be the difference between a customer quitting your app on Day 1 or becoming a long-term brand advocate.

Your welcome page is the first thing your potential customers see after signing up from your landing page, and, as is the case offline, that first impression matters a lot.

But how do you go about designing a welcome page from scratch? With so much advice online, it’s hard to know where to begin.

Allow us to share with you our ingredients for a great welcome page: the content, the visuals, and the technical side.

TL;DR

• The content of your welcome page should greet the user by name, introduce your business, outline the next steps, and feature a picture of one of your team.
• A welcome page is an opportunity to segment users into groups so that the ensuing product tour is relevant to their individual needs.
• A well-designed welcome page takes up the whole screen, is gamified, avoids empty states, and flips between segmentation questions on one modal.
• It’s futile to code a welcome page from scratch, even if you’re using templated code.
• A better idea is to use software to help you automate the design process. It’s especially easy to build and edit a welcome page using Userpilot.

Which content elements does a welcome page need?

As the name suggests, a welcome page is a place where you greet new users after they sign up from your landing page.

As such, you want to leave your new customers with a feeling that you care about them as individuals.

To increase the odds that your welcome page achieves this basic goal, you should ensure that it includes the following four types of content:

Greet the user by name

Did you take your customer’s first name during the sign-up process? If not, now’s a good time to go back to that part of your user onboarding to improve things.

People love it when you address them by their first name. It instantly feels like you’re talking to a real person, instead of just interacting with a screen.

This goes a long way, especially in an age where many of us work from home without much social contact.

Introduce your business again

You might be thinking that it’s already clear to your user what your company offers.

However, there’s no harm in stating this again. You want to remind the user why they signed up to your platform in the first place.

If your marketing department has come up with a pithy, one-sentence description of your core value proposition, this is probably a good place to use that.

Over the course of your onboarding process, your user will move from understanding what value you provide to experiencing it first-hand. Once this transition is complete, they are said to have “activated.”

Include a smiley photo of a team member

Similar to the point about addressing the customer by their first name, this is all about being friendly and welcoming.

Perhaps the team member you choose for this is someone who works in customer support or customer care.

From a brand point of view, this strengthens the perception in the customer’s mind that your company cares about his or her wellbeing.

Outline the next steps

A welcome screen is normally just the first step in a company’s onboarding process.

The plans you’ve cooked up for the subsequent user journey will vary from company to company, but might include:

• An onboarding survey
• A checklist of activation tasks
• Reviewing demo content

You can read more about the entire user onboarding process here.

Whatever next steps you choose, make sure that you communicate them clearly to your customer so that they know what to expect.

Putting this all together

Here’s an example of what a welcome page for an online course business might say, complete with some engaging power words like “you,” “top” and “happy:”

Hi Susan! We’re so happy that you’ve taken the time to check out our course. Now you’re on your way to becoming a top-1% content marketer! On the next page, we’ll ask you a couple of questions about how you plan to use our course in your work.

The CTA button text might say something upbeat like “Let’s go!”

Don’t forget to segment your users

If the welcome screen were just a place to be warm and fuzzy with your customers, they’d probably just see your welcome message as another piece of friction between them and what they came to use your product for.

But the truth is that any good designer knows that the welcome page is not just a way to be friendly: it’s also a commercial exercise at the same time.

In other words, this is an opportunity to:

• Get to know your new users better
• Assign them to customer segments
• And then customize the remainder of their onboarding experience accordingly

Segmenting with a microsurvey

In practice, companies often segment their customers by using a microsurvey as part of their welcome sequence.

This is a short survey that pops up in-app. To learn more about designing microsurveys, check out this article.

The microsurvey can be integrated into the welcome page itself, as in this example from Postfity:

Or it can be a separate page that pops up immediately before or immediately after the welcome page, as in this example from Kontentino:

By segmenting your users at this stage, you will ensure that the rest of their onboarding experience will only show them relevant content.

This reduces the chance of putting them through a mindless product tour that tries to be all things to all people. Spoiler: users don’t appreciate that.

A bit of empathy goes a long way here. Your user’s focus is only on what they came to use your product to do. They don’t care about all your fancy secondary product features at this stage.

Segmentation during the initial phase of onboarding is therefore an essential way of maximizing user retention.

For more information on how to segment your customers, please consider reading this article.

Now that you know what content needs to go into your welcome page, let’s discuss some ways that you can make it look visually appealing.

Which individual design elements should your welcome page include?

There’s no one right way to make a welcome page look attractive, but here are some ideas to give you a bit of design inspiration.

Use a dedicated UX pattern

There are 3 different types of UX patterns. In order from smallest to largest, they are:

Annotated UX patterns. Their name comes from the fact that they are annotations on top of the user interface that is used to draw attention to one small action. Examples include tooltips:

Embedded UX patterns. These are so-called because they are embedded into the customer experience, and give slightly broader guidance to the user than an annotated pattern would. An example of an embedded UX pattern is a popup.

Dedicated UX patterns. The name “dedicated” comes from the fact that the entire screen is dedicated to the pattern you have chosen. Think of a sign-up form, for example:

When designing your welcome page, you should definitely use a dedicated UX pattern.

Although it’s disruptive to take up the whole of the user’s screen with one massive modal window, the welcome page is such a big part of your user’s experience that it needs to grab your visitor’s attention.

Ideally, all of the welcome message should be visible at once, without the need to scroll.

Avoid empty spaces

Did you ever have to take that really annoying art exam in school where your teacher gave you two blank pieces of A4 paper, asked you to scrunch one up and draw it on the other?

That type of experience is stressful because it requires a lot of activation energy to start something new from scratch.

You can apply the same logic to designing your welcome page.

The worst thing you can give an excited user who’s read a few of your landing pages and wants to get started is a blank screen like this:

With an empty state like this, you effectively communicate that no one else uses your product, there’s no data here, and your new user will have to set up everything from scratch.

Is it any wonder that website visitors feel demoralized when they see something like that?

Instead, fill your welcome page with the content ideas we mentioned above. If you really need to have existing content to show the user how things work, I recommend using tailor-made demo content, which we previously wrote about here.

For more design advice on how to deal with white space, I recommend reading this post.

Use gamification to add a sense of fun

Consider adding an element of play to your welcome page as a way to make completing it more enjoyable.

This is an example of a concept called gamification. Common examples of gamification include:

• Gaining points
• Acquiring badges
• Measuring your progress against other people on a leaderboard
• Creating a fictitious character

In this great example of a gamified welcome page, the user is asked to choose their character, instead of entering lots of personal information.

This makes onboarding feel less like a work task and more like playing an MMORPG like World of Warcraft!

I’m quite sure that businesses who have the courage to try something as eye-catching as this will drive more conversions from free users to paid ones.

You could also take a leaf out of Asana’s book and give your welcome page a funny animation when the user has completed it:

If you gamify your user onboarding experience, you’ll be one of a select group of companies. According to our survey of 54 product people, only 11% of businesses have tried to implement a gamification strategy.

Flip through multiple segmentation questions on one modal

Although most companies are incentivized to move their users through onboarding as quickly as possible, there are certain businesses that require a high amount of friction during the sign-up process.

This might be because their products require a lot of confidential user information in order to work properly, or perhaps because setting up their app requires complicated technical integrations.

If you fall into this category, your segmentation microsurvey will often be rather long and complicated.

In such cases, it’s a smart design decision to put all your segmentation questions on one modal and allow your user to flip through them.

Look at this simple layout from ConvertKit:

If the four segmentation questions on their microsurvey were all on one screen, it might be a bit overwhelming for the user.

Instead, each question takes up one single line, and there’s only one question at a time. Much easier.

If you’re looking to combine some of these elements and create a welcome page for your own business, read on!

Designing a welcome page using HTML and CSS

From a technical point of view, the first thing most businesses think about when it comes to building a welcome page for themselves is coding it with HTML and CSS.

The thinking here is: “we want a custom page that’s unique to our business, so let’s code it ourselves.”

Now that’s fair enough if your entire product marketing team consists of people with a technical background who have loads of time on their hands …

… but in all likelihood, that’s probably not the case.

And let’s be real here: your welcome page is probably not going to be perfect the first time you create it.

So does that mean that your product marketers are going to burden your developers with update requests every time they want to change something as simple as a color or font?

Of course not. Something’s got to give here.

Coding a welcome page using code templates

“But Userpilot,” I hear you say, “we don’t have to create our welcome screen code from scratch! We can borrow from templates.”

Yes, it’s true that using websites like Codepen to draw on code from other developers is going to save you some time initially.

And taking a few minutes to explore Codepen reveals that some of their welcome pages do indeed do an excellent job.

I particularly enjoyed this one with its pretty segmentation graphics, minimal design elements and complete lack of form fields:

And it does save you quite a bit of coding as well:

But do you really think that you’re going to be able to copy this exact template and have it match your business use case 100%?

Or is it more likely that it will need to be edited (both for content and for branding)?

Perhaps by those very developers whose time you were looking to save?

So it seems that using templated code is more efficient than building a welcome page from scratch, but is still rather arduous.

What’s the solution?

Designing a welcome page with product walkthrough software

In 2022, there are numerous product walkthrough software solutions on the market that will save you a lot of time when it comes to building your welcome page — as well as all the other elements of your interactive product tour.

Solutions include Userpilot, Appcues, Userguiding, Intercom, Chameleon, and others.

For a full overview of the different options on the market, I recommend checking out this post.

The great thing about product walkthrough software is that it allows you to build welcome pages without writing a single line of code.

This has numerous advantages:

• Non-technical product marketers can run product experiments without bothering the development team.
• A/B testing simple things like font choices on your welcome page can be done quickly and easily.
• The development team can focus on building new product iterations rather than playing with the color scheme of your welcome message.
• You can get an MVP version of your welcome page up in less than an hour.

All in all, this is an approach that scales significantly more efficiently than coding a welcome screen from scratch.

Let me show you how easy it is to use software like this, and then you can see for yourself if you think this would work for your own site.

Building a welcome page with Userpilot

Start by going to the Experiences tab and choose “Modal” from the list of available UI patterns:

Select one of the available templates:

And start customizing the color and style to match your brand.

Embedding a microsurvey into your welcome page design

This is also extremely straightforward to do with Userpilot.

You would simply embed it as a form, as highlighted here:

Note that if you wanted to use HTML and CSS to customize things even more, you could still do this too. Using software to automate the process doesn’t have to be completely mutually exclusive with coding.

Here’s what that option looks like inside Userpilot:

I told you it was easy!

Conclusion

Having finished this article, you should now be in a position to:

• Know the key content elements that every welcome page needs to include
• Ensure that your welcome screen segments your users into groups
• Choose design elements that make your welcome page visually appealing
• Understand why creating a welcome page from scratch with code is normally an exercise in futility
• And use product walkthrough software to automate the design process for you

If you’re on the hunt for the right walkthrough software for your business, you could do worse than giving Userpilot a spin.

As we showed above, it’s very easy to build a decent-looking welcome page on Userpilot in a matter of minutes.

And you can also try it for free, so there’s really nothing to lose, is there?

Try it out today by clicking on the banner below. I promise you won’t regret it.

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