Airtable Onboarding Teardown: How to Build an Amazing SaaS User Onboarding Experience

In this article, we’re going to do a deep dive into the Airtable onboarding experience and how you can recreate it for your users.

How users get to know your product is critically important (whether they are new employees or just using your product).

By digging into and deconstructing the way they manage the onboarding experience, we’ll try to draw out some principles of success that will help you and your team craft an exceptional onboarding process.

Let’s get started!

TL;DR

• User onboarding describes the series of activities helping users to get value from your product as quickly as possible (whether that user is a new employee of your company or a user who’s just signed up for your SaaS).
• The example we’ll explore from Airtable is primarily focused on app user onboarding. If you are looking for ways to use Airtable for employee onboarding this article doesn’t cover that.

We’ll look at Airtable user onboarding elements, plus ways to recreate these in your SaaS product without coding:

• The signup flow: simple, brief, and offers several options to reduce user friction.
• Airtable uses a welcome message modal to greet users to the product: you can create and customize a flow in Userpilot to craft an engaging slideout of your own.
• Tooltips are a great way of relaying information in a targeted and interactive way. Userpilot offers a range of options to easily create flexible tooltips.
• Hotspots are a UI pattern that draws your user’s eye to specific elements of the page – you can create them in Userpilot by selecting the ‘spotlight’ option.
• Slideouts are a handy way of conveying large amounts of information (rather than squeezing everything into a tooltip) – you can easily use this sort of UI pattern in Userpilot.
• Helping users help themselves is a fantastic way of automating support. Airtable draws attention to a help center using a widget, and you can recreate the experience in Userpilot using the resource center option.
• While you can’t personalize UIs directly with Userpilot, you can still populate empty states using a combination of modals.
• Airtable gets huge amounts right in the onboarding process – but it could be even further enhanced by customizing the experience to the needs of specific user groups using segmentation.
• Want to create a similar onboarding experience for your users? Get a Userpilot demo and get started right away.

What is a user onboarding process?

User onboarding is a broad term that covers the overall process of helping to introduce new users to your product or service.

Whether that’s helping users take the first step after sign-up, showing new hires how to pick up key tasks, or demonstrating an advanced workflow to existing customers, there’s an underlying theme: helping users realize value as quickly as possible.

What’s unique about the Airtable onboarding process?

Every SaaS out there will have some kind of onboarding experience process. So what makes Airtable’s worthy of further exploration?

We’ll explore why in this section.

But before we dive in, it’s worth mentioning that the onboarding processes we’ll explore below are primarily targeted at how Airtable onboard their users. If you are looking for ways to use Airtbale for your employee onboarding, this is not the right article for you.

If you’re still here, let’s begin.

Airtable has a range of noteworthy components to their onboarding – particularly when it comes to engaging UI patterns. They mix slideouts with tooltips and more in-depth detail on other elements that helps to focus users’ attention on specific areas of the screen.

Another interesting feature is their sequential click-through option. The menu on the dashboard opens up and moves along as a user progresses with onboarding. This makes the entire onboarding process more engaging and useful.

Mixing multiple UI patterns adds the right spice to it, making it more than a boring product tour. Airtable mixes a slideout and a hotspot with the interactive dashboard.

Typically, onboarding experiences are created with a combination of tooltips pulled together into a specific sequence. Also known as an interactive walkthrough or product tour.

These options do a great job of engaging users, but they only offer brief, targeted advice.

By deciding to introduce slideouts, Airtable has the option of explaining a task in more detail and boosting user comprehension.

It’s a much better option than cramming a huge range of information into a tooltip. And it’s that sort of clever decision-making that make Airtable onboarding worth analyzing.

Next, we’ll break down each step in the onboarding process and explore how Airtable has handled it. Then, try and draw out the lessons for you to replicate in your SaaS.

Airtable onboarding: The new user signup flow

Let’s start with how a new Airtable user gets to grips with the application. The initial signup form is clean, simple, and straightforward: off to a good start.

The option to signup with Gmail reduce friction – as does the inclusion of relevant placeholder text).

The progress bar means any user has a good idea of where they are in the onboarding process. This works well alongside a flow split into multiple screens, rather than overwhelming your users with a long, unwieldy form.

They give the user a chance to indicate the sort of work they do – a great way of figuring out which business processes they’ll be likely to spend their time working on.

The whole form is tilted toward helping users get up and running as quickly as possible, tackling the tasks they signed up to get done.

Airtable onboarding: The welcome message slideout

Once sign-up is complete, Airtable begins onboarding with a friendly welcome message to kick off a tour. Including the option to ‘skip’ is a clever addition – it respects the time and effort of each and every user.

Of course, a welcome tour is available on request via the resource center at any time.

This gives users a chance to revisit that important first step (by clicking ‘show onboarding tips’ in the example below).

How to recreate this without coding using Userpilot

We’ve discussed a range of effective UI patterns you might deploy in different contexts: modals, tooltips, and slideouts to name a few.

To create those patterns in Userpilot and get them live on your site, you’ll need to make use of the Userpilot Chrome extension builder.

Here’s an example built on top of Airtable (for illustrative purposes). You start by creating a flow using the Userpilot Chrome extension builder. Navigate to the page you want to build and click on the Chrome extension to launch the builder.

