Build Your Landing Page

[00:00:00]
>> But what you're then gonna need to do is you're gonna need to build one banging landing page that really kind of sells the product well. And this is where we come to really a course that I ran on conversion optimization that you can find on Frontend Masters and I'd encourage you to check that out and go through that.

[00:00:22]
But I'll give you the highlights here just to get you going with a basic landing page that you can use to sell your product that doesn't actually exist yet, right? First of all, you need your value proposition, okay? You need a value proposition, that basically is a strapline that summarizes your application in a single sentence.

[00:00:44]
Some benefits, how does it help people achieve their goals or overcome their pain points, all right? And it's features, right? What are the features that you offer that enable you to deliver the benefits that you have listed, right? So that's your value proposition. So you'll need to bring some, a list of features, a list of benefits and a strapline.

[00:01:07]
In terms of your calls to action, we've talked about calls to action already. What your calls to action are, you can have a primary call to action like preorder today, but it is okay if you want to also have a secondary call to action of, sign up to here when we first launch.

[00:01:32]
So you might wanna do that with the pre-order, right? So you can either pre-order or join our mailing list, something like that, right? But no more than two calls to action, don't get sucked into, follow us on social media and read our blog and 20 other calls to action, right, keep it focused.

[00:01:52]
Then I'd encourage you to brainstorm some objections of why someone might not want to act, right? So, ask yourself, what concerns might people have? What if they sell my email list to a third party? What if their application's rubbish? What if they make it hard to unsubscribe? What if they send me too many emails?

[00:02:13]
What if they pressured me into buying? What if I get hacked, all of that kind of thing. Now, what you might wanna do when it comes to objections. So initially, before you create the landing page, brainstorm a load. But while your landing page is running, okay, so you've got it up and running, you are running your campaign.

[00:02:32]
Also consider an exit intent survey, so basically a survey that only appears as someone goes to leave the landing page, right? And there are loads of services out there that will create these for you. I think I use one called Getsitecontrol, which is a silly name for a pop up app, but anyway.

[00:02:52]
I see your ad, this only appears if someone goes to exit, and you basically say, if you decided not to act today, it will be useful to know why. And then you give them some multi-choice answers as reasons, it's too expensive, I didn't understand the value, I didn't trust the company, whatever else.

[00:03:09]
And then another option, and that could be a really useful way of learning whether it's your pricing that's rubbish or your call to action is not appropriate. Or you've targeted it wrongly, you're not explaining the benefits or whatever else, that is really useful to know. So make sure that's on there as well.

[00:03:30]
Normally, if it was a full product, you'd probably have some social proof on there. Obviously most of this social proof that you can't really do because you don't have a real product yet, but what you might wanna do is approach a few individuals that are excited about the idea.

[00:03:46]
It's preferably influences in the sector where you give them a little demo of your prototype and ask if they'd give you a little testimonial. But if you can't get testimonials or anything like that then don't worry too much about social proof, it's not the end of the world.

[00:04:06]
So once you've got your benefits, you've got your features social proof, if you can, then what you wanna do start creating content blocks. Every page on the web is basically made up of a series of content blocks. And so for each benefit, each feature, each block has social proof you wanna create a content block.

[00:04:32]
And the content block normally consists of a supporting image, although that's optional. A heading, a little short description, right, and a link for more information. And again, that one's optional cuz you've only got landing page at the moment, so you probably won't do a link, right? So for example, Frontend Masters might have a content block for a benefit, the title read, improve your career prospects, right?

[00:05:05]
And the description that says underneath, something short, only probably 150 characters, something like that, kind of a tweet length. That would say something like, learn the latest development techniques so you can land that next job, right? And in their case they can afford to put link in that goes off to more information cuz they've got whole website we don't, right?

[00:05:32]
And you might wanna have a supporting image with that, you might not whatever it's appropriate, okay? You might also wanna then scatter into that addressing any objections that goes alongside that, particular thing you're talking about. So, improve your career prospects, despite the current downturn in the industry, having the latest skills will secure your next job.

[00:06:03]
So I've acknowledged the objection there's nothing good around in the industry at the moment, I'm not gonna get a job, right? So I've dealt with an objection in that as well. This might feel quite intimidating if you're not a developer, no, if you are a developer because you're not a writer, don't worry about it, and I'll tell you why.

[00:06:24]
Just write any old rubbish, okay? That deals with it, right? So don't worry how bad your title is, don't worry about how bad your grammar is or how persuasive is or anything like that, cuz I have a magic tool for you right? There is a great app called Hemingway, right?

[00:06:45]
It's free to use the basic version, I would highly recommend that just while you're creating this landing page, you pay the however, it's a minuscule amount to get the AI features. So by way of example, I have taken some copy offer for the Frontend Master site. And that copy is terrible, sorry, right?

