Design

Designing an effective sales page

4 min read
William Ghelfi
  •  Jan 14, 2016
Link copied to clipboard

Once upon a time there were these 4 little words: “once,” “upon,” “a,” and “time.” They’ve been around as a way to introduce a story since at least 1380.

Why is that?

Because “once upon a time” is effective—it’s an anchor that gets your attention.

…someone vandalized private property. The end. Photo by Quinn Dombrowski. Creative Commons Attribution-ShareAlike 2.0 Generic.

As it happens, the human being is well versed at both conceiving and listening to good stories. Stories are often used to deliver a message—and to sell a message.

Storytelling works for sales pages, too.Twitter Logo A sales page is long- or mid-form webpage that exists for one very specific purpose: selling a product. It could be your homepage, a webpage you point the subscribers of a mailing list to, or the landing page for an advertising campaign.

The thing is: to sell something via a sales page, you’ll have to tell a great story.Twitter Logo

You can do that by focusing on 3 main levels: psychology, content, and design.

“To sell something via a sales page, you’ll have to tell a great story.”

Twitter Logo

1. Psychology

I asked Patrick McKenzie via Twitter: “What’s the most important thing in building a great sales page?”

Patrick is one of the most renowned contributors on Hacker News Y Combinator. He writes a lot about technology, his business, and his own struggles and achievements in web marketing and selling products. His advice inspired Amy Hoy and Nathan Barry more than once.

He promptly replied:

Focus on your customer.Twitter Logo People aren’t visiting your sales page because they want to know how amazing your product is.

They’re here, right now, because they have a problem. And something or someone pointed them to your page to find a solution.

Knowing who your customer is and the problem your product can solve for them is also one of the core concepts of Amy Hoy’s Sales Safari technique.

“People don’t visit your sales page because they want to know how amazing your product is.”

Twitter Logo

Nathan Barry offers similar advice in his book Authority: find a niche, find where they gather, listen to them, learn about their problems, provide a fix.

But if you’re working on a sales page, you’re already past that point. The product is ready—it’s time to sell.

When it’s time to sell, resist the urge to write about your product. Try to stay away from it for a while, and keep focusing on your customer instead:

  • Who’s your customer? A busy professional? A corporate department? A family man?
  • Sell your customer on their own pain.Twitter Logo Show them you understand what’s keeping them up at night—and that both of you know it sucks.
  • Show them how much better life could be if that pain were fixed. See them out of the nightmare and into the dream.

Then, and only then, introduce the solution: your product. Make it the inevitable, seamless, perfect fix.

2. Content / copy

How can you actually write a sales page? Remember:

  • You’re telling a story
  • Everything you write must gently lead the customer to a call to action
  • Do not provide side exits, and do not link to any other page or website. They can either buy the product or close the browser window.
  • Never leave the end of a sales page without a call to actionTwitter Logo or a pointer to it
Nathan Barry is great at writing copy for mid/long form sales pages.

Headlines

On the average, 5 times as many people read the headline as read the body copy. When you have written your headline, you have spent 80 cents out of your dollar.”
–David Ogilvy

Headlines are important. They are the incipit of your story, your “once upon a time,” your anchor. They serve one purpose: to keep your customer reading until they reach the next line.

“Never leave the end of a sales page without a call to action.”

Twitter Logo

A big, bold title, gently leading to a smaller subheading, which will lead to the first paragraph. If it sounds like a formula, that’s because it is.

Authority by Nathan Barry.
Designing Web Applications by Nathan Barry.
Step by Step UI Design by Sacha Greif.
Octohire.me by William Ghelfi.

These headlines are big and catchy. They’re bold enough to keep you reading, but not too bold so they don’t end up being perceived as offensive.

This last one worked, in a way: I got an email from GitHub.

The first paragraph

This is where you sum up the concepts you’re going to expand on as you progress with the story towards the call to action.

Write down the pain, the dream, and the solution. Start building trust with a testimonial—a happy customer, someone you gave early access to your product—then place the first call to action.

Yes, it’s only a heading, a subheading, and a paragraph. But there will be people who are quickly convinced, or to whom your product is just that perfect of a solution for their pain. Lead them to go on and buy your product. Then focus your attention on the rest of your customers—the ones who aren’t as easy to persuade.

