Designing an Effective Sales Page in 3 Easy Steps

When you're launching a new service, or course one of the most time consuming steps can be designing your sales page, you want to clearly communicate your offer and have it look great, but it's hard to know what to focus on and what to let go of. In this episode, I'm sharing my ABCs of an effective sales page design. So you know the three main areas that I look at when designing and evaluating sales pages that convert.

This post was originally an episode of Process to Profitability, which means you can listen to it instead of reading, if that’s what you prefer!

If you don't know me, I'm Samantha Mabe, creative director and designer at Lemon and the Sea, where I help service providers and coaches stop cringing every time a dream client asks for their website. I love designing custom sites that empower business owners to raise their prices and feel confident that their online home finally reflects their brand. With my signature framework, I've designed and customized over 25 websites in the past six years for all different types of entrepreneurs. And when I'm not digging into design and strategy, I love true crime podcast adventures with my toddler and trying to keep up with my Netflix queue.

Why You Need a Signature Service

Let's get into these three steps to designing an effective sales page. Alright, first, I want to dive into why I am focusing on sales pages particularly. And that's because I recently changed my design process. So that I instead of doing a six week process, I'm now designing a website in a day, I work on four pages plus a blog for my clients. And one of those pages is the sales page for their website. And the reason that this is such a big page for people, especially the people that I work with, is because they have one signature offer a VIP day or a signature course that they are selling to their audience, and they want people to take action on that course, or that offer so that they can then help their clients. I love this new method of designing. And I get to really help my clients get a new website launched quickly, which is awesome.

But here's the thing, when you're designing an entire site in one day, you need to make sure that you have got the important pieces of a design down so that it's easy to evaluate things and make sure that they're going to work. And that's why I came up with my ABCs of an effective sales page design. These are the three main things that I look for when I am designing. And when I am evaluating my design or looking at somebody else's website to do a review.

A Sales Page converts better than a list of services.

And here's the thing, when I say sales page, many of my clients are service providers. So they think I don't need a sales page, I don't have a big course that I need to sell or anything that's really in depth that needs all that this stuff. But as I have been watching trends in the website, design industry and talking with other people who are doing all of this work for themselves, their VIP day service providers, they are course creators. We are now treating services pages, like sales pages, your services page is no longer a list of services where they get to choose from one option and a couple of add-ons and you're just giving them the deliverables that they'll receive after they work with you and a price.

Instead, we're laying these out like sales pages where you are really communicating to the people who are in your target audience. You're making sure that they understand the overall transformation that they bring that you bring, you're making sure that you are speaking to their pain points so that it's more than just here's the service pick and choose what fits for you and you are really laying things out so that people can see you have got this down. This method works great for people who have a signature process in their business. So somebody who has been in business for a while, and they have figured out how it is that they take people from one place in their business to the next, or one place in their life to the next, they have a process that gets them there. And so your services page is not letting people choose what they want from you. It's really communicating what you do, the how you do it, and why you do it that way.

I love this new trend, because it makes things a whole lot more fun. Instead of big paragraphs of texts and lists, I get to play around with designs, different sections, lots of graphics. So it looks really nice and it's more effective for people because that is what they are looking for. They want to get lots of questions answered when they are on your services page, before they ever apply to work with you. So let's start by talking about what you should include on your page. If it's for services, particularly these tips will work if you have a course, or one service.

Designing a Sales Page for Multiple Services

But maybe you have multiple services in your business. When you are designing in this way, as a sales page, you want to choose one service that you have a very specific process for and highlight that on this page. Maybe you have some other backend services, I know I do. But this is the one that you are want people to come into your business for you want to be known for. This gets them the transformation that they're looking for. And then you can sell them on all the other things that you do down the road or on your sales call if they're not the perfect fit for this particular service.

When we stick to one service, one course one offer on our page, we can more effectively sell to people, because we are no longer trying to give them all of the information and all of the options. Instead, we're saying, this is the thing that I can help you with, if you are in this place in your life and your business. So for me, my sales page is all about my VIP Website Design Day, I have some back end offers some other things that people might need. But my services page that is linked on my website talks about this VIP day offer, because that is the way that I can best serve somebody when they first encounter me. I love setting things up this way, especially if you want to keep your website simple. I've talked about that a lot on Instagram. So if you're interested, make sure you go over and check that out. But when you really want to keep your website simple and be known for one particular thing, you choose one service to highlight on your sales or services page. And that way your whole website can center around that.

So you've chosen your one service, or your course, whatever that signature offer is that you want to highlight. How do you actually design an effective sales page, it's easy to get caught up in all kinds of checklists and things that you need. And sitting there tweaking pixel by pixel, little things on your site. I get it. I have done that for myself. I have had clients who have emailed me about changing things by you know, just a tiny margin. And I know, I know that we want things to be perfect before we release them out into the world.