Then just click the ‘start here’ button located at the bottom of the page.

You can pick the appropriate pattern depending on your use case – for the welcome message below, a modal is a great option.

You’ve got a great range of customization features at your disposal (all of which help boost the effectiveness of your onboarding process) – from tweaking colors to choosing messaging.

Airtable onboarding: The guiding tooltips

Even if you choose to skip the Airtable tour, you’ll still have a range of in-app guidance available via tooltips.

These serve an important purpose: they help manage the flow of demand on your support team by enabling users to educate themselves.

Airtable uses tooltips that trigger when the user hovers over the dashboard elements, showcasing what each building block in Airtable does.

How to recreate this without coding using Userpilot

So, how would you create this sort of experience in Userpilot? Follow the same process as above, but this time, select Tooltip.

You can select any of the UI elements on the page you want your tooltip to ‘stick’ onto.

And also have a range of blocks available to tailor your popup. It doesn’t need to be a boring form.

You could choose images, get creative with emojis, or insert code snippets, making the tooltip look and feel like a part of your brand.

Airtable onboarding: The attention-grabbing Hotspots

Hotspots are the twinkling, blinking parts of a UI that instantly grab a user’s attention and create a sense of engagement.

For Airtable, they draw blazing borders around specific elements – in the example below, it’s apps.

Hotpots are one of the most effective ways of introducing features to your customers.

How to recreate this without coding using Userpilot

Remember earlier in the article where we spoke about creating a flow? That’s where we need to start. To create a hotspot in Userpilot, select ‘spotlight’ from the menu below.

The modal triggers when you click the ‘Start here’ button in the builder menu. You can use the UI selector to decide on the appropriate placement.

Then – similarly to the example above – you’ve got a range of options available to customize your settings: for example, where you position your hotspots on the element, user behavior, and more.

You can also get creative and customize the design: whether that’s color, the type of animation you’re using, the size of the hotspot, or even how the icon looks.

Airtable onboarding: The Slideouts for more context at each step

Slideouts are a subtle variation of a modal: rather than appearing over the whole screen, they slide in from the side.

Airtable onboarding uses these throughout the process to showcase more detail about specific features – a clever technique.

As a user progresses through various onboarding steps, they’ll be able to respond to the dashboard interactively, using the menu to help navigate them through a range of features.

How to recreate these without coding using Userpilot

To recreate the slideout functionality in Userpilot we’d look to dive into the menu.

You can see the option for slideouts available sandwiched between the tooltip and modal options.

You’ll have the same fantastic range of customization options at your disposal – a critical aspect to get right in any onboarding experience.

Airtable onboarding: The self-help widget that triggers the Resource Center

Airtable also considers support options in their onboarding, notably with the inclusion of a help center. This is the area of your product where customers can expect to find solutions to their challenges and answers to their questions).

Typically, you’ll be able to find tutorials, interactive guides, blogs, articles, and FAQs.

Airtable includes a neat self-help widget that pops up, shows the user where it is, and indicates what they can expect to find there.

How to recreate this without coding using Userpilot

Userpilot offers the option to build a resource center inside your app – without writing a line of code.

It’s simple to add different modules: whether that’s a user guide, detailed documentation, triggering interactive experiences, or opening a chat with the support team.

On top of that, it also offers a range of in-depth analytics.

That sort of data is incredibly useful: it helps you understand how users interact with the help center, which gives you an idea of what they find helpful.

Airtable onboarding: The call to action Empty Space

Empty space is a term describing blank fields in your interface. Leaving it empty is a risk: you might disengage users, leaving them without an idea of how to proceed.

Airtable fills any potential space with engaging CTA messaging – the sole purpose of which is to drive users towards the most appropriate next action.

How to recreate this without coding using Userpilot

While Userpilot doesn’t have an option to personalize interfaces directly, you can easily recreate the effect described above by layering elements on top.

How does that work in practice?

You can create a modal – just as we did earlier – or look to trigger a checklist with a clear series of steps to follow.

That means you can add a call to action immediately after users finish the walkthrough (or skip it if they choose).

By layering these effects together, savvy SaaS product managers can remove the risk of empty space and help users land on their applications smoothly.

What Airtable could have done better

Airtable gets an awful lot right in the onboarding process, but there are areas they could look to improve: chiefly, the lack of customization.

Every user who goes through the Airtable onboarding process has the exact same experience, from the welcome message to the functionality they’re shown. That’s because they don’t have any user targeting and segmentation in place.

If Airtable had looked to capitalize on the data collected during user onboarding, they could start to create flows mapped to specific customer segments.

For example, they might show one group of users 2 or 3 features – and another (with a different set of needs) a more detailed product tour.

It’s that kind of targeted experience users have increasingly come to expect.

When designing an onboarding flow with Userpilot, you can use advanced segmentation options and make sure your messages are targeted to specific users.

Conclusion

In this blog, we’ve explored how Airtable approaches the onboarding process, and deconstruct how we can recreate different elements in Userpilot: ultimately, demonstrating the flexibility of the platform.

The key takeaway is this: getting the onboarding right is ultimately about understanding the needs of your users, and carefully selecting the right tool to get the job done.

Want to get started with user onboarding? Get a Userpilot Demo and see how you can craft onboarding experiences that delight and engage your users.