Putting a Database in Everyone’s Pocket

What we’ve learned redesigning the onboarding experience for the Airtable iPhone app.

We spent the past six months designing and redesigning the new user flow for people who start using Airtable on their iPhones. Now it’s out for the world to see! 🎉

This is the story of how we got here, and what we learned along the way.

Spoiler alert: user testing and templates are important, and touchable videos are the best way to keep users engaged.

First, some preliminaries: Airtable is a database that people use to organize everything from art collections, to job applicants, to dairy cows. Here’s what Airtable looks like:

On desktop, Airtable looks like a spreadsheet. On mobile, it looks… not like a spreadsheet.

Until now, the mobile app was pretty confusing if you hadn’t already seen the desktop interface. On desktop, Airtable looks a lot like a spreadsheet, which is a familiar metaphor, and there’s a fancy guidebook that explains database concepts. But a sea of cells is frustrating to use on a small touchscreen, so we show records as tap-friendly cards.

Our goal for version 2 was to make the onboarding experience good enough that the mobile app could stand on its own. But most people haven’t used a database, so first we needed to explain what databases are—not to mention why they’re useful—all within the first few minutes of opening the app.

Where We Started

Like a lot of mobile apps, we had a bunch of intro screens that explained what Airtable is, and why you might use it. While working on the new version, we cleaned up the design, tweaked the wording, and ended up with this:

It even had snazzy transitions between each screen! Here’s the old design for posterity.

But once we started testing with real people, it was pretty clear this wasn’t working. I think deep down we suspected that no one really reads these screens, but watching people skim them and then proceed to be confused about the app really drove the point home.

After sitting through dozens of user studies, our #1 problem was painfully evident.

We were failing to give people the right mental model to think about databases. To get the most out of Airtable, it’s critical to understand the relationship between databases, tables, and records. But for people who have never seen a database before, these are pretty abstract concepts. The app was trying to explain it all in four screens, right when you opened it. Too much information, way too early.

So to improve the pacing and introduce the concepts more gradually, we shuffled around the pieces. This is the new flow:

Let’s dig into each step in more detail.

Intro Screen

So many possibilities!

Now, the first time someone opens the app, this is what they see.

It’s how the app introduces itself. Before asking for your information, it tells you just a little bit about itself. That way, it feels more polite.

The point of the first screen is to answer “What does this app do?” at a high level without getting bogged down in the details.

This was also a chance to set the tone and personality of the app. All the different icons floating around hint at the possibilities that lie on the other side of the sign up screen. Plus, they’re fun to watch and fling around.

Pick Some Templates

.

After you’ve signed up, the app asks you to pick a few templates to start with. Hopefully, you’ll see at least one template that’s relevant to your life.

Which brings us to the other big thing we learned from user studies:

Templates are really freaking important.

For new users, the distinction between templates and the Airtable app itself is pretty slim. Because templates are the first concrete thing users see in the app, a lot of people think Airtable is whatever templates they happen to pick.

So we took a step back and overhauled all of our templates. They ended going through three major iterations:

1. Same templates on mobile and desktop: these templates had lots of records, but they weren’t very interesting.
2. Simpler templates: fewer records and fields, but the use cases didn’t help explain why Airtable was better than a simple note-taking app. And the content in them was still kind of boring.
3. Going the extra mile to make the templates interesting with humor and better use cases—suddenly, you want to read them.

For the new templates, we started thinking about each template as its own app, instead of lorem ipsum filler content. If our “Cattle Ranching” template was to be compelling, it would need to feel as well-crafted as an entire app built specifically for keeping track of cattle.

Each new template is a little world, with subtle jokes and a backstory. We focused on making the content and scenarios just the right mix of funny, interesting, and aspirational. For crucial (but sort of generic) use cases like inventory or project management, we added a spin of our own to make them a little more fun: inventory management became a template for budding lemonade stand tycoons, and recruiting was suddenly all about finding an anthropomorphic animal to be a team mascot.

These changes encourage people to explore templates, find ones that are relevant to them, and ultimately customize templates so they feel tailor-made. That last part is the holy grail.

For all your recruiting needs—mascot, or otherwise. Making the examples in each template kind of ridiculous also helps communicate that it’s not real data.

Touchable Video™

By this point, you know that Airtable is for organizing things and we’ve hopefully piqued your interest with a few relevant templates. But before we throw you into the app, we need to explain the critical database concepts.

When we got rid of the original intro screens, we considered a lot of alternatives to replace them:

• Option 1: Move the intro screens so they’re shown after the user picks templates, without any other changes. This was the easiest option.
• Option 2: Rely entirely on tooltips throughout the app, and get the user into the app immediately. This was ruled out pretty quickly: we needed to deliver all the core concepts right away, but tooltips are difficult to choreograph and present linearly. (We use tooltips for encouraging exploration of other features once users are inside the app and understand the basics.)
• Option 3: Interactive onboarding focusing on the app mechanics, similar to Mailbox (RIP).
• Option 4: Video covering the overall concepts.

Video was an appealing option because it had the highest information density, and let us create rich visuals and animations that would be much harder to do in code. And because we could do the video creation in-house we could treat the medium as fluid as code, allowing for fast iteration.

But as we storyboarded and showed people rough cuts of the video, we noticed few issues:

• We were covering a lot of concepts, which made the video feel long. A lot of people would tune out, and if we weren’t paying them, they probably would’ve hit the “Skip” button.
• It was hard to get the pacing right. People read and absorb information at different speeds, so it was impossible to time the scenes to satisfy everybody.
• Even though we were demonstrating the mechanics of the app by showing a cartoon version of the interface, it wasn’t really sticking in people’s minds. After the video, when we asked users to do the things the video showed, many struggled.

The root cause of all of these problems was that users weren’t in control of the video. It didn’t encourage active interaction, so people watched passively. We needed it to feel more like a conversation.

And that’s how the video became touchable! We added a series of pause points to the video. When the video gets to one of these pause points, it stops, and a pulsating indicator appears on the screen, beckoning a tap. Here’s how it works:

With this version, people have an easier time paying attention. The pauses let users go through the video at their own pace. And since they tap on specific parts of the cartoon interface to move forward in the video, it helps develop some muscle memory for the real interface they’re about to see.

We’re really excited about this: the interactive video combines the interactivity of Mailbox-style onboarding with intricate animations to explain the concepts. And boy, have we patented it. (Not really.)

It’ll be interesting to see how it works now that it’s in the wild.

Done!

That’s it for the guided onboarding—we made a bunch of other improvements that guide users toward some of the more compelling features (e.g. customizing the fields of a database), but we’ll save that for a future post.

We think interesting things will happen when people have the building blocks to build their own tools, and this is the beginning. ⚒

Thanks for reading!

Download the app

Thanks to immad, Justin Hurley, Thianh, Ivan Kirigin, Ilya Sukhar, Will Tsui, Melanie Oei, John Le, Darius Contractor, Ted Pearlman, Fabricio Teixeira, and Zoelle Egner for giving feedback on this post.