All you need to get the first few sales, in the first paragraph.

The main bits

It’s time to reprise the concepts you summed up in the first paragraph: pain, dream, and solution. You’re going to elaborate on that.

The pain becomes a reminder of how difficult it is to do that something you want to do. The more immediate the pain is—the more vivid, and recently experienced, and detailed, and urgent—the stronger your persuasion will be.

“Be a scholar, not a used car dealer.”

Twitter Logo

The dream becomes facts proving it can be done—and maybe it has been done by other people. Life can actually be so much better. Reverse the pain into a dream scenario.

The solution becomes a clear explanation of the offer. What the product is composed of. This part is where you have permission to focus on the product.

Just describe it and lay out its characteristics and features. But don’t praise it or indulge in self-proclamation. No exclamations, no scammy copy.

Be a scholar, not a used car dealer.

Additional touches

1. Keep building trust with more testimonials
Wisely distribute testimonials here and there. Your customer will find them while they walk away from the pain and into the dream, towards the solution.

Or you can collate them all in their own section. Put them just between the product description and the call to action.

Don’t take our word for it” and “This is what people are saying” are 2 popular titles for such a section.

2. Introduce yourself or the company selling the product
A short paragraph about yourself will humanize the whole experience. It’s about a human being helping another human being. One has a pain to get rid of, and the other one provides the fix.

Aim for the right balance between a social network bio and a Wikipedia entry.

Here’s how Sean Fioritto introduces himself at the end of the sales page for his book Sketching with CSS:

Howdy, I’m Sean Fioritto. I’m a front-end developer based in Chicago.
You can find me, @sfioritto, on Twitter and my blog is Planning for Aliens.
I’ve also written for Smashing Magazine and created a few, cool open source projects.

And this is a short bio of Amy Hoy from the sales page for 30×500, a course on how to find a product worth selling, and how to actually go on and sell it:

Amy quit her last (very cushy) job in 2007, opened up a consultancy for Fortune 100 companies, and then threw that all out the window to start a product biz after procrastinating for years. Freckle has earned over $1.9MM in it’s lifetime, and her tech e-books & workshops have earned >$200k.
Her hard-earned lessons in bootstrapping—delivered with her trademark bullshit-free honesty—has helped countless people get off their butts and ship.

3. Provide an incentive
This works best when coupled with a drip email marketing campaign —a set of marketing emails that will be sent out automatically on a schedule, or based on actions like signing up for your service or making a purchase.

Don’t just drop a new subscriber directly onto your mailing list. Let them opt in to an email course about some topic strictly related to your product. Someone interested in my e-book about Bootstrap 3 for beginners used to have the option to also get a free 30-day course with tips and tricks about Bootstrap 3 I didn’t include in the book.

Nothing is a better incentive than free knowledge by an expert.

That gave me a way to gradually promote the product to them. After spending several emails simply sharing useful ways to use Bootstrap in everyday work, I casually mentioned my book, Bootstrap In Practice. Then I moved right back to purely educational content. In a later email I’d bring up the book again.

This process was a progression towards the sale and performed quite well in the end.

  • Day 1: useful content
  • Day 3: useful content
  • Day 5: useful content plus casual mention/soft sell
  • Day 9: useful content
  • Day 14: useful content
  • Day 20: hard sell
  • Day 24: useful content
  • Day 29: useful content plus casual mention/soft sell

As Nathan Barry puts it: on day 20 “I’m pitching a product after I’ve spent over 2 weeks teaching valuable content.”

4. Try to offer different packages
3, as it happens, is the perfect number.

Try to find 3 increasingly valuable offerings for the same product. For example, for an info-product—an e-book or a course about a topic of your choice—the 3 packages could provide:

  • The core product (e.g. the e-book)
  • The core product + additional content (e.g. additional guides, free templates, practical examples, source code)
  • The core product + additional content + multimedia content (e.g. video interviews, video tutorials, the audiobook version of the core product)

Then reverse the order and show the third package first. The more expensive is also the one that bears the most value, so it’s a win-win if it’s showed first.

