presented by unbounce logo
EP. 01

Five Hot Seconds

EP. 01

Five Hot Seconds

What happens when multiple goals are mixed into one marketing campaign?

Powder White, a booking service for ski holidays, wants to collect leads by sending email traffic to a landing page. Unfortunately, this goal is lost in a mix of competing CTAs, unclear copy and disappearing form fields. Oli tries to right the ship with a 5-second test in UsabilityHub and some quick copy edits in Unbounce.

So you think your landing pages are good? I beg to differ. That’s why you’re at The Landing Page Sessions. I’m Oli Gardner and in this episode we have Powder White Chalets, so it’s all about skiing and staying in nice, warm log cabins.

Let’s Look at What Powder White is Trying To Do

The goal of this page is to collect leads so that expert travel agent-type people can get on the phone or email and start helping to book the ideal chalet vacation with people. The source of traffic is coming from an email. Okay, first weird thing. It’s got navigation in it. Not a fan of that. I talk about tension ratio on landing pages, how many things there are to do. Compared to having the one campaign goal, it’s all these distractions. The same applies to your email marketing. The more links you have in an email, the less likely people are to hit that one that you want them to click. So be wary of that. Having navigation in an email is really bad, so don’t do it.

Evaluating the Email Against The Campaign Goal

Let’s take a look at this. Okay, well if you click on any of the chalets here – chalet, chalet…I’m from Scotland, I probably say it weird. Click on them and it takes you to the website where you can book and all that kind of stuff. But that’s not the goal of this campaign. The goal of the campaign is to get leads, so you don’t want to be doing that. To get to the landing page, you have to either click this “Click Here” button, a link, or down at the bottom, this “Send Details” button, but nothing else. So if you’re goal is leads then it’s worth not linking any of these—just have these two things. But they need to say something a bit more.

For the first link, you’ve shown down here you can do a button. So make the first one a button and have it say, “Let our experts find the perfect chalet for you.” Then repeat that on the button at the end of the page. It’s good in an email to have, if it’s long like this, repeat the CTA or have it be the same so people don’t…trying to figure out whether they are maybe different options. And because there are two things, this is eComm, right? You can go off and you can book online or you can call, or you can get in touch over email, which is what you want to do in this case.

So you might need two campaigns. One campaign where you’re just trying to get leads, so you can’t click on any of the photos, and one maybe where you can do that only to get people to book, so maybe splitting your campaigns down the middle might be a good approach. That way you’ll at least learn how successful each one is.

Getting To The Landing Page

All right. So let’s look at the landing page. It’s important that the expectation that you set in the email is followed through when you get to the landing page, and it’s all based on the context that existed. Part of that context is what was written on the link or button that you click from the email. So it was like Click Here, or “Submit Details”. Neither of them gave me an expectation of what was going to happen, so when the thing happens, there’s a complete disconnect. Because Submit Details…no one’s going to click Submit Details for a start. What does that mean? You’re in an email, Submit Details. It’s kind of meaningless.

Creating a Convincing Landing Page

But let’s assume people did…you had a better CTA and people did come through to the landing page. Now, the goal here is to get expert help, and it’s to get people to want expert help because not everybody does. I don’t like someone else booking my travel for me. I like to do it myself. So you have to convince people of the value proposition of your business, which is that this expert help is going to be better than you doing it yourself. So think about congruence, which is everything on your page being aligned with the campaign goal.

A good example of this, of incongruence, is the headline: Ski Chalets in Verbier. Okay, that’s not to do with what you want me to do which is buy in to expert help. So a headline such as “Let Our Chalet Experts”…I feel so awkward saying that word. “Let Our Chalet Experts Find You the Perfect Chalet and Price.” That’s congruent. That’s in line with what I want to be achieved on this landing page. I mean, you have that in the subhead here. “Our Chalet Experts will help you find the right chalet for you.” So bring some of that clarity into the headline. It’s very common that the clarity exists in the subhead, and the headline doesn’t have much value.

Testing Your Landing Page Headline in UsabilityHub

So I like to do what I call the subhead/headline flip, where you just reverse them and you either look at it, or even better you run a test to see which one has more clarity. And the simplest way is to do a five second test at UsabilityHub. I’m going to quickly show you how to do this. It’s great. If you don’t know what a five second test is, you take a screen shot of your landing page. You upload it, it gets shown to people for five seconds, and then they have to answer a question. I’ll ask, “What product does this company offer?” or “What service do they provide?” Something like that. And then you get a bunch of…by default, you get 20 answers and you see a word cloud of responses. And it can be fascinating, hilarious, you’ll get lots of, “Don’t know,” “No clue,” “WTF,” it’s pretty fun. So I’m going to show you how to do that.

