Lessons

Lesson Info

Assigning A_B Testing Variants in Unbounce and Assigning Traffic Weights

How do you design fans and welcome back in this lecture, we're gonna go ahead and start creating our first variant of this page so we can run an A B test to do that, we're gonna go back to our overview pane and this is where all our data and our results are gonna be. This is where our email integrations are gonna be. We can view our forms, view our leads, generated CS, view of our leads but this area up here under the A B test center is what's important and obviously like you just saw in the previous lecture, I submitted a form so we got counted as a conversion. Right? So it's cool to see that actually works. We see four visitors which probably means that I just visited this page four times from unique browser windows and then 26 actual views of the page and 25% conversion rate. Okay, really great, fantastic. And this is the weight right now because it's only this is the percentage of traffic going to any given variant because we only have one variant. Obviously this is going to get 10...

0% of the weight. Now let's go ahead and create a new variant. There are two ways we can do this. We could either click add variant and literally start from a blank slate or use one of their use one of one bounces built in templates and create a totally separate design but that's definitely not recommended because you need to do a lot a lot of statistical testing and have a lot of traffic to be able to figure out which variables across many different new variables, many new different design element on the page is working better. You could if you wanted to just do a simple ap test on two totally separate landing pages to get a sense of which one's better. So you could have a variant that's completely separate or just started again from scratch Nine times out of 10. I'm going to duplicate this variant and just modify one or two different variables and do a test that way. I like that much better. Especially if you're not dealing with huge amounts of traffic. It's a much more statistically reliable sort of test. So click the little gear icon and select duplicate this variant. So now I have first variant and I have first variant copy one. So the first thing I'm gonna do is name them. This is gonna be the let's say the base and this is going to be what I decided that I want to change the hero section by removing these by removing the supporting, supporting supporting text and just having the headline. That's gonna be my first test. So I'll do um hero with just headline. Right, so that just quickly tells me a basic idea of what that test contains and we can add multiple variants if we want to let's just for now start off with just A and B to edit this variant. We're simply going to go back into the edited, editing screen, going back into the landing page builder. And now if you look over here on the top, I'm in variant B which is the Challenger variant and we have a Champion variant which is variant A. And I can toggle between these two. Remember once I'm doing any work on this page nothing is going to be affected on variant A. Alright I'm just affecting variant piece so I want to delete this entire section. Alright so I want to test how this page might function if I remove some of that supporting information and I just went with a strong bold headline and a little bit more um wait on my graphic over here. Alright so bring that back over there and made it a little bit larger. Maybe I'll move this entire form section over a little bit right just for the sake of some visuals, bring this over make this even bigger. So from 48 will go to no I don't Wanna go to 72 so I'll go into my source and we'll go to let's say 56. Okay so now bring this down over here and obviously our um Mobile pages Gonna need some work. Our line height is gonna have to be let's say something like 77 that's that looks fine. Um And you know it's too much of a line height so I'm going to go into my source code and give myself a 60 pixel wait 60 pixel font size and I'm gonna write my own line height style line height will be, Let's see, 73 pixels. Alright, if I make this a little bit bigger here. Alright, fast and easy CPAp enrollment big headline. Bring this graphic down just a tad we are the new york state CPAp experts. Again, this is um not resolving properly. I might have to do an important tag And make this so 70. Alright, there you go. Alright, that's working a little bit better. Um put this in bold let's say okay, like so this could be brought over a little bit, brought over a little bit. Okay, so this is a different design um fast and easy. CPAP enrollment, very clear, big headline and now we're just dealing with this for me and maybe I'll make this box a little bit even wider. Now, if you're, if you're wondering and you're thinking, you know, I have multiple variables at play here. I do right. We have minor variables at play. Like I made this box a little bit wider. I moved it over a little bit. I change the size of this image but you have to use a little bit a sense of your own intuition when you realize which variable is actually gonna be accounting for the difference and that's gonna be obviously removing distract potentially distracting text. Right? We have it might be good text and it might be not. That's the idea of an A. B test, you'll never really know because we were you cannot predict whatever you however good you are at this sort of thing. You can't predict how this stuff is actually gonna work and what people are gonna like to see and read more. So the main difference here is this headline being bigger and the all the supporting text being moved away. So if I save that and you have to you have to publish your variance every time you want to load of area. But let's say we go over to variant A. We can just toggle between these two different designs. So here's variant A. With my um sub header text over here in my bullet points and here's variant B with just the big headline in the hero section, I'll republish and done. Go back to my overview and now I'm gonna want to give this some weight. Right? So let's say I want to do a straight 50 50 tests, just hit 50 and hit enter and now it redistributes the weight. 50 50. This just if this if I want to only give this 30% of my traffic 70 30 it's the same U. R. L. That's one thing that's important to remember, it's the exact same U. R. L. So it's the same website but if you load it enough times you'll see that the results will change. So let's say we give this variant 80% of the weight and we re publish the page. Remember every time you even change the weight of the variants, you have to re publish every single time, that's just how it works. Alright, so now I'm giving variant B 80% of the traffic. Typically I'll start off with just 5050 tests unless we have a champion variant that is working really, really well and you might not want to do that right? You might not want to give so much weight to a new design, you want to just test it slowly in case the results are much worse. So if I refresh this page enough, I tried a new browser, it could work. So I'm gonna go into safari real quick. So in safari this seems to work great. Right? So it showed us the new variation of the page, Everything is the same. Just different design. Just to make sure it's working. Um you definitely don't have to worry about doing a test like that because I've never had any issue like that. Let's go ahead and change this to 50% again and it redistributes. Remember you can only change the weight of challenger variants, you can edit the weight. The weight of the the champion Marion is always going to be static or readjusted based on the weight of the other variants. Say we wanted to go ahead and add yet another variant. So let's just do that quickly and once again duplicate this variant and now we have Challenger variant C. And I'm gonna edit it. What I want to do now is just rearrange the elements from variant B. So it's kind of like a modification of variant B. So I'm gonna make this center center the text here, center this text, which it already is and we forgot to change the mobile version of Arian. People do that in a second. Bring this over here, bring this, let's see, we're not sure we'll do this yet. I'm gonna bring my form to the center of the page, make this full width, change the font size here, Let's say back to 48. All right, bring this up, center this on the page, center this year. I have my form. Alright, so see if this design works better for people and once again we could pad the content like that, that's gonna give us the gray, which we don't want. We could simply just I like I kind of don't mind the overflow here. The blue form overflowing into this section. That doesn't bother me. Um in a way it can be kind of neat, you can even bring this up a little bit more, Say two. Right in the middle of the email form, give us a little bit more visuals of that background image that doesn't stretch as much and then I can just move this stuff down, right, we just move all this stuff down and move this box down again. This is the beauty of having these boxes that we created. So we don't have to move every single individual element, move that down a little more padding, A little more padding, little bit more padding again. I'm not gonna go crazy with exact measurements here because you get the idea right, We did that in the previous ones. Everything else is the same. What are we gonna do with this image here? I do like this image. Let me bring it over here and bring this up a little bit and something like that, but send it backwards behind the blue. Alright, so I think that looks pretty good in rolling CPAp here. Alright, so I'm happy with that and we're going to obviously have to change our mobile view because we made some modifications. This shouldn't take too long. Now let's just go back to desktop to make sure everything looks good. Nice. And save it, go over to variant B and just make sure our mobile is looking good and go back to desktop. Make sure we're all good we are save and don't forget to republish Alright, once we're all safe and we're all good to go back to overview rename Um this one. So hero. Just headlines centered. Alright, so now we have three variants, I'm gonna give this, let's say 33% of the traffic. This is going to get 33% of the traffic. So we have 33% of the traffic going to see 33% of the traffic is going to be and 34% of the traffic going to our current champion, which is the base variant. Now, once you have your results in, right, so once you start getting results, um, they're going to show you the number of conversions, conversion rate, views and visitors for each variant and then the confidence interval. Right, so you want this confidence interval to be like 90% plus. That's it's a statistical p value that basically says that the better conversion rate or the worst conversion rate does not due to chance and it's actually due to being a worse or better design. So savory in b becomes our winner. We could click the gear icon and could promote a champion and then we could give it more weight and then create new variants. Um, things like that. In the next lecture, we're gonna talk about integrating our leads, the form submissions with an email marketing tool, like mail chimp, whatever one you're using. Uh, these are some of the more popular ones. We could also just be generating CSP of your leads, We're going to use mail chimp because a lot of you probably do use mail chimp and it's a great tool to use. So once again, don't forget to republish that page. Once you added variance and you change the weight of the variants around. That's always very important. And I will see you very shortly in the very next lecture.