UX-Flows in KI-Apps mit dem Mobbin MCP verbessern

Hey guys, so in today's video, I want to show you how we can improve certain UX flows in apps that you're building with Codex, with Claude Code, with Cursor, Grok, but whatever it is that you're using. For example, here, this is like some gym app where you can log in and you can view different classes with different coaches. And I can click on "Join" and it comes up with this little sign up form. You know, this is a one shot creation by Codex and I can put in my my information, click on sign in or sign up, and this is what we get, just straight into the app. No, a fancy onboarding or no practical onboarding, no way for me to kind of understand what or how to get started or what to look at. But with just a few prompts and with one specific MCP, I can go through that same flow but have it completely different. So now I can click on "Join" and I get this beautiful pop-up that allows me to log in with Google, with an Apple account, with my email. Then it asks me about my different goals. I can say "boost my energy," I have to pick my schedule for example, and then it chooses the right coach for me. I can then click on "View my booking." And then once I'm in, I get this dedicated step by step um guided tour on how to actually use this. So I can click on "Continue," "Read more," "Continue," "Continue," and so on and so forth. And then, boom, I'm in. All right, so it all starts here in Codex. I basically vibe-coded this landing page. Also, I created a basically like a platform where you can view different classes, fitness classes for a gym, just to kind of show you an example of what we're working with today. So, right now, we get our landing page. I can scroll down. You can read more about about what this is. And then you can "Join Forma," that's what it's called. And here, you know, again, the visuals look very vibe-coded, but what I also want to show you is that the flows are also pretty simple, right? We went from Home to a simple login button, right? Or join button, sign up button. Nothing fancy, no, no specific banners like with a promotion or no creative calls to actions, right? So, we just get this and then over here I can write my name, I can then put an email. So, I'm going to put my my email address. Then I'm going to put a password like this, click on create account, well, it has to be um six characters. So, let's click on create and then look, we're in. So even after sign up, no onboarding, I have no idea what to do now. I have a bunch, I have three different tabs that could be more and I have a bunch of information over here that I don't really know um how to navigate, I have to teach myself, right? And I kind of drew up the flow of this app that I'm trying to build here where I just showed you, we went from the landing page to the signup and then we went from to to the Home, right? And so what we can do here is we can find a way for an MCP to help us improve this flow over here and help us improve this flow over here. Now, in order to do this, I'm going to be relying on Mobbin.com, and Mobbin is well-known for having a large database of thousands of images of different not only visuals, like I said before, but also flows of different apps. So, for example, I can scroll down over here and we can click on "Magic Path," for example, and then you can see screens, you have UI elements, you have flows, and for example, we have the onboarding flow, we have the my files, generating a prompt, so it categorizes all of these different flows. So, I can, for example, say, "Hey, how can we make this sign up flow more improved in a way that the call to action is still in the landing page, but it's presented to the user in a more interesting way." And that's where I'm going to be using the Mobbin MCP, because instead of me having to actually manually go into mobbin.com, I can just use this MCP. And by the way, it's super simple. All you have to do is click on "Install MCP" and then you just have to like, you know, if you're using Codex like I am, just copy this and Codex is going to authenticate or authorize your account for you, but once this is installed, Codex is automatically going to get the entire database of Mobbin and it's going to do that research for you in lightning speed. What you can also do is you can go over here and go to your plugins, and you can search for "Mobbin" like this, and click on install. And it then opens up a new tab where you just have to authenticate your account. So I can click on "Continue," "Open ChatGPT," this finishes, and now we can try it. And so I can chat to Codex and I can just say something like, "Hey Codex, so what I want to do here is I want to improve the overall experience of signing up from the landing page. Right now, I think it's very straightforward. Can we use the can we use the Mobbin plugin to kind of brainstorm on different ways of how we can improve this overall experience?" And that's where I'm going to be using the Mobbin plugin, because instead of me having to actually manually go into mobbin.com, I can just use the MCP. And so what Mobbin gives us is it gives us three different, completely different variants to look at. So we have "Reserve First," which is actually recommended by Codex, we have "Guided Class Match," and we have "Premium Express Signup." And for example, this first one is straight out of this one, so I can click on this link and we can open it up over here, and we can kind of see how this looks like. I click on "Join," we get this pop-up, and most of these are not from a specific example, but they actually combine different examples. So, this third one, for example, combines this one from Clerk and one from Skillshare. So if we click on this "Clerk Benefit Plus" form layout, I guess it's a combination between this and this over here. And so what I can actually do is I can open up a new tab to kind of visualize the three at the same time. We can open up a new browser, we can then search for "magicpath.ai" and you want to just sign up for an account. And then again, you just want to install that MagicPath plugin. And then I can say, "Use the MagicPath plugin to actually redesign these three different directions in this file." So we can then send this, and then as you can see, Codex starts actually building out these three different directions in one view, which is great for us to kind of compare, and eventually choose one for our final project. And so now what we get is we have this first option which is more like a pop-up. We have this one which is more of its own separate page, and then we have this one which is more of a quiz, right? I actually like a combination between this one and this one, so we can actually tell um Codex to to build something like this. And so I can say, "Hey, I like the layout of this first one, the Forma Reserve First Signup as a pop-up, but I love the step-by-step guided registration um direction from this one. So let's combine these in a new component." So let's go ahead and submit this, and now we get this new one. Over here, and I can just kind of scroll out and move this down here so it's a little bit more visual, and so this is what we end up getting. And I really like it, right? Very simple but very aesthetic design compared to what we have now in terms of the the flow, right, instead of it just uh signing up and us giving our email, we can now sign up with Google, we can sign up with Apple, or with our email address, plus plus we can also not only create the accounts but go through our goals, go through our schedule, instead of just us diving straight into the dashboard without us knowing what to do. So we can say, "I love it. Let's implement this in the actual app." So let's click on "Enter" and then we can go back over here. All right, and now once this is done, I can go ahead and click on this "Join Forma," boom, we get our new pop-up and I can go ahead and select a choice, I can choose something that I want, for example, like "boost my energy," click on "next," I'm free only before work, create account, perfect, it's now created this personalized schedule for me, "view my booking," and boom, I'm in. But let's say that we're in and we don't really like the visuals. Well, again, Mobbin can help us with that. So I can say, "When logged in, I think the visuals are off. It is too confusing and I don't know how to properly navigate myself. Number one, I would like a visual polish of this, and number two, I would like a way for me to have a three to four-step process to show me how to navigate through this app. So use Mobbin again to help with this." And then basically the result that we get is that we have different inspirations from four different or from three different uh examples from Mobbin. So we have "Quick and Tour," we have "Jasper Tour," "Time to book schedule." So we can just click on "Quick and Tour," for example, and this is what we get, right? We have like a little card on the bottom right that takes a step-by-step. And this one from Jasper that actually like highlights that this specific section plus this little pop-up over here to show you or to indicate the different steps of the onboarding. And then basically to test this out, what I can do is then I can go ahead and click on "sign in," and then we can just type in my password like so, click on "sign in," and we now have this little pop-up on the bottom right, and this is highlighted, so "Start with what fits today," click on "Next," "Open the details before you book," click on "Next," "Everything booked lives here." Click on "Next," "Manage Forma your way," and then start exploring, and then you can start, beautiful. Even though that was great, I still do not really like the UI of that. I don't really I didn't really like that bottom right card. It kind of looked very clunky. I would like it to look more like this Jasper one. So I can say, "Make this experience look more like the Jasper example, where we have the card right next to the highlighted area and the card has a simple design." All right, so we can then start that flow again. So I can click on "Sign in," then put that password that I had before, click on "Sign in," and now we have this little card next to it, this looks much, much nicer. Click on "Continue," "Continue," the card moves um to where the highlighted point is, click on "Continue," finish, beautiful. So, yeah, this is like the typical way of using Mobbin to help improve the visuals of what you're building, but what I also find very powerful is just also trying to improve the flows of your apps, because that's something that most people miss out on. They just focus on the visuals, but having a flow with a better user experience at the end of the day, will be highly appreciated by your users and thus give you a better product. So, anyways, guys, hope you enjoyed today's video. If you have any comments or questions, please let me know that in the comments below, and like always, thank you all so much for watching, hope to see you next time. Goodbye.