What I’d do in this case is I would take a screen shot of this, so like that, and I would go into Photoshop. Okay. That’s my landing page, at least the above-the-fold kind of portion. I’ll save that. UsabilityHub, this is inside the interface. I’ll create a new test from scratch; I’ll choose a five second test. I will upload my screenshot there. Okay, so test instructions…I’m not going to prime them with anything. You can set up and say, “Take a look at this page.” You are in the process of blah blah blah. For the sake of this, I’m not going to do anything. I’m just going to choose a question. “What service do you think this company provides?” It’s that simple. Test name, blah blah blah. Create test.

I’ll preview this, so this is what happens. Someone is here. They click Show Image. They get this, they’re like, “Okay, what’s going on here?” Da na na na na na na na na, and then it goes away. “What service do you think this company provides?” So that’s what you do. Now, let’s say you’re not a designer or you don’t have access to the Photoshop file or whatever to make changes to this, here’s a nice hack you can do in Chrome. So just select part of the headline, Inspect Element, and then we’re going to go down here into the code and I’m going to type, “Let Our Chalet Experts Find You the Perfect…” Voila.

Now, let’s put it into the page without having to do any coding or design work or anything. Now I can take a fresh screen shot, Powderwhite, add, rinse, and repeat. That took me no time at all, and you’ll get the results back within hours or the next day. It’s a great way of figuring out if you have a clarity problem.

Let’s Take a Look at the Landing Page Form…

Let’s talk about the form. What I do like is that it’s encapsulated; it’s in its own container. It has a headline, a subhead, it has the fields, and it has a contrasting CTA. There’s everything right, there’s even a directional cue coming down from the headline to the top of the form. This is really good form design, until the field labels. Now this is talked about a lot. You have several choices with a field label. They can be above, they can be off to the side, they can be right or left aligned on the sides, they can be…I’m trying to talk to you so like they’re all tight down the left, here are the fields. Or they can be aligned against here with a ragged edge there, or they can be on top. Or, which is a newer design trend, they can be inline. The problem with that is…well, there are several problems with that.

Let’s imagine I’m in here, I’m typing my name. So let’s say I’m in the form here. I’ve filled in a couple of fields. It’s asking me for my phone number…

Woman: Hey Oli?

Oh, what happened there? See, I was distracted there and I’m a tabber. You have clickers and you have tabbers. Some people like to click in each field, and often when you do that, that inline field label disappears. This one’s not as bad; it stays until you start typing. If it was email or name I might remember that, but if it’s some other kind of question, maybe open ended, I’ve completely forgotten now. So now I have to delete…okay, so I delete it and it gives it back to me. That’s a really big pain in the butt if you’re on mobile. Think about a really serious form, a really long legal or something. What inline labels prevent you from doing is checking your work, because once you’ve filled them all in, everything’s gone.

So let’s say I spend 40 minutes filling in this massive immigration form or something. I’m about to hit Submit, and you’re like, “Oh, I’ve just got to make sure that I put all the right information in, because this is taking a lot of time.” It’s technically impossible for you to verify that you did that, because there are no labels anywhere and you’ve got all these fields and you’re like, “I hope it’s right.” So there are a lot of usability issues with them.

Now, this is all about this chalet expert. He’s going to contact you and you’re going to work with them so it’s basically about a callback in some way. You need to set expectations. So above the call to action Send Message – which is terrible CTA we’ll talk about in a second – you need to say, “We will call you back,” or, “We will email you back within…” and let me know, a couple of hours, within 24 hours. Whatever it is, it puts me at ease when I know exactly what to expect. Lovely call to action, “Send Message”. Well, my goal isn’t to send you a message. It’s to get you to help me. So you need to say something like, “Find My Perfect Chalet.” That lets me know that I’ve communicated to you I want you to do this for me, and you’re going to do it for me within this time.

Is ‘The Fold’ Important?

Now, let’s talk about the fold. The fold is often seen as important. Sometimes it’s not, but in this case it is pretty important. If you take a look at the page, it’s kind of self-contained. It looks like this is a complete page, and the only cue is the scroll bar on the side where you see it hasn’t gone all the way down. But there is a strange thing on some browsers and some operating systems on my computer, which is a Mac using Chrome. Often, the scroll bar is invisible until you start scrolling, which is a really crappy interaction, by the way. So there’s no visual cue that there’s actually more down there. And then I might think the same thing here. If I’m not looking at that scroll bar, that this is it, but there’s a lot more on this page. So you need some kind of directional cue to let me know there’s something further down the page.

Now that could be maybe not having as big a photo, and having a line for the next section – more prominent – or just having an arrow. And as I say this, I’m seeing that you actually have one, one of those. It’s another design trend, that little arrow that just goes, “Moop, moop,” that little animated GIF that points down. That’s fine if you can see it, but it’s sitting over lights and snow, so this little white thing doesn’t really appear. Make it bigger, or find a different way, but it’s important to let people know that they should keep going.

Design Gone Wrong

