https://www.youtube.com/watch?v=FWuGi6Kh7g0

Ever wondered why some bubble apps lose new users before they even get to sign up? Let me show you the onboarding mistakes that almost killed some of my own projects and how you can avoid them. Whether you're building your first app or you're a seasoned bubble developer, these mistakes could cripple your growth, blow your maintenance costs out of the roof, and make your users hate your app even before they log in. And I've seen a lot of apps really struggle with onboarding. But I'm not just going to rant. I've reviewed and upgraded many bubble applications and today I'll give you the exact onboarding workflow that just works. And believe me, we've tried a gazillion of them. Stick around because at the end I'll show you how to download my complete no code resource center that you can get for free. Let's jump in. The ugly truth is most bubble onboarding flows are clunky and they just don't work well together. Why? Because when you follow the default advice, you end up with a login and sign up split across a bunch of pages or different pop ups. Onboarding steps that get out of sync the moment you make an update. Frankenstein pop ups that go from your sales funnel to your login pop up. Third party login plugins and services that actually work really well until they fail. Man, I've done this. I've been there. We'll talk about that. It cost me months of having to fix stuff, all of these mistakes. And so I want to make sure that you don't have to go through the pain that I've already been through. And believe me, we've got a lot of apps under our belt. We've done this and we recognize that onboarding is a critical step. It's mission critical. You've got to get it right. So let me tell you a quick story. A while back, one of my apps needed a change to the onboarding. I thought, no problem, five minutes tops. Little did I know that one pop up was calling the wrong workflow, another page was out of date, and the logic that I thought was ironclad was a mess. It was spaghetti. And three hours later, panic mode stepped in. Users couldn't get logged in correctly. It was a mess. And I've seen this happen a lot of times, especially when you're changing from a major upgrade. You have to be careful and it doesn't have to be this way. So the first thing I want to talk to you about is centralizing your onboarding in one place. This is step one, all your login, sign up, password reset and onboarding steps, you should handle them in one single reusable popup. But there's a trick here and it's really important. I don't want the functionality to be in the popup. I'll explain that to you in a little bit. I'm showing you right now in this application. There's the pop up sign up here, but inside of it I have another reusable element. Why is that? Because you may need to incorporate your onboarding in multiple different places in your application. You may not even have realized that you may need that in the future. And you do. Let me give you a really simple example. Most of the time people are going to sign up to your app because in your header there's going to be a button. They're going to click sign up and it's going to open the pop up. And that probably handles 80% of your signups. That's great. But what if you run an offer for a new product you've created and it has a sales page and it goes through a checkout process and at the end of that checkout process they need to sign up for account on your application. Now, if all of your functionality is in that pop up in your header, sure, you could get to the end of the checkout process and then trigger the pop up in the header and it will show up. And then they can do that, but it's clunky. And the problem with that is now they may have gone from one pop up in the checkout process to another pop up in the header and the disconnect there. And if they don't finish, then you've got even a bigger problem because now they paid and they didn't know what to do. So by taking the functionality of that process into a reusable group, and it has all of the logic there, then you can take that group like I've done here, and just include it in the pop up on your header and you can go to your checkout pop up and you can include it as the next step in that process. And you know that you're getting a consistent experience for signing up to your application because you're using the same logic design, the same workflows. They're not duplicated anywhere. So that solves you a bunch of problems. And you're able to incorporate it into each specific use case that your application might have. This really is a big deal. It instantly reduces your maintenance time and trust me, it kills the onboarding Spaghetti problem that I found in one of my applications that I mentioned not that long ago. Okay, number two is use custom states for for the workflow control. So you want the onboarding experience to feel smooth. No janky reloads, no dumping users onto random pages. So you want to make reusable group communicate with the pop up or with that's including it. Be it the pop up that's in the header or the popup that's in your checkout, there needs to be some communication. Look at the custom states that we've created and you'll see that there's one here that's called close popup and say yes or no. So what that means is in my workflows, when I finish the process, I just switch close popup to yes. And I have in the header I have a workflow that triggers every time this custom state changes value to yes. And most of the time all it's going to do is close pop up. Okay, so that's how you get your group that you've created. For all of the functionality to communicate with its container, you may want to also expose the status or the step in the process. I recommend that you use one reusable element for all of the different possibilities. You have a sign in possibility because they already have an account. You have a sign up possibility because they're new. You have I've forgotten my password possibility. So those are just steps that you can also trigger automatically from the container. You can set this status. So if you know that you're in a checkout form and you know that they just made a purchase, then by default you can set it to the new user step of the onboarding process to create a new account. Now that still has the option here to sign in if they already have one. So if you see here close this down, if they already have an account, they can just click on sign in and it'll switch it back here. So it's very agile. You're able to use these custom states to control the behavior of the flow, even though they're encapsulated inside a reusable element. This is an easy trick for you to use and it also makes your life easier when you're trying to reutilize the same functionality. Number three is avoid third party plugins for mission critical flows. Okay, look, if you've been watching my videos for a while, you know that we have an application called Zircles, which is a Web3 blogging platform. And if you don't know about it, go check it out. It's pretty awesome. It's pretty cool. Entirely built in Bubble utilizes the DESO blockchain in the onboarding. There's a lot of DSO functionality that we've integrated into that flow. We believe it is the world's most simplest web3 onboarding experience that anybody's ever put together. Automatically creates their wallets. It does all of the plumbing stuff in the background so that it's just a seamless experience for the user. But in the early days when we first started with Zircles, we used a third party service to create secure tokens that went through email and it was a way of sending them a code and then they put in the code and then that would create their account. It worked okay. It was a little bit complicated in the back end because there were a lot of communications going on. But guess what? About 60 days after we had launched Zircles, the damn thing broke on a Friday afternoon. We have no way of logging in or creating new users. And you guys are on some holiday and it's not going to get fixed until Monday, maybe Tuesday. And it was just a real pain and I learned the lesson there. Regardless of how slick the solution might seem, your mission critical functions like sales and logins and signups have to be under your control. Now there's always dependencies. You're going to be dependent on a payment processor. No way around that. It be it stripe or be it whatever, one from your bank business isn't completely fail safe. But please don't use third party plugins or third party services for your onboarding. If you want to do magic links, you can do those in bubble. If you want to have confirmation emails that they have to click off on before they actually can log in, you can do that natively in bubble. If you want to have them put in a code, you can do that natively in bubble as well. So definitely avoid this problem. You need extra validation. You can do it, whatever it is, but don't rely on third parties for that. Number four is integrate your onboarding into your funnel. We already mentioned this. In fact here if you go to in this application we have another reusable that is for stripe payments. I have a special video all about processing stripe, how we do it. It's a bit different than the native bubble functionality just because we want to give our users a completely controlled experience so that you can guide them step by step. But here you can see that we have the onboarding, the same group, reusable group embedded into the stripe payment process so that they pay and then they create their account all in one seamless experience with the same colors, the same buttons. And that's really important because every little bit of friction you add can lower your conversion rates. So you might be thinking, Dennis, this sounds easy in theory, but my app is complicated. Trust me. I've built onboarding for fintech, applications, for AI apps, for marketplaces, you name it, and everything I've talked to you about in this video scales with you. Quick pro tip here is always use a backend workflow for everything that happens after the user puts in their name and their password and says sign up. If you've got to, send them emails, if you've got to create data in different tables of your application, if you have to. Whatever you need to do in your application, do it in a backend workflow that triggers automatically once they've completed the signup, even if that means taking them to a separate page while that happens. But you don't want to bog things down and do things in the user's browser, first because it slows down the experience. But second, if something goes wrong, if they happen to close the window or they lose electricity, all of those mission critical steps in the workflows are going to get broken and they're not going to happen and you're going to end up with a mess that you're going to have to fix manually later. So it's really important to loft load that into a backend workflow. Here's the hard truth and why all of this matters. User onboarding is the first impression your app ever makes. If you mess this up, it won't matter how beautiful your UI UX is or how clever your solution is, they'll never come back. So if you want your app to scale, start with onboarding. If you want to sleep comfortably at night, start with onboarding. If you want to avoid the 50k rewrite when your app takes off and then your onboarding breaks, start with the onboarding and don't be afraid to go back periodically and say how can I make it better? How can I reduce friction? How can I make the experience more enjoyable for the user? How can I make it simpler? Iterate over that time and time again. It's that important. So let's just recap real quickly. Centralize everything in one reusable element and then use that reusable element inside your pop ups or inside your pages wherever you need it. Drive onboarding with custom states so that that reusable element can communicate with where it is embedded. Never trust your critical workflows to third party software, integrate your onboarding into your funnel, and then offload all the heavy logic into backend workflows. If you do these five things, you'll be ahead of 90% of bubble developers and you'll future proof your application for whatever comes next. Listen, this is just the beginning. If you want to dig deeper and you want more help, reach out to us here@ratio.dev and we'd be glad to talk to you. And in the description below, you'll find a link to our no Code Resource Center. It's absolutely free, it's chock full of vetted plugins of how to videos, podcast episodes, great books to read, and a whole bunch of more information that we update every week to improve your journey building with bubble. Grab that and I hope you enjoy it. Helped you and I will see you in the next video. Thanks again.