[00:07:08]
So you can see it here, this is the first piece of copy on the homepage of the Frontend Master site. It's reading level is postgraduate, right? So it is really hard to read all of the sentences, look how it's made all the sentences red which basically say these are bad sentences, right?

[00:07:26]
But if you put it into Hemingway what you can do, is you can go to their magic AI tool and you can select Improve and clarify. You can also select right at the bottom of that list if you look under Tone be more persuasive. Or you could even select the make skimmable where allowed headings and bullets and bold and stuff, right?

[00:07:49]
So if I run that bit of copy through we end up like this. Now formatting-wise that might not be great but at Frontend Masters we offer courses taught by experts from top companies such as Netflix. We always update our curriculum with the latest trends. This ensures our learners learn industry standard practices and the latest techniques, and suddenly the readability score of that is 8, right?

[00:08:15]
Rather than Post-graduate, which is 16. So it's made it considerably easier to read, easier to scan and I could also put it through the persuasive thing if I wanted to to give it a bit more punch. So you don't need to be able to write to create this landing page.

[00:08:31]
Obviously, a professional copywriter would do an even better job, right? I'm not in any way saying we don't need copywriters anymore of course we do but it's good enough for this test, okay? So that make your life a lot easier. And then it's just about assembling your parts, right?

[00:08:51]
So you start off at the top of the page with your summary, which is your strapline and maybe a sentence or two says a little bit about you. Then I normally go straight in with a call to action for those people that just like to skim and skip stuff.

[00:09:06]
Wherever I have a call to action, if I've got any social proof, I like to put that as close to the call to action as possible. Then we have a list of our benefits as to how this is gonna change their lives. Then I tend to repeat the call to action again because you can never have your call to action too many times.

[00:09:23]
Then I show them the features and I end the page with a call to action, it's as simple as that. That is all you need to be able to run this test, right? If you're stuck on your strapline, right? Take all of your benefits all of your features that you've written, copy and paste them into ChatGPT.

[00:09:42]
And say write me five straplines based on this description of the product, and then just pick the one you like best, yeah.
>> You're using the word straplines, I'm not really familiar with that, what is it?
>> Sorry, I thought that was apparently it's a British peculiarity. Just do it is Nike's useless one.

[00:10:06]
>> Taglines?
>> Taglines, that's what you call them over here, then taglines, yeah. But preferably one that's more descriptive than that, right? If you're if you're Nike or you're McDonald's or whatever, you can get away with these aspirational feely kinda ones. Your one basically needs to say what it does on the tin.

[00:10:29]
It needs to say, a task app for young mums, or something like that, something a lot more descriptive. Because you want people to look at the page and know instantly what the applications about. To be honest, when it comes to the aesthetic side of things, look, do what you can, [LAUGH].

[00:11:00]
If you're a developer, I'd encourage you just to go and find maybe a template or a design system or something that you like the look of that you feel is appropriate for that audience. If you can afford to get a designer to look at it, that's awesome too.

[00:11:22]
I'm not expecting the world from that side of things. We're only running at TED, we'll do the best we can kind of thing. So yeah, basically but what I would encourage you to do is at least before you start looking for a template or something you can use.

[00:11:40]
Maybe have a little think about the kind of words that you wanna communicate through that. That you want it to be trustworthy, you want it to be friendly, you want it to be positive, whatever. So that when you search for templates, you can use some of those words to hopefully help you find a relevant template.

[00:11:58]
So let's talk about, you can test your landing page before Before you launch it. If you want to, you can do a 5-second test that, I talk about all these tests in my, user research and testing course. Where you can just see whether people spot the key elements on the page.

[00:12:17]
These are the same tests we were talking about for the app itself, we can now run those on the landing page. We can run the first-click test, we can run a short survey. One thing you might wanna do is, is eye-tracking simulation to make sure people are seeing the right things on the page.

[00:12:36]
So for example, are they seeing the call to action, are they reading the strapline, that kind of stuff. Now, eye-tracking simulation in case you don't know basically takes thousands of hours of eye-tracking, and it predicts where someone will look on a page and it costs like $19 for a month, right?

[00:12:56]
So you can imagine when you when you're building your landing page, you pay your $19 you run it through this thing. And what it will do is this basically, so this is a random page on the website, you upload this mock up to their website. It analyzes it and you get something like this back, right?

[00:13:18]
And as you can see the faces are pulling attention there but people are still still reading the main strapline and they're paying attention to the text underneath. They're not looking at the call to action button, and that's a bit worrying, right? So you'll get that kind of feedback on your landing page and help you to know whether or not it's working reasonably well before we start spending any money, yeah.

[00:13:39]
>> Yeah, you can actually put your competitor's webpage through this and then say, hey, there's worse than weaknesses [LAUGH].
>> Yeah, absolutely, it's worth doing and I do that. When I do conversion rate optimization work, I do that all the time. In fact, I even run usability testing on competitors websites, because it's like a free prototype.