Thinking about design principles, there are two at fault there. There’s contrast, you can’t see it, and there’s size. Making it bigger would allow you to see it, and also motion. So motion is good, it’s doing a little bit of this, but you need to combine that with contrast and size so that it’s an effective device.

Wasteful Copy

Remembering the campaign goal, which is to get leads. Remember the email where you were sending people to the website, you’re doing it again here. “Browse our website or read more info below.” Where’s the value in that statement? You’re basically telling me to leave or to not leave. Further detail, “Enter your details,” I presume in the form, “and one of our experts will do all the hard work helping you book a full ski holiday. See our full range of Chalets in Verbier here or after filling in the form.” What are you doing to me? Hey, that’s linked. You’re going to take me back to the website again, or all of this copy is instructional. It’s not needed. We all know if there’s a form, we have to fill in the form to get the thing after the form’s been filled. We get that. So all of this is wasteful. You know, what’s the benefit of working with you? Something like that. I need to know that your experts are actually experts.

Let’s look at bullet point number three. “Don’t just take our word for it.” Followed by, “See more below.” You know, this directional cue thing we’re talking about? That’s what’s driving people down. Not you constantly telling me to, “See below.” It’s weak copywriting, it’s what…in blog posts, you get a lot of it. “See below for blah blah blah.” Just show me, don’t tell me to go look at it. So finally, let’s scroll down and see what we have here. Okay, “Why Book a Ski Holiday with Powder White?” I think you should have already told me that. These things should be in those bullets at the top. Nevertheless, okay.

Why Should I Book a Holiday?

Why should I book a holiday with you guys? “Great Accommodation.” That’s kind of an unwritten rule, right? I mean, you’re not going to have bad accommodation. It’s not specific enough to why I should care about you and your business. So instead of, “Great Accommodation,” you might want to say something like, “Hand picked chalets based on location and facilities.” That information is in there, but pull it out of the paragraph here and put it into the headline. Try and write it as if you can take that paragraph away and just leave one line. If you can do that, then you’re speaking with clarity.

This is ironic. “A Ski Holiday That Puts You In Control.” But you’re in control, you’re booking it for me. I’m all over the place with this copy, it’s very confusing. So I get down through the benefits and all this kind of thing, and I get here. “Let us do the Hard Work,” but it was just part of your value proposition. But then why am I looking at yet another photo of a chalet? You’re talking about you now. “Let us do the Hard Work.” Show your team. That’s who I want to see now. I want to see the faces of the people who are going to help me. Make that emotional connection, because another building isn’t doing that for me, and it’s not related to that headline.

Answer People’s Questions Before They Have Them

There’s a concept known as cognitive ease, and what this is about is answering people’s questions before they have them, and use your copy and your design and this kind of thing to communicate effectively so people aren’t left wondering, “Uh, what about this?” So you have a Frequently Asked Questions area. These can be great if you get complicated questions, or you actually do have people frequently asking the question, but what you’re doing here is, “What happens when I fill in the form?” That’s not a frequently asked question. It’s not helpful. You should know what’s going to happen after you fill in the form by reading the call to action, and the expectation I talked about set right above that. So do that, and you don’t need this FAQ for that. There are some other ones that might be great, that’s fine. But don’t put in information that doesn’t have any value like that.

Using Unbounce to Improve the Landing Page

Okay, so that brings it back nicely to the form at the top of the page. I’m going to go into Unbounce, look at this landing page, and I’m going to add that expectation setting line in there, close to the call to action. Okay, we’re inside the Unbounce page builder. I’m going to fix a few things in the form. First, this nasty call to action. I’m not sending a message, what do I want? Oh yeah, Find My Perfect Chalet, that word that I can’t say. Okay, and then I want to set the expectations, because someone’s going to call me back, so I’m just going to extend the form here and I’m going to put…I’ll just copy this one for simplicity. I wouldn’t choose this color, but let’s…okay. A chalet expert will call you within 18 minutes. It’s a bit much, but be specific. If you have grand [SP] values and, “We guarantee blah blah blah,” whatever it is, make sure you call that stuff out.

Okay, so that’s added a lot of extra value in close proximity to the call to action. That removes some of the anxiety of like, “Ah, but I’m in a hurry. We need to book this trip for the weekend. Do I really want to do this? Oh, they get back to me in 18 minutes, definitely. Okay, I’m going to click.” So for everyone out there, go and look at your landing pages. Do like an honest review and audit of the landing page you have. Look at the headline and the subhead. Do that flip. Jump into UsabilityHub like I showed you earlier, and run a five second test to see if you have a clarity problem in your headlines. Kind of like here, so I’m going to change their value proposition to be Log Cabins so that I can say it.

That was Powder White, I’m Oli Gardner, and this was The Landing Page Sessions.

GIVE US 30 MINUTES & WE’LL HELP YOU BECOME A BETTER MARKETER

Unbounce lets you create high-converting landing pages for every marketing campaign. To learn how, book a demo with our customer success team.
agency
Jade Luo