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

If you’re not someone with a background in web development, figuring out the right modal UI design for your SaaS can be quite a headache.

Sure, you want your modals to conform to your brand’s color scheme, but there are so many different ways that modals could be used that it’s hard to know where to start with the actual content.

If that problem sounds familiar, then this is the article for you.

We will share modal design best practices with you, based on hundreds of discussions with other SaaS companies.

TL;DR

• A modal is a rectangular UI element that pops up to notify users about something important.
• In the SaaS world, they are most often used to create welcome screens.
• Other uses include microsurveys, alerts, upsells, success messages, error notifications, feature announcements, sign-ups, and collecting user-generated content.
• Building modals from scratch using code is not for the faint of heart – it’s much more efficient to use software like Userpilot.

What is a modal?

A modal is a fairly large, rectangular UI element that is used in SaaS businesses to notify users of something important:

To ensure that they grab the customer’s attention, modals normally take up most of the user interface, sometimes even all of it.

As such, they’re situated somewhere between an “embedded” UX pattern and a “dedicated” one. Read this post for an extended definition of those terms.

Modal windows normally contain an image, which is another way that they direct the user’s attention towards what the modal is saying. Note, however, that this is not always the case.

Only in rare cases does a modal consist of a wall of text. It’s much more likely that the content is kept concise, often using bullet points.

Bear in mind that whenever you use a modal, you just diverted the user’s attention from their current task.

You don’t want to get in the way of what they want to do for too long, or else you’ll risk them churning.

For this reason, you should also include an obvious way for the user to close the modal of their own accord.

Common design ideas for modal windows

With any UI design element, how you ultimately use it is up to you. You’re only really limited by your imagination.

That being said, we’ve seen the SaaS businesses that we speak to use modal windows in 8 main ways:

Modal window design #1: Welcome Screen

This is by far the most common use of a modal, especially during onboarding.

As the name suggests, a welcome screen is a modal where you greet your new users after they complete your initial sign-up flow.

When you’re designing your welcome screen, make sure you include the following elements:

• A smiley photo of one of your team members, ideally someone customer-facing like a support rep.
• A quick recap of your business’ value proposition.
• Greeting the customer by their first name.
• Outlining the next steps in your onboarding process.

A welcome page like this is a great alternative to a blank screen, which is a really uninviting way to start using a new product.

In this example from LinkedIn, it looks like no one is using this feature. So, as the customer, you’re likely to ask yourself: “what am I doing here?”

If you want to great really creative with your welcome screen design, you could even consider gamifying this particular type of modal.

In this example, the welcome screen looks as if you’re about to select an avatar to play a game like World of Warcraft!

For more detailed guidance on how to build a welcome screen for your business, check out this post.

Modal window design #2: Microsurvey

A microsurvey is a short survey that pops up in-app. In general, they consist of 1-3 questions.

It’s practical to survey your customers in this way instead of by email since you avoid them being distracted by all the other exciting things in their inbox.

Microsurveys are often used to ask users segmentation questions. Companies will then log user data from the answers to ensure that a customer’s onboarding experience is completely customized to their individual needs.

For more information about the value of segmentation, please consider reading this article.

From a design perspective, a segmentation microsurvey can be put on one modal together with the welcome screen:

Alternatively, it can be a separate modal. This is especially useful if your business has a large number of segments and your onboarding survey needs to be longer than usual.

In cases like this, it can sometimes be valuable to spread the segmentation questions out to make them easier to read.

In the example from ConvertKit below, the user clicks through the segmentation questions to answer them at their own pace.

Modal window design #3: Important alerts

Since modals are so good for getting users’ attention, they are a convenient way of highlighting critical information to customers.

Some examples of essential information might include:

• Your trial is expiring in 3 days
• We are changing our terms and conditions
• Please add new credit card details

Even though notifications like these are valuable, remember that you shouldn’t interrupt the user’s current task for any longer than is strictly necessary.

Your customers will thank you for respecting their autonomy by sticking around on your app for a long time. Roll on those monthly subscription payments!

This brings us nicely to our next modal design idea:

Modal window design idea #4: Upsells

Like every other type of business, SaaS companies have an incentive to increase their Lifetime Customer Value as much as possible.

One way that you can do that is through upsells. Common upsells include:

• One feature from the next account level up
• A secondary product feature for advanced users
• Premium support
• Removal of your company’s branding, so that the user can white-label your product

Overlays like modals are perfect for upsells because they capture the customer’s attention so effectively.

