Published on <a href="http://ift.tt/2uMFJ4H">| Prototyping: From UX to Front End &mdash; Medium</a> Pedro Cortés 
The average human attention span recently fell to 8 seconds (that’s less than a goldfish!), there are hundreds of companies competing for your target audience’s attention and yet the world expects you to have a two digit month-on-month growth — sound familiar?
Apart from magic and pony dust, a Conversion-driven landing page is the best way to make sure your marketing efforts are as effective as possible by maximizing the probability that visitors will follow your page’s Call to Action.
This guide takes you through 3 steps to build a Conversion-driven SaaS landing page and conquer today’s tough crowd.
<img alt="" src="http://ift.tt/2tPaTvf."><a href="http://bit.ly/2tc7Htl">Startup Tracker’s landing page redesigned for conversion </a>previous version <a href="http://ift.tt/10i1ycT">here</a> (cover your eyes!)
<h3>1. Page structure</h3>
<ol>
<li>Tagline, short demo and first CTA to grab the visitor’s attention.</li>
<li>Companies currently using your product to build trust.</li>
<li>Feature list to show visitors you offer what they need.</li>
<li>Video of features and results for the curious and the skeptics.</li>
<li>Additional features for the “but wait there’s more” effect.</li>
<li>Testimonials to show social proof.</li>
<li>Final CTA for people who you managed to convince using the above.</li>
</ol>
<img alt="" src="http://ift.tt/2tOGE7I.">The structure of a Conversion-driven landing page
<h3>2. Content</h3>
<ul>
<li>Show your product. Use a screenshot, GIF or video of your product for section 1. and illustrations or screenshots of your product for sections 3. and 5. If people don’t know what to expect by signing up, they probably won’t.</li>
<li>Keep your copy succinct. Try to keep your tagline in section 1. below 50 characters. For sections 3. and 5. try to keep the feature titles below 40 characters and don’t use more than 2 sentences for the feature text. Use a smaller and lighter font for the text than for the titles. People usually scroll past text but include some on the off chance they don’t.</li>
</ul>
<img alt="" src="http://ift.tt/2uMSnk9">The feature list section is crucial to convince visitors — make sure the visuals are crisp and text straight to the point
<h3>3. Optimize your Call to Action</h3>
Your CTA button has to be painfully obvious if looking at it doesn’t make you cringe you’re probably doing it wrong.
<img alt="" src="http://ift.tt/2tOTfHY.">What you have vs what people actually see on your website
Use a color contrast ratio of at least 6 to set your CTA buttons apart from the background (you can compute color contrast <a href="http://ift.tt/1HN0a04">here</a>) and use the blur test to make sure your CTA really stands out.
<img alt="" src="http://ift.tt/2tPaWqV.">Use an image editor to blur a screenshot of your landing page to see if the CTA stands still out
<h4>Bad CTA Examples (from famous companies)</h4>
The AWS landing page has way too much going on above the fold, it’s not immediately clear what the main CTA is.
<img alt="" src="http://ift.tt/2uN306u.">
Oracle’s landing page doesn’t have a clear CTA, if you take a look it seems like their logo is the CTA.
<img alt="" src="http://ift.tt/2tOTgf0.">
Zendesk’s landing page has a poor distinction between the text, the background and their CTA, which makes the latter less effective.
<img alt="" src="http://ift.tt/2uMMC68.">
Autodesk’s CTA is not clear at all, it’s just a link, using the blur test we can see that the most relevant thing here (visually) is the menu.
<img alt="" src="http://ift.tt/2tOR7Qr.">
Salesforce’s landing page is just a mess of colors, it’s not clear what they want people to click on.
<img alt="" src="http://ift.tt/2uN5L7Y.">
<h3>About me</h3>
I’m Pedro, a Product Designer passionate about helping startups with their conversion. I combine user behavior psychology and conversion-focused design patterns to reduce customer acquisition cost.
<h3>Need help with your conversion?</h3>
Ask me anything in the comments 👇 or drop me a line: pedro@cortes.design
Follow Me: <a href="http://ift.tt/2r4eaCX">Behance</a>, <a href="http://ift.tt/2quuZKq">Dribbble</a>, <a href="http://ift.tt/2tOrvmH">Medium</a>
<img src="http://ift.tt/2uN3z0h" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2tP0nUQ">How To Make a Conversion-driven SaaS Landing Page [2017 edition]</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How To Make a Conversion-driven SaaS Landing Page [2017 edition]

Top Stories