Bubble - A UX and User Onboarding Breakdown

When I was 12 I had my very own book review website.

It wasn't anything fancy, I was just very into young adult fiction as a preteen and wanted the world to know. I was so enthusiastic about it that I built an entire website for it.

Quite the big endeavor for a 12-year-old, I would say.

Thankfully I figured to delete the content of the website by the time I was 16 (RIP my 5 pages long Hunger Games review). But just yesterday, I realized just how much state-of-the-art web app building software got.

And I decided to check out one of the best in the game, Bubble.

So today, we are taking a look at:

• What Bubble is,
• Why it matters,
• A closer look at Bubble's UX,
• An even closer look at Bubble's onboarding UX, and
• My final verdict on Bubble's UX.

So without further ado, let's dive right in.

What is Bubble?

Bubble or Bubble.io is a no-code design and development tool by Bubble Group that is used primarily by startups and small businesses thanks to its relatively affordable pricing and high functionality for its segment. The drag-and-drop-based software's main use case is web app and user experience flow design. While there are many features and core functionalities to give a try, Bubble still manages to keep it simple for first-time users and non-developers.

So in short, Bubble is a highly functional and professional tool for when you want to give your developers a breather or if you want to design a website for your business as a non-developer.

It's almost completely no-code after all.

Why Bubble?

Well, of course, everyone would be thrilled to use a no-code tool to build their very own web apps - and more.

But the reason why we are looking at Bubble's UX is a bit different.

What made me get interested in what kind of user experience and user onboarding flow Bubble was offering was a simple idea.

"If they can't offer good UX, how can they help people create good UX?"

This is in fact, a challenge for lots of user experience-focused software. Still, according to what I'm about to show you in a second, Bubble is taking it pretty well.

But hey, let me first elaborate on the why a little more.

👉 No shame in stating the obvious, the service Bubble offers is highly associated with users and customers. Even though there is an option for internal app building, I bet that no one paying for Bubble is going to leave it at that.

This being the case, there is no space for Bubble to relax about UX, they need to take it seriously.

👉 What's more, Bubble is representing the no-code tools as it's one of the most popular ones out there. When you have such fame as a no-code solution, the last thing you want to do is make things harder on the user experience side.

Making solutions no-code depends heavily on user behavior and a smooth user journey. Bubble cannot take any chances at that point either.

But still, I am not the CEO of Bubble or a part of their UX team. I couldn't tell what the decision process was for their user adoption or UX patterns' strategy.

But I can show you a little bit of what it looks like to me 👀

Let's take a look.

A Closer Look at the UX

If I were to categorize Bubble's user experience patterns, it would be their website UX, in-app UX, and user onboarding UX.

Let me start off by saying: they are all pretty good.

But don't take my word for it, let's take a closer look at their website UX first.

Website User Experience

The very best thing about Bubble's website and the reason why it is one of my favorite SaaS websites is that users can check out how the tool works in a demo environment.

And for the most part, it is the exact same editor experience as the trial version editor.

Now that's what I all product-led UX. 

After admiring the tool with no commitment whatsoever, visitors can sign-up to be trial users from the top of the website with ease.

The process is super quick, and the "start building" microcopy is exactly what you want to see to get even more excited about the tool.

The signup process then continues with a three-step survey to personalize the tool's capabilities and the user onboarding flow for new users.

Perfect for higher customer success rates and better user segmentation.

Key Takeaways

👉 Coming up with an interesting way of promoting how easy to use your product is can be tough, but when done right like in Bubble's case, it can work wonders in terms of product-led marketing.

👉 The last thing you want is to create obstacles for your potential customers right when they are trying to sign up; a short, to-the-point signup flow and authentication user experience always beats a detailed and long one.

👉 High customization from the very beginning makes the rest of the UX smoother for any user since the tool will be shaped to serve exactly their needs. 

In-App User Experience

 Right after the signup is done, users are directed to the tool itself where they will find a cool landing page. The entire UI design on this page is pretty straightforward and perfect for time efficiency.

What makes it so cool has a lot to do with understanding customer behavior, which has everything to do with UX.

When a user first encounters a new tool, there are two things in their minds:

"How do I use this?" and "how do I start using this?"

Bubble's very first page shows the users the answer to both and tops it with a perfect attention hierarchy. First a welcome, then the call to action, and then how you can follow up with the call to action.

Once you are ready to create your app, Bubble prompts you with another set of questions to start you off on the right foot. 

Then, once you are on the editor, some more customization options are available.

It is truly a great UX decision to separate some of the options for later to make sure you are not creating user frustration for impatient users. What's more, the questions in the latter half are more visual-based and naturally, it makes more sense to prompt them exactly when they were.

 For the rest of the app, the actual product experience is highly-responsive.