Here is an example of a modal being used by Hubspot to upsell templates:

Note that the modal avoids giving the user any complex tasks and gets straight to the point.

Even the modal title speaks directly to the customer’s pain point.

Modal window design #5: Success or failure

There are numerous times in SaaS businesses where you want to give your customer some praise:

• When they finish an activation task from the checklist you gave them
• If they perform an important task that they set themselves
• After technical integration of your product is complete
• In cases where they refer a friend

By using a modal in instances like this, you can give your user a rush of dopamine and make them feel good about themselves.

For example, Asana is famous for its playful unicorn emojis when a task is completed:

Note that it’s possible to overuse success messages like this and even get your customer addicted to using your product. We don’t advocate this and have covered this problem in the past here.

Modals are also a handy tool for highlighting cases where your product malfunctions.

Highlighting that this is a display error on your side might go some way to offset any feelings of frustration your customer has in moments like these.

Modal window design #6: Feature announcements

Contrary to popular opinion, customer onboarding is something that never really ends, even after the first few days of the user journey are over.

The best SaaS companies continue to educate their users each time they release a new feature.

Modals are a great tool for customer education of this kind, for two main reasons.

Firstly, modals are useful for getting your user to notice the new feature and interact with it. If there’s a specific action that you want to drive, highlighting that via a CTA on the modal is a smart move.

Secondly, if the new feature you’re announcing is part of a broader app update, a modal can be a valuable means of communicating your release notes to your user in-app.

In this instance, it’s essential not to bore the user with reams of technical language! The fewer words you use on your modal, the better.

For more information on how to write release notes, we recommend this post.

Modal window design #7: Collecting sign-ups

Modals even have applications as a design tool without necessarily needing to reside inside your product.

SaaS companies frequently use them to get people to sign up for their email newsletter. Here at Userpilot, we do this ourselves!

I’ve also seen modals used to get customers to create an account and get stuck right into your product.

Airtable has a great example of this:

This is a particularly lean modal, with as little text as humanly possible.

If your SaaS business requires a longer sign-up form than this, you might be interested in reading this post about sign-up friction.

For both email and product sign-ups, do make sure that you’re designing these modals in a responsive way, so that users on mobile devices can still see them!

Modal window design #8: User-generated content

There are some apps that require additional user input to work at their most effective.

Think of websites like Facebook or Reddit: their whole platform is built on the back of content that users create.

Or businesses like TripAdvisor, where you can find insightful suggestions about things do that are entirely based on customer input.

In all of these cases, a modal window is a great way to collect input from your users.

Modals like this are also called “dialog windows,” since you’re effectively having a dialogue with your customer.

If you haven’t created a user feedback modal for your business yet, you’ve got nothing to lose by giving it a try! Who knows what type of insightful and dynamic thinking you might uncover?

But how do you go about creating a modal from a technical point of view?

To code or not to code?

The biggest question you’ll be asking yourself before you start building your own modals is whether it makes sense to code it yourself.

Let’s unpack that for a minute.

If your team consists of loads of web design experts who have lots of free time on their hands, creating modals from scratch might just work.

The downside: it’s a lot of code.

Yikes.

And bear in mind that you’ll need to go back to your devs every time you need the smallest of changes. Even just for colors or fonts.

That sounds like it doesn’t scale very well.

Even if you were to find a code template from a website like Codepen and adapt that to your purposes, you still run into issues with scalability every time you want to make updates.

Making a modal with onboarding software

Fortunately, this is 2022, and so you don’t need to reinvent the wheel every time you add something new to your website.

There is onboarding software like Userpilot out there that will do this for you code-free in a matter of minutes.

A solution like this will empower your non-technical product managers to build and edit modals, without having to grovel to your over-worked devs for a few hours of their precious time.

That translates into faster product iteration and more product experiments, and altogether a much more scalable solution than building a modal from scratch.

As we say in the startup world, sometimes you have to be willing to fail forward in order to grow your business.

For more information about onboarding software, check out this handy guide.

Conclusion

And that’s a wrap!

Now you know what a modal is, the myriad ways in which you can use it on your site, and that you shouldn’t attempt to create one without the right software in place to help you.

If you’re looking for modal software, you could do worse than giving Userpilot a try.

It’s incredibly easy to learn, and requires no technical skills at all after a 10-minute Javascript integration.

Userpilot is also free to try.

So what have you got to lose! Try out the demo today!

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