SketchingWithCSS.com: Clean and clear value proposition, with a call to action that stands out.

5. Close with some answers
Mind where you are in the page, in your story. You’re just past the main call to actions—the product packages—and the most part of your potential customers already purchased your product or left. But some remain doubtful.

Debunk their concerns by answering their questions:

  • Which package should I buy? Give quick advice on which one to choose.
  • Where can I learn more about you? Point to your blog, or where to find more about you. The more they know you, the more they trust you.
  • What if I hate it? You don’t want their money, so issue a refund.
  • You didn’t answer my question. If they still have questions, let them drop you a line at your email address.

If you can afford it, always offer a no-questions-asked full refund within 30 days from the purchase.Twitter Logo

By the way: if it’s a digital product, you can always afford it. Your production costs for a new copy are zero. You don’t have costs to cover with each copy you sell.

6. Close with a pointer to your call to action

Never leave your customers with nothing to do apart from closing the browser window.Twitter Logo Point back to the packages. Optionally accompany the pointer with one more testimonial to refresh the trust in you and your product.

3. Design

So you know your customer and what makes them tick, you wrote down a well-crafted story with stellar copy, and you got all the strategic passages right. Now it’s time to design.

“Never leave your customers with nothing to do apart from closing the browser window.”

Twitter Logo

The fact is, if you focus on your customer at every step like you just did, then the design will end up being the easiest part.

That doesn’t mean I’ve got no tips for you. In fact, I have 10:

  1. A big headline is a catchy headline.Twitter Logo Something bigger than 42px. Also, use at least 16px as your base font size for the rest of the copy.
  2. Accompany the first paragraph with a big picture of the product. If it’s an e-book, this doesn’t mean it can’t have a cover or that it shouldn’t be depicted as a physical book.
  3. Simplify and normalize the reading flow to just one column. Multiple columns are no good.
  4. Don’t make beautiful, subtle, harmonious call to actions. Make them stand out. Beautiful doesn’t mean your customer should squint to see them.
  5. If there’s a free sample or trial, ask for the minimum possible amount of information. Hint: it’s their email address—and maybe also their full name.
  6. Cut down on information. Be essential, find your balance. You wrote your story, now let it lose some weight and get into that elegant dress (your design).
  7. Pay attention to the reading flow. Is it obstructed? Is it as straight as it should be? Does it lead to the call to action?
  8. Don’t overdo your design. Keep it elegant, and make it serve your purpose: make the customer feel comfortable while they proceed towards the call to action. Try to use a simple color scheme with different grades of importance: a primary color, a secondary color, a suitable black for your copy.
  9. Never use #000 as your black.Twitter Logo Painters don’t usually do that, and nature doesn’t do that. Real shadows are never black—the human eye and brain aren’t accustomed to real black. Take your primary color and darken it down to a color that resembles black but isn’t #000. That will give your design a better feeling.
  10. Keep it engaging. Change the rhythm. Alternating the 2 base colors for the background is an easy way to do that. Use a testimonial to interrupt the monotony of a wall of textTwitter Logo without sacrificing the overall flow towards the call to action.

Takeaways

  • Set a goal (e.g. convert more visitors to trials, make more visitors subscribe to your drip email campaign, make more customers choose your most expensive package, etc), then experiment, measure, validate, iterate
  • Empathy: it’s about the customer, not the product
  • Keep them reading
  • Pain, dream, solution, call to action

If you want to learn more:

https://blog.kissmetrics.com/david-ogilvy/
https://unicornfree.com/2013/how-i-increased-conversion-2-4x-with-better-copywriting
http://nathanbarry.com/step-by-step-landing-page-copywriting/

And some mid-/long-form sales pages that performed well in the recent past:

http://nathanbarry.com/authority/
http://www.sketchingwithcss.com/
https://letsfreckle.com/
http://www.williamghelfi.com/bootstrap-in-practice/ (This is mine, but don’t get the book: Bootstrap 4 is coming and this book will then be obsolete.)

Take my advice with a grain of salt, focus on your customers, and tell them a good story.

I’m sure they’ll all live happily ever after.

Header photo by Gerald Gonzales.

Collaborate in real time on a digital whiteboard