But here's the thing, nothing is ever going to be perfect. Things in business are always changing. And so instead of sitting there for days or weeks playing around with the exact color of your button, or the exact layout of your process section, I want you to focus on these three things in your design. Make sure these are done well and then get it out into the world. Once it's out into the world, that's when you are seeing real data and feedback on your design of your page, on the copy of your page and you can make changes from an informed place instead of just guessing it what people want or what they need, or what might be missing.

1: Attention Grabbing Headline

Those three design updates. Let's start with A attention grabbing headline. Of course, we all know that your headline of your page is super important in the copy part, right? We want it to be compelling, we want it to speak to the transformation that we offer, we want to bring in the right people and repel the people that this is not right for. So the copy is really important. But it's also important to have a good design here, because this is the first thing that people are going to see when they land on this page.

So I've got a couple of tips to help you design a really attention grabbing headline. The first is that when you are putting your headline on your sales page, you want to make sure it is a Heading One. So on the back end of your site, it should be heading one, it should be large, it should be easy to read. And I like to tell people, it should be around 10 to 12 words and two lines of text, that's what's going to look best and get people to read it. The next piece of this is to put it over a banner image. So the trend right now is to have a banner image at the top of your website. And that's where you're putting your headline, it's much more interesting than having a headline on a blank background, or that just bleeds into the rest of your text. So choose a banner image that relates to your brand, and to the service, or course and make sure that your headline is still legible on top of that image. That might mean that you put a colored box around your text behind your text, it might just mean that you're choosing an image that doesn't have a lot going on so that it will always be easy to read.

The next piece you want to think about is your subheading, or your eyebrow copy. So a subheading is the text that goes right underneath your headline. Eyebrow copy is the text that goes above your headline. And you can use these in really strategic ways for your copy to call out exactly who you are working with, or to go into a little bit more information about what it is that you do. But here's what I want you to think about in terms of design, your subheading is going to be smaller than your main headline, it's still going to be really easy to read. And it's going to be right underneath that headline, eyebrow copy is above that headline, it can be even smaller. So generally, this is a Heading Three size. And I like to make this one a talyc or a different font type so that it stands out a little bit, it looks a little bit different. Once you have those two or three things in place, so a headline and then either a subheading, or eyebrow copy or both. You also want to have a call to action button. This should be a button right underneath that headline and sub headline, it should stand out. So it should not blend into the background. It can be one of your brand colors if you have something that's really bright and fun. But it doesn't have to be and you want it to be actionable.

The other thing that I want you to consider here is spacing. So you want your headline to have breathing room where it doesn't span the entire width of the page. It's not squished in there and feels like you're rushing through things you want it to have space around it so that it looks good, it can breathe. This is called whitespace and design, even if it's not white, and you want to give it that space. But you also want to make sure that that whole section, that banner section with your headline, the call to action and the background image doesn't take up your entire screen. The reason that this is so important is because you want people to keep scrolling. And in order to do that, you need to give them a preview of what's next. So what I like to do is have that banner image be about half or two thirds of your screen length. And then they people can see the headline of the next section underneath so that they want to learn more. And that's when you're going to dive into things like the pain points of your customer or the transformation that you bring. You're going to get into more detail on that. And so you want to draw the eye down so that they keep reading your page.

So those are my design tips. Have a headline that stands out, it's a large size. Have your heads up head and eyebrow copy, and then a call to action button on top of a banner image, give it some breathing room. But make sure you still can see the next section of your website so that people want to keep scrolling.

2: Break Up Your Text

Alright, B, so a was attention grabbing headline, B is break up your text. Nobody is going to read a long paragraph on your sales page or any part of your website. People just don't spend that much time reading something unless they have committed to a blog post or a newspaper article. So break up your text with things like bullet points, lists, as a great way to use kind of those. If you are explaining the pain points of somebody, you can put that in a bullet pointed list.

You can also do this with images. So I love having images of my clients along with their testimonials. I love having images of my process next to the sections where I am explaining that. So on my own website I have my process is five phases. Each of those phases has an image next to it, that's actually a screen with a screenshot of a piece of that part of the process. So when I get into the part of the process where I am looking at analytics, then I have a screenshot of Google Analytics and the dashboard and all of that information so people can visually see what I'm doing. Even though it's not the pretty part of the design.