While there are no specific embedded patterns that would be called peak UX, Bubble does a good job of making everything responsive and easy to interact with.

The styles tab in the app is a great example of this, as well as the drag-and-drop UI.

Because hovering can highlight elements when using the editor, users can easily pinpoint their current task and next move. 

Even a loading page can go a long way to reassure users that there is no error and they will be able to keep working on their projects in a bit.

Key Takeaways

👉 Customization and personalization can get boring and long, it is good to divert attention and separate it into chunks for easier follow through. 

👉 The smallest things, can affect how a user sees a tool, and among those are micro-interactions and responsiveness. The higher the responsiveness, the more users will want to get a response from the tool.

👉 Loading pages are free spaces to openly talk to the users; a good use case is reassuring that all is well.

What About the Onboarding UX?

You didn't think Bubble would entrust their customer success rates to simple UX interactions, did you?

The truth is, without a proper user onboarding experience, any product should be ready for revenue churn. But not you Bubble, you get a passing grade for sure.

Let's see for ourselves.

What happens right after users create an app is that they get a walk-through tour of the editor.

Though the tour is pretty long and there is no progress bar in sight, it is not necessarily hard to process all the information. Unless of course, you are among the impatient users (aren't we all?)

There are also contextual onboarding patterns in Bubble's UI. For example, when visiting the Data section of the editor for the first time, users are prompted with a modal featuring a video about how the feature works.

There is a cool CTA for when the users are ready to give it a try too.

But if the product tour and the bits of information around the editor aren't enough, Bubble also has a Lessons section on its main page. Users can easily start with guidelines in-app teaching Bubble's intricacies one by one.

What I especially like about this option is that there are clear signs of progress marking, time indicators, and a link to the welcome page for traditional learners wishing to read through knowledge base articles.

Don't want the user manuals or the long and painful lessons? You can always give the crash course a try.

Bubble offers a video series for users that pick visual learning over hands-on.

But if you opted for the hands-on lessons, they are pretty cool too. For example, here's a bit from the second lesson.

A clear progress marker, an arrow pointing at exactly where you need to click, and mostly short copy.

Truly a good one.

Once you are finished with a lesson, there is also the chance to jump right on to the next one or simply skip.

Key Takeaways

👉 Whatever the product might be, it is important to follow the golden rules of a good user onboarding experience: a progress indicator, clear instructions, and short copy. These are the must-haves of all user onboarding UX patterns. 

👉 What's better than smoothly designed onboarding UX patterns is to offer a different type of user onboarding process for all users if possible. that's how you guarantee user adoption and in the long run, customer retention. 

👉 Nothing beats a seamless user journey, especially in avoiding user frustration and distracting impatient users; don't be afraid to onboard back to back but be sure to provide a change of scenery.

Bonus: Email Onboarding

A good user journey is never limited to in-app. And Bubble seems to know exactly why.

Here are the emails I received from Bubble on my first two days as a trial user.

I will not lie, the very first email was way too long for me to care. But hey, at least they know where to draw attention thanks to text formatting. 

And believe me, it is food to let your users know that you are now in touch, no matter the contents or the length of the message.

The second message, though shorter and easier to read, seems kind of like they aren't aware that I am already using the tool.

Still, a great way to make me turn back and play around with it more. 

Key Takeaways

👉 Reading emails is hard, most people skim work mails, even. When that's the case, you want to make sure that your onboarding messages are short and easily skimmable. 

👉 CTAs matter a lot for emails, the users need to know what they want them to do now exactly; it is best to make the message clear on the CTA button, given that the rest of the content will be skimmed.

Final Verdict

Here goes my humble opinion.

Bubble as a no-code tool is perfect; it is available, affordable, and approachable.

👉 And the same goes for their website UX. It is so good that you want to get another taste, perfect to get people to give the free trial a try.

👉 Yet the in-app UX feels a little underwhelming after such a great experience on the website. Sure, everything is nice and responsive but so is any other drag-and-drop tool's UX. Given the user personas and Bubble's active users, it is time to adopt more behavioral user experience patterns and get this party started.

👉 Then, the onboarding UX is a different story.

The Bubble walkthroughs and the combination of patterns are pretty good for the onboarding experience, but it is obviously time to give other types of onboarding patterns a shot. Constant tooltips can get jarring after all.

Still, to be fair, Bubble is quite a complicated app for first-time users and a structured lessons view is a brilliant idea just right for the use case of the software.

Conclusion

To wrap it all up, let's just say that Bubble is a good representative of how no-code tools should do UX.

It might not be perfect, but the UX and onboarding UX Bubble employs are easily the types to make things easier for non-developers using a no-code design app for the first time.