[0:05]Hello everyone, welcome to another Stucken Expert session. My name is Trevor Ericsson and we are extremely excited today to have the co-founder of Unbounce with us, Ali Gardner. Ali has seen more landing pages than anyone else on the planet, and if I have my number correct, it's somewhere around 1,000 landing pages a week. Ali is an opinionated writer and an international speaker on conversion-centered design, and today he's going to be talking about the seven principles of conversion-centered design. So, without any further ado, Ali, we'll turn the time over to you. Okay, so today I'm going to be talking about marketing campaigns, how to make high performance marketing campaigns specifically by using landing pages. Um, and on the subject of landing pages, I'll be sharing my framework for high converter landing pages, which is called Conversion Center Design. Now, before we get started, if you see a slide like this, this means there's something you can download or reference. I put this page together, it has five downloads, so there's, uh, templates for the exercises I'm going to show you. So you can, so it's super actionable and you can do this stuff when you actually get to doing these things for, uh, for yourself. So, like I said, conversion center design or CCD, these are the seven principles, attention, context, clarity, congruence, credibility, closing, and continuance. Um, on the Y axis, we have delight at the top, so these are the positive brand experiences, this is what you're trying to aim for. And then on the bottom, we have friction, so these are the things that push against us actually converting. Now, if we look through the six principles, you need to get to number six for the conversion. That's closing after that, it's post conversion, which I'll get to later. So an average campaign would look like this, you get there, it's not good, it's not bad, it's just average. You get to the point of conversion, this is what we're trying to do, this is a perfect campaign, it's delightful, it's a nice experience to go through. But this is more like what your campaigns actually look like. You know, you're doing some things well and some things poorly, and the beauty of looking at it like this, and I'll show you exactly how to plot yourself on this, is you see where you're doing wrong. Where you're going wrong in your campaigns, so you know where to start the optimization process. Now, there's one very fundamental concept in CCD in landing pages in general that I want to, I want to start with. But for some weird reason, I'm not very good at getting the point across, so I, I reached out to some friends in the industry to see if they could, uh, help communicate it on my behalf. Some, quable, some quo, some qua, some quap, some quaddle, some what? Okay, maybe they're not very good at it. Um, this is what they're trying to say, this little simple little acronym, never start a marketing campaign without a dedicated landing page.
[3:17]Okay, that's the, that's the overarching principle here. Um, but by the same token, never build a landing page without a campaign goal. You know, you shouldn't be rushing into a, creating a, a landing experience, your landing page before you've established what the purpose of your campaign is. Now, this guy is in a museum and he's staring at this giant wall of skulls. There are skulls everywhere. Now, what this represents is horror vacui, which is Latin for a fear of empty space. Which, you know, unfortunately, there are, there is an affliction that's too all too common with, uh, marketers and the designers that marketers get to do some of their, some of their work. You know, you get things like this, the Million Dollar Homepage, um, or more realistically, this. I mean, yes, you're, your, your homepage isn't like this, but these do exist. You know, there's, there's not one pixel of white space here, it's just crammed full. You know, because everybody wants something on their homepage. Right, each department, oh, it's such a high traffic page that if you've anything that's on there gets a lot of attention. So everybody else is, well, I want my piece, I want to get on there, and that's what causes these problems. So, principle number one, this is attention, and it's using attention-driven design to apply focus to your conversion goal. Now, I'm obsessed with landing pages, everybody that I know knows this. It probably bores them to death, uh, so I have a Google alert set up for the term landing pages. This came into my inbox, it's a press release of a company who has a new, a new feature, which is landing pages in their platform. So I'm like, ooh, what are they doing? So I go and check it out, there's only one link on here and it takes you to this page. This, uh, this homepage. Now this is a terrible landing experience and here's why. This could take a while. Now the reason it's bad is the attention ratio there is 163 to one. Attention ratio is the ratio of the number of things you can do on a page to the number of things you should be doing. And when you're running a marketing campaign, there's only ever one goal, whether it's to download an ebook, register for a webinar, start a free trial of software, request a callback for a consultation, for your service. Anything like that, there's always only one goal. Now let's just quickly look at another example. I'll go scroll down and let's look at a lot of links. This is a long, long page. Look again, look, look how much there is to do on this page. In this case, attention ratio, 86 to one in an email. So this, this attention ratio problem exists on your website, but it also exists in the email part of your campaigns. So now if you put that inside Gmail, for some context, including the interface, that's 130 to one. So, when you do these things, the chance of your campaign goal, the thing you want people to do, actually happening, is really, really low. It's a really bad way, it's a bad landing experience. So, the first principle, you you've killed it there, you've damaged your campaign right off the bat, and the chance of you progressing all the way through, when you start creating a bad experience right away, it's really, really slim. So, this is immediately we have to fix this problem. Let's fix the attention problem. So here's an ebook, uh, download landing page. This is the conversion goal right there, and down here there's some other helpful stuff, other webinars or ebooks you might like. So there's two things going on here. One is we're trying to be helpful, you know, it, you know, we get caught up in these, um, best practices or things that happen, uh, in the industry. So this is more like the Amazon model. If you like this, you'll also like this. That's fine for e-commerce, but for something like this, it's not fine, this is Wikipedia design. You're trying to be helpful and move people around. Now, test this against just that single conversion goal. So our attention ratio is 10 to one versus one to one. And that's what happens, a 31% lift in downloads because we removed those distractions, it sounds simple, it is simple. So, we've fixed the attention problem. Now we're creating a delightful experience, and, and you might be saying, well, what's delightful about that? Well, it's delightful because I didn't make you think, I didn't make you think about what you have to do. It's obvious, there's only one thing you can do, so it's, you know, that's what I mean by delight in that sense. It's, it's just a very simple process, there's no choices to be made, other than do it or don't do it. So as attention ratio goes down, your conversion rates go up. But then you've got someone saying, oh, can't I just have one more link on there. Come on, I, I have this thing coming up, this promo, can't you just, you know, can I share some space on your page, give me one link. Well, let's test that. This is a landing page course that I wrote, and the attention ratio here is one to one, that's the button you need, click that and you get into the course. So, I tested it with a link there. Now, the rationale behind that was, there's a, a psychological principle called the Hobson's plus one choice effect. And the theory is that people like to make a successful choice. So, if we give them an option that they don't want to do, then they click the thing that they do want to do, and they feel good about themselves because they made a good choice. Okay, so the choices here are, go and start the free course, or start a free trial of Unbounce. Now, that's kind of aggressive. This is, you know, just a piece of content, and I'm saying you should sign up, you know, for a software trial. But I'm thinking, well, that's kind of an anchoring position there, it's like, well, I don't want to do that, so I'll definitely, I'll just do the free thing. 14% less people started the course because that link was there. Just having one extra link. Now, then I thought, oh, maybe everybody, maybe all these people are clicking on the link and they're going to sign up, this would be amazing win. And 2,000 visitors, and you can see here, 1,000 for each variant in the test. 2,000 total people, one person started a free trial of the software, one person. So, just an epic fail by putting that one link in there. That's the power of attention ratio when you fix it, when you do it correctly. Okay, so let's start talking about, uh, the visual aspects of design. So visual hierarchy is a very, very strong way of telling someone without telling them, like, uh, telling them visually that something is more important than something else. There's a dominance in there, this is the most important, then this, then this, then this. So, which brings me to attention-driven design, there are 23 principles for this. I'm not going to go into all 23, that would be assertive, it would take all day, uh, but I'm going to go through a couple of them. So first, proximity, this one's really, really key. I'm going to come back to this a couple of times throughout the presentation. So, elements that are closer together are perceived as being related. So think about the last example, that link close to the call to action, people make a connection, that this has got something to do with that, and, uh, you know, this can be really powerful in a positive way or a negative way, like we just saw. Anomaly, this is using, if you have a repeating pattern, things that are the same, if you just change one, it stands out. Now, think of an example of, um, a conference, you have a speaker list, so you have like 20 photos of the speakers, all circles. If you want someone to stand out from that, well, there are a couple of things you could do, you could move them to the top, um, or you could put them first in the list, or last in the list. No, this is something, if there's a thing called the primacy effect, if you in a list, the first thing people read or see is the thing they're most likely to recall about 30 seconds after, that's the thing that's stuck in their brain. The recency effect is that the last thing you see is what you will remember, but that only lasts a very short time, a few seconds, and then you revert back to the, uh, the primacy effect. Or right in the middle of it, you could change one of the circles to a square, so when I'm looking at this, I immediately go, ha, that one's different. Why is it different? So now I am, it's drawing my attention to it, just by changing its shape.
[12:09]Dominance, this is obvious, you make something bigger, it appears more important. Consistency, now, this is all to do with cognitive load. Um, let's say you have a long page where we have testimonials throughout, like testimonial near the top, and then one halfway down, and one near the bottom. If you design them in the exact same way, I only have to figure out what that type of content is once. So I see a testimonial up top, I know, I read it, I look at it, it's a testimonial. As I go down the page, I don't have to reprocess, I say, oh, that's a testimonial, that's a testimonial, because it's consistently designed. If you change it up, I have to relearn every time. Yeah, and you think, well, how hard is that? It's not hard at all, but you only have a certain amount of cognitive, uh, energy, and every time you deplete it, you ruin, you kind of, you damage the ability to make smart decisions, like over the course of a day, let's say. Continuation, if you're telling a story throughout your page, then you can use, um, design, lines and arrows to move people around your page in the order that you want them to experience it. And direction, point at stuff that's important. It's very simple, very blunt into the point, just if it's important, point at it. Here's an example exactly of that. So, this is a soccer match, a football game, and the team hadn't won or scored a goal in five games. So, the fans did this.
[14:03]Kind of like a flash mob trying to get people, get the ball to go in, in the goal. Okay, so here's a an A-B test, uh, using some attention-driven design A D D principles. A D D battles A D D in this case, you know, if someone is starved for attention, you know, they have a low attention span, attention-driven design is the solution to that. So, the goal of this page is to get people to donate cell phones. There are two ways of doing that. You can print off a label, put it on an envelope, put the cell phone in, and send it away, or you can request that they send an envelope to you, and then you send it off in that. So, those are the two ways that you can interact with that page. But it's really, it's so bland, it's hard to see that it's two things, the buttons are almost invisible. It's, it's just kind of complicated. So, they applied three A D D principles. First, directional cues, I just mentioned, now you can immediately see because of the two arrows, there are two options. It's a lot more clear. And then there's encapsulation, these forms are enclosed in elements, which really separates them from each other. And then contrast, the form stand out from the page, and the call to action stands out from the forms. This is a much better designed landing page, 53% lift in donations by applying three of these A D D principles. So, here's one of the goodies that I mentioned on that page. Now, this one, by the time you see this, actually, it's probably going to be out. Um, and I will put a link in there, I'm writing a book about A D D, about all of these principles, and that will be out in about a month's time, so you should have it by the time you, you watch this. Okay, principle number two is context. So this is all about designing a post-click, so after you've clicked a link or an ad, a post-click experience that speaks to everything that existed prior to the click. So, uh, that might be things like a number, a discount, a date, uh, a search query, anything, a conversation, anything that happened before the click, you need to carry through the click to the other side, to your landing experience. And the level of context, the type of context varies according to the inbound channel. Like, is it P P C ads, display ads, Facebook ads, email, co-marketing, whatever it is, there's a different level of context that, that exists. You know, if you think about email, there's a conversation that's been had, there's a conversational tone in the email. That's very different to, let's say, a tweet. So you can bring that conversation, the tone, the style of writing, onto your landing page, and your success really depends on how well you do that, how well you speak to the, you know, the pre-click promise. So let's start with P P C ads. The context here is search intent. So I've searched for something, I've seen an ad that was relevant, and then I click through to a landing page. This is where message match comes in, which I'll explain here. So let's say I search for next day flower delivery. This is a great ad, it says next day flower deliveries, that's what I asked for. There's a 10% discount, and it's flowers, obviously. So those are the three pieces of content, flowers, 10%, next day delivery. Then I get here. And yes, they have flowers, they've got one part of context right. There's no mention of 10%, and there's no mention of next day delivery anywhere on this page. Now, it does say same day delivery at the top left there. Well, what's that going to do? That, I'm going to go, oh, this isn't, I don't have to be in a rush, I can come back tomorrow and just get it delivered same day. Well, if I do that, I'm going to search again the next day, most likely, and I'll get a different ad. Because now I'm searching for same day delivery, and I'll get a different landing page, a different, you've just lost my business because I'm going somewhere else because you're not delivering on the promise you made in the ad.
[18:13]That's a message match fail. So message match is taking the headline or what it says in the ad, and replicating it as the headline on your landing page. It lets you know that you're in the right place, that you made a good click. You feel, well, you don't feel bad about it, you know, you're not, you're not thrown into a situation that that isn't relevant to you. So let's try that again. Searching for an online grad course. Online master's degree. Okay, this sounds good, I click on this, and then I get to this, I'll zoom in a little bit. This is the experience I'm given. So, let's first, let's quickly fix this, let's fix the attention ratio. Ah, immediately, it's so much nicer. You take all that junk away. But now, study anywhere, reach your goals online. That is not what you promised me in that ad. You promised me an online master's degree, so to fix that, you just change the headline. It's not hard. Now that's exactly what I asked for, so now I'm going to go, oh, this is great. I'm going to read a little bit here, I'm going to watch the video, and I'll fill in the form if I like what I, what I find here. That's perfect message match, well, it is, because I fixed it.
[19:31]If you're doing anything visual, so display ads, banner ads, Facebook ads, they have a visual component, so now there are two match things, two elements of context, design match and message match. So here's a, here's an ad, this is actually on a phone. It's a Facebook ad for Hootsuite, and the context is there's a guy with a laptop, and the headline is Hootsuite Social Media Management. And this is the landing page. The world's number one social relationship platform. Is this online dating? That's not what I asked for, it's not what you promised, and where's the guy with the laptop gone? Zero design match, and zero message match. Now, this is Hootsuite on an off day, they've got some of the best landing pages I've ever seen. So, this is, you know, something went wrong on this particular example. Now here's another one, Pathful. Look at this. There's a very dominant green color, ready to take A B testing to the next level. And here's the landing page. It's exactly the same visually. So I know, and the copy is the same, I know I'm in the right place, so I'm going to take action here. Perfect design match, perfect message match, that's what you need to be doing. Bring the visual from your ad, because that's what triggered me, right? If I saw that, and I go, yes, I'm interested in that, you know that I responded well to that, so bring it through the click. Email marketing again, design and message match, because there's also a third one, which is conversation momentum. If you're speaking to someone in a certain way, bring that tone, like I mentioned earlier, bring that tone across to your landing page. Now, you're fighting a lot for attention but an email. If you can just see at the top here, this is the one I'm going to click on, bring a special treat home today. Munchies, cakes. So this is the email. Munchie's Cakes, celebrate all that is winter, family days. Okay, I mean, there's not really much there in terms, I don't really know what I'm going to get, but let's say I'm interested in these cakes. And I go here.
[21:38]Well, the cake that was on there isn't there, the messaging, cakes for all occasions, that's got nothing to do with family days or winter. There's nothing here, you've disrespected my click, and this happens so often. I look at about 1,000 landing pages a week, and almost across the board, these are the, these terrible experiences are happening. There's a few industries that do it well, uh, SAS, software products, they seem to be a bit further ahead of the game. Um, but here as well, there's not a single call to action on this page, you can't do anything with cakes. There's some navigation up here, and this is just a tab to go between these two things. There's nothing to do here, so the brand match here, you know, the, the visual design of the overall brand experience is good, but the design match is nothing, and the, uh, no message match whatsoever, and no call to action, terrible. Here's a better email. Art of attention, ironically, um, and that nice image of the lady up there, I click through. This is the top of the, the landing page. It goes further down, but it's exactly what I asked for, and I'm just trying to drill this home, this idea of matching the experience. Lastly, here's one, I watched the voice. This is the U S version of the voice, and at the end, after the singer went off stage, they showed this. You can go to Coles, and you can buy the outfit the singer was wearing. Great piece of co-promotion, co-marketing. This is what happened, excuse me, when I get to Cole's. Yes, there's a a banner about the voice, I'm like, yeah, I'm in the right place, I'm in the right place. And these are the only options, I can buy a guy's outfit. That's a content match fail. You promised me a certain piece of content, uh, you know, like in that case, clothes, and then when I get there, there's nothing. The more context you can grab on to, and bring across into your page, the more likely someone is to convert. Okay, Disney, um, they've put out a, a website for one of their movies. And the tech people behind the website started noticing a really high number of people who were clicking on the forgot password link. Like, huh? So they dug in, they went into the database to see, you know, what's the context here, why, why is this happening, or what's happening, and they see that the passwords that these eight and ten year old kids are making are up to 40 letters and numbers long. Like, why on earth is this happening? So, they go to the source of the problem, what is the context here, what are they being asked to do when they create their password? Pass, Imagine you can see where this is going, Passwords must contain at least six characters. Those are the instructions being given to these kids. So naturally, they're, they're creating passwords with their favorite Disney characters. The problem here is a clarity problem, the instructions are not speaking correctly to the target audience. So clarity, when it comes to conversion, is all about communicating the, the value proposition of your campaign on a level where, if you ask, what is this page about, you'll get consistently accurate results. And it's for, you know, if someone's scanning your page, we, we know, people are impatient, they scan your page, they look at the headlines, the subheads, that's what they look for for, uh, information to, you know, figure out if they're, this is somewhere they're interested in being. Here's an example of this a long page, I'm going to scroll down, but I'm going to read some of the headlines and subheads out to to do what I just described. Amplify your marketing, what you get, we've done the work for you, relevant up-to-date content, sign up today, engaging narrated video, cost effective, tax exclusive brands, add-ons, get started, success made simple, and submit. Well, I don't know how, how well you're following along with that, but, uh, it's hard to know what was going on there. So, here's an excellent thing you can do to find out if you have a clarity problem on your landing pages. Go to usabilityhub.com, they have three types of tests, one is a five-second test. Really, really simple, really fun, um, and you get to ask 20 people, you can do it as many times as you want, what, uh, any question, but I like what is this page about? These are the answers I got, content marketing software, video voiceovers, investments, and no clue. And that's a, that's a very polite version of what people were answering, people really did not know what was going on. And they get, they get a bit rude at times. So, what do they actually do? So, what do they do? Well, I had to re, I had to really dig into the details. There's nothing in those subheads to told me. I took about a minute and a half before I figured out what they do. It's retirement income websites. You would never have known that because none of that information was in, especially the, the top headline. It was a clarity problem. So, attention ratio was fine, one to one, that's great. Context, again, didn't see the ad, don't know, clarity wasn't good, and the congruence was terrible. So you can see again, this campaign is failing, you will not get past the congruence part of this.
[27:24]And that, uh, that worksheet, that again, that's in the goodies section, again, which has a list of these closers that you can test, based on different use cases.
[27:48]This is a work in progress, I'm going to make the list longer and longer as I go, and you can join in too. I've, I've made it so that you can comment in there, and I will add in your ideas. Okay, so finally, continuance, this is post conversion. We've got the conversion now, what should we do? You should always ask for something else after the conversion. So here's an e-book landing page again, this is by Lemonstand, some friends of mine, and it's a beautiful landing page, I love it. But what happens when you fill out the form? You get this, try Lemonstand free for 14 days. Well, I'm just trying to download an e-book. What happened to that? So let's fix this page. First, now watch this. We're going to fix the attention ratio. Oh, isn't that so much more delightful? There's no distraction, it's so nice. Uh, yeah. It's so good. But now we have an information hierarchy problem because if you look down here, this is what I need to know to be to feel comfortable that I've been successful. Thanks for downloading the ebook, you'll receive the link in your inbox shortly. In the meantime, try Lemonstand free for 14 days. That's what I need first. So just flip it up, again, like I said, it's always the placement of one and two. Got to flip these things around. Now I know I was successful, that's great. And now I might actually consider trying the software. And I'd add a little bit of A D D to this as well. Make it stand out. Now that's a really, really strong post-conversion experience.
[29:48]Okay, so to recap all of that, here's one final thing.
[30:08]Never start a marketing campaign without a dedicated landing page, that's my mother, words to live by.
[30:35]Thank you, Ali Gardner.
[30:54]Cool, I think that's all the questions, um, that we have in the queue. I had a couple questions for you. One, um, where can we go to learn more about you, personally, your company, and the cool things that you guys offer? Yeah, for sure. Um, well, here's a little promo for you just to kick things off. You know, Unbounce is a landing page builder, you can get 50% off for three months there. Um, Twitter is a great place for, to reach out, we're very active on Twitter, there's the Unbounce account, and then there's me, um, at Ali Gardner. Very accessible, so you can come and chat with me there, but if you have any direct questions, that's a good place to start, but you can also email me. I'm very open, you know, Ali@unbounce.com, you can get me directly there. And obviously, you know, unbounce.com are, uh, our website. Um, that'll be an awesome deal for students, um, professors are user base to, to test out on their own personal sites and things they have going on. Um, last question, we're always curious here to know resources and and different ways that our experts are learning. And so, we're interested to know what's a favorite book, um, of yours, all time, or maybe one just recently that you stumbled upon that you just love. Yeah, um, well, in terms of resources to do with this kind of thing, I recommend several things. Religiously read the Unbounce blog and the conversion XL blog. There, that's really all you need to read when it comes to conversion, um, and that landing page course, go to the resources section of unbounce.com and you'll see there are a couple of e-courses in there, they're totally free, and you can go and take those.
[32:46]Um, in terms of books, yeah, I became a public speaker, uh, one year ago in two weeks time, and the thing that made it successful. I read a book by a guy called Jeremy Donovan, it's called How to Deliver a TED Talk. And it's probably the most impactful book I've ever read. It's so good at he's analyzed hundreds of TED talks to find out what makes them successful, and it was, uh, yeah, a fascinating read, and it, it changed the way I approached speaking entirely. Awesome. Okay, well, our, our time is, is up today. Ali, we're, we're just appreciated all the different principles of conversion-centered design that you've shown, all the live examples, all the different things that you've suggested to do to fix pages to make them more convertible.