The other way you can break up text here is with graphics or icons. So if you have a section where you are talking about the bonuses that are included, or the three different main things that you're going to be going through on the day, have a graphic or an icon above those, so that it breaks up text, it makes it more fun, it makes it easy for people to read. This is also where you're going to use all of those heading two and heading three settings. So that as people scroll down the page, they can look at the headline of that section, see if it's relevant to what they're looking for, and either read what comes underneath, or scroll past it to the next section. This is super important and this is also where you can have lots of fun. So you can pick out images related to your brand, or create graphics that are really fun. If you want to do something beyond using bullet points for your list, use emojis to start those lists, it's a really fun way to get creative with your the way that your copy looks on your sales page.

3: Converting Calls-to-Action

Now let's go to C. So attention grabbing headline, break up your text, call to action buttons. We talked about this a little bit in the first section. But what's important to know about call to action buttons is you need to have at least three on your sales page. I like to have one right under that headline in the top section of my page. One at the bottom of my page in case somebody has scrolled through the entire thing, and they are still reading and one somewhere in the middle. If you have a really long sales page, you want to have four. So where I like to put these other two call to action buttons is under where you're talking about your process under where you have introduced the offer. So where you're naming your actual VIP day or the name of your course, that's a great place to put a call to action button.

The goal here is to avoid people having to scroll all the way back up to the top or all the way bottom to the bottom of your website. If they want to take action. They shouldn't have to scroll more than like just one or two screen links in order to hit click on a button to take them to the next step. So that's a really good way to think about this is if somebody has to scroll more than two or three screen lengths, then you need to have more call to action buttons.

When you're designing those buttons, you want to make sure that they stand out. Many times this looks like choosing something that is outside of your brand colors. So you may have a really well designed website, but if your buttons don't stand out, if you've got pretty neutral brand colors, they're very elegant and soft, a button in those colors is not going to stand out and make people want to click it. And on your sales page, the whole point is to get the right people to take action. And they won't do that if they can't figure out how to do that.

On my page, my button is yellow. But a lot of people like to use yellows, oranges, reds, they draw the eye to them, they make people want to click and take action. You also want to make sure that the text on that button is really clear about what they're going to do. So if they are going to fill out an application, make sure that it says something like, I'm ready to apply or apply now. And that it's easy to read. So it can be easy to choose something like a yellow button, because that's gonna stand out, it looks good. But if you choose to put white text in that button, it might be too hard for people to read. So you play around with the text color and the button color to get something that is legible, that stands out, and is easy to find on your page.

The other design element to a button is that it should look like a button. Many people like to have links for their call to action. And this really is not effective. Because people aren't looking for a link, they are looking for a button. So have it look like a button. Generally, this is going to be something that is square or rounded off. In your design system, they probably have a built in button design that you can use. And then you want it to change when someone hovers over it. So it can either change color, it can add an outline, it can do something so that when someone hovers over that button, they understand that it's clickable based on the change state the hover state of the button. If your button looks exactly the same when somebody puts their mouse on top of it, then they're gonna think well, is this a button or is it not? Can I click on this? Or is it just an image that looks like I should be clicking on it just make it really clear with the design, that this is the place that they take action to get to the next step.

The other thing that I recommend when you're thinking about designing your call to action buttons, is to remember that you don't need this to always go to a new page on your website. In my case, on my sales page, all of my call to action buttons, scroll up or down automatically to where the application is embedded on my page, my application to work with me is embedded directly onto my sales page so that people can fill it out right there, no extra steps. And if they click the button at the top, it sends them right down to that section. That way, they don't have to take any extra steps to open a new page or to fill out more stuff, you're really trying to make it as easy as possible for them to take action reduce that friction every step of the way.

Your Sales Page Doesn’t Have to be on Your Website

The other things that I always like to note when I'm talking about sales pages is that while I do this in a design platform, so this is a sales page on my website, you can also do this, if you are just creating your sales page in a Google Doc. So if you are just trying to get your VIP day out there, and you don't have time to redo your whole website, you just want to have a page to send people to you can design that in a Google Doc that then you can share with people. And you can use some design tricks like adding an image that can become your banner image, or using the table section to create a button. You can do all of that in Google Docs with a little bit of effort. And use the same tips to make sure that it's effective, easy to read, and it's going to convert well.

The other thing I always like to remind people is to make sure that your page, whether it's in Google Docs, or on your website looks good on mobile. You don't want somebody coming to your sales page on their phone, and then not being able to read everything or have it be too small or too large or have pop ups that won't go away. Your mobile design is so important because most people are visiting your website on mobile at least the first time that they lay in there. People might be going to your website on their computer when they're ready to fill out your application. But when they are just looking around seeing what you're all about, they're probably on their phones. So remember to Check your mobile design. Most website design platforms will automatically create a mobile design that looks good. But double check that, especially if you've added any customization or have anything that's a little bit weird, so that your design looks just good on a phone as it does on your desktop.

Alright, so my ABCs: attention grabbing headline, break up your text, and call to action buttons located throughout the page.