{"id":7498,"date":"2017-03-20T11:41:19","date_gmt":"2017-03-20T10:41:19","guid":{"rendered":"http:\/\/blog.chartmogul.com\/?p=7498"},"modified":"2023-08-10T12:57:58","modified_gmt":"2023-08-10T10:57:58","slug":"saas-landing-pages-2017-analysis","status":"publish","type":"post","link":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/","title":{"rendered":"SaaS landing pages in 2017: Our analysis of 100+ top businesses"},"content":{"rendered":"<h1 class=\"p1\"><b>By popular demand&#8230;<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">Our <a href=\"https:\/\/chartmogul.com\/blog\/saas-landing-pages\/\">last landing page analysis<\/a> is still one the most popular articles on ChartMogul. Given that it\u2019s been 18 months since we did that run-down of the state-of-play for SaaS websites, it\u2019s definitely time to revisit the topic. Conventions and trends in website design change rapidly. Big businesses are expected to roll out redesigns to keep their site fresh every few months, while specific UX patterns\u00a0or trends spread like wildfire throughout the industry once they\u2019re proven to increase page performance (or rather, once someone has blogged about them).<\/p>\n<p class=\"p4\"><span class=\"s1\">We included all of the 40+ companies from the previous\u00a0analysis, as well as many more. This time the total is over 100 landing pages, each from the B2B SaaS industry \u2014 from smaller startups to big-name brands like Salesforce and Google.<\/p>\n<h2 class=\"p4\">Why the fascination?<\/h2>\n<p class=\"p4\"><span class=\"s1\">Regardless of company size, product or target customer, the landing page is often a user\u2019s first contact with your brand. Even if not, it\u2019s always the canonical representation of your brand and your company\u2019s offering. In an age of large-scale social platforms and advertising, your website is likely to be the one remaining web property over which you have complete control. You define the design, copy, layout and behavior of your site, and it\u2019s for this reason that landing page design is such a huge consideration for every business. Unlike that sponsored post on Facebook or the article you published on Medium, you have the possibility to create a huge advantage through a compelling, convincing landing page that converts users to customers.<\/p>\n<p class=\"p4\"><span class=\"s1\">So here it is &#8211; our updated 2017 landing page analysis!\u00a0<\/p>\n<p class=\"p4\"><span class=\"s1\"><b>WARNING: <\/b>This article is <i>packed<\/i> with statistics and findings. If it\u2019s a little overwhelming, don\u2019t worry \u2014 we\u2019ll be unpacking some of these in the coming weeks.<\/p>\n<p>This post is split up into 8 parts, covering different aspects of B2B landing pages and each featuring examples:<\/p>\n<ol>\n<li>Navigation<\/li>\n<li>Page length &amp; scrolling<\/li>\n<li>The Hero<\/li>\n<li>The Headline<\/li>\n<li>The Call To Action (CTA)<\/li>\n<li>Social Proof<\/li>\n<li>Video<\/li>\n<li>Other findings<\/li>\n<\/ol>\n<h2 class=\"p3\"><span class=\"s1\"><b>Browse the landing pages<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">As before, you can find a collection of every landing page screenshot here on Pinterest:<\/p>\n<p><a data-pin-do=\"embedBoard\" data-pin-board-width=\"600\" data-pin-scale-height=\"400\" data-pin-scale-width=\"80\" href=\"https:\/\/de.pinterest.com\/Mr_Ed\/chartmogul-top-saas-landing-pages-2017\/\"><\/a><br \/>\n<script async defer src=\"\/\/assets.pinterest.com\/js\/pinit.js\"><\/script><\/p>\n\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 1: Navigation<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">Navigation is the backbone of any website. While there are a few different conventions for allowing users to navigate a site, in the world of B2B SaaS, people usually have a single expectation: It\u2019s at the top, and flows from left to right.<\/p>\n<p class=\"p4\"><span class=\"s1\">You wouldn\u2019t think that this allows much room for creativity when designing a landing page, but the sites included in our study showed some interesting variations on the \u201cnorm\u201d.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Why it matters<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">Navigation is how users orientate themselves when they first land on a website. It defines the core structure of the information presented \u2014 which in the case of most SaaS sites includes features of the product, pricing, details on the company itself, etc.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>What we learned<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7661 size-full-column\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/4-720x180.jpg\" alt=\"nav items data\" width=\"720\" height=\"180\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/4-720x180.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/4-300x75.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/4-1024x256.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/4.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/4-300x75@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3>Keep the structure simple<\/h3>\n<p><span class=\"s1\">The average number of navigation items in the menu remains identical from our 2015 analysis at <b>4.3<\/b>.<\/p>\n<p><span class=\"s1\">Keep the structure simple. There should be no reason to have more than 4-5 top-level navigational links. Things get more complex for multi-product companies, but most tend to include a \u201cProducts\u201d menu item to accommodate this.<\/p>\n<h3>Avoid hard-to-discover menus<\/h3>\n<p><span class=\"s1\">Don&#8217;t bury other pages in a \u2018More\u2019 item in the menu. This is completely blind for the user, who\u2019s unlikely to click unless they know what to find there. Just 13% of landing pages included this \u201ccatch-all\u201d item in the menu. Looking for a good alternative? Including a sitemap at the bottom of the page is a good idea, and helps human navigation as well as SEO.<\/p>\n<p><span class=\"s1\">The majority of SaaS landing pages use a fixed (\u201csticky\u201d) navigation menu. This reinforces a sense of the user\u2019s location in the site structure at all times, and gives them a low-friction way out of the page they\u2019re on, other than closing the tab. However, an increasing number of sites limited the number of navigation links while scrolling, some just displaying a signup button. This results in a Call To Action that\u2019s <b>always<\/b> visible to the user \u2014 which is arguably a more elegant solution than spreading multiple CTA buttons down the length of the page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7666\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/63-720x180.jpg\" alt=\"fixed nav data\" width=\"720\" height=\"180\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/63-720x180.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/63-300x75.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/63-1024x256.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/63.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/63-300x75@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 1: Mapbox<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/www.mapbox.com\/\">Mapbox<\/a> reduces its navigation while scrolled to just two CTA buttons:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7703\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-1024x367.jpg\" alt=\"\" width=\"1024\" height=\"367\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-1024x367.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-300x108.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-720x258.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-1920x688.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-1024x367@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-300x108@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/mapbox-nav-720x258@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 2: Pipedrive<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/www.pipedrive.com\/\">PipeDrive<\/a> uses the hotly-debated \u201c<a href=\"https:\/\/techcrunch.com\/2014\/05\/24\/before-the-hamburger-button-kills-you\/\"><span class=\"s2\">hamburger menu<\/a>\u201d for navigation (the user must click the three lines to open the nav menu). This was the only site in the whole study offering this style of navigation on desktop, although it\u2019s far more common on mobile layouts. Perhaps their intention here is to reduce clutter and encourage visitors to scroll on the landing page? Less control for the user, more opportunity for the company to define and push users through the optimal navigational flow.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7704\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-1024x728.jpg\" alt=\"\" width=\"1024\" height=\"728\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-1024x728.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-300x213.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-720x512.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-1920x1365.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-1024x728@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-300x213@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/pipedrive-nav-720x512@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 2: Page length &amp; Scrolling<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">Just as with our previous analysis, we analyzed the page length of each landing page \u2014 looking at what this means for user scrolling on a typical desktop screen resolution.<\/p>\n<p class=\"p4\"><span class=\"s1\">Scrolling is not necessarily bad, however. Various studies have shown that scrolling is a more natural interaction for users \u2014 if it\u2019s not clear what to do on a page, generally people will scroll down. Our study shows that companies take different approaches to spreading their content out, some opting for multiple\u00a0small pages and others fitting\u00a0all critical product information on the landing page itself.<\/p>\n<p class=\"p4\"><span class=\"s1\">This year we have a different king of (short) page length: <a href=\"https:\/\/slack.com\/\">Slack<\/a>!<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7630\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-1024x818.jpeg\" alt=\"Slack landing page\" width=\"1024\" height=\"818\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-1024x818.jpeg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-300x240.jpeg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-720x575.jpeg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-1920x1533.jpeg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-1024x818@2x.jpeg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-300x240@2x.jpeg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack.com_.jpeg-720x575@2x.jpeg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"p4\"><span class=\"s1\">Here\u2019s a visual overview of the page length data:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7631\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/Screenshot-2017-03-16-16.01.01-400x1024.png\" alt=\"Landing page lengths\" width=\"300\" height=\"768\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/Screenshot-2017-03-16-16.01.01-400x1024.png 400w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/Screenshot-2017-03-16-16.01.01-117x300.png 117w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/Screenshot-2017-03-16-16.01.01.png 542w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/Screenshot-2017-03-16-16.01.01-117x300@2x.png 234w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 3: The Hero<\/b><\/h1>\n<h2 class=\"p4\"><span class=\"s1\"><b>Why it matters<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">If the landing page is the user\u2019s first impression of your website, the hero section serves as the user\u2019s first impression of your landing page. If you\u2019re going to shock, wow or ultimately impress your visitor, this is the place you need to do it.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>What we learned<\/b><\/h2>\n<h3 class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7667\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/73-720x180.jpg\" alt=\"People photos data\" width=\"720\" height=\"180\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/73-720x180.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/73-300x75.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/73-1024x256.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/73.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/73-300x75@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/h3>\n<h3 class=\"p4\"><span class=\"s1\"><b>Leverage humans<\/b><\/h3>\n<p class=\"p4\"><span class=\"s1\">73% of the landing pages we analyzed showed people \u2014 many of these shown within the hero section. Human faces are proven to grab attention, and for a category like SaaS which is not inherently emotional in its nature, this is one of the most effective ways to convey or inspire emotion amongst visitors.<\/p>\n<h3 class=\"p4\"><span class=\"s1\"><b>Video is mainstream<\/b><\/h3>\n<p class=\"p4\"><span class=\"s1\">53% of landing pages use video of some kind to convey product value to the user as quickly as possible. Videos are proven to be more engaging than images in certain contexts, so it makes sense that more businesses are leveraging the format, in spite of the high cost to create. Even in 2015, <a href=\"https:\/\/animoto.com\/blog\/business\/video-marketing-cheat-sheet-infographic\/\"><span class=\"s2\">studies<\/a> showed that 4X as many consumers would rather watch a video about a product than read about it. In this year\u2019s study, we saw this taking two forms:<\/p>\n<ul>\n<li class=\"p4\"><span class=\"s1\">A <strong>big \u2018play\u2019 button<\/strong> over the image to get users into the product video as smoothly as possible.<\/li>\n<li class=\"p4\"><span class=\"s1\">A <strong>silent video background<\/strong> on the hero section, previewing the full product video (which users could choose to play).<\/li>\n<\/ul>\n<h3 class=\"p4\"><span class=\"s1\"><b>Showcase your customers<\/b><\/h3>\n<p class=\"p4\"><span class=\"s1\">For the first time, we saw <em>customers<\/em> showcased in the Hero section, rather than visuals from the product or company itself. This is an interesting strategy which really brings case studies and customer success stories to the forefront. If the product itself isn\u2019t inherently visual (i.e. API-based), leveraging your customers could be a great way to boost user engagement on your site.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 1: New Relic<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/newrelic.com\">New Relic<\/a> has embraced their customer brands in a big way, in the hero. And when you have a brand as big as <a href=\"http:\/\/mlb.mlb.com\/home\">MLB<\/a> in your customer base, why wouldn\u2019t you?<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7640\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-1024x506.jpg\" alt=\"New Relic landing page\" width=\"1024\" height=\"506\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-1024x506.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-300x148.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-720x356.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-1920x949.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-1024x506@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-300x148@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/newrelic.jpg-720x356@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 2: Vend<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/www.vendhq.com\/\">Vend<\/a>\u2019s intentions are clear here \u2014 video-first. The oversized play button is incredibly enticing, and probably the first click for many visitors to the site.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7641\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-1024x551.jpg\" alt=\"Vend landing page\" width=\"1024\" height=\"551\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-1024x551.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-300x161.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-720x387.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-1920x1032.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-1024x551@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-300x161@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/vend.jpg-720x387@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 4: The Headline<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">No hero is complete without an accompanying headline. The headline (usually one sentence) is basically your initial product pitch, and needs to grab attention in the same way that the image does. So how do you grab attention with copy? We saw a few different strategies in our analysis:<\/p>\n<ol>\n<li class=\"p4\"><span class=\"s1\">Simply state what your product <em>is<\/em>, e.g. <em>\u201cSimple design, prototyping and collaboration.\u201d<\/em> (<a href=\"http:\/\/marvelapp.com\">Marvel<\/a>)<\/li>\n<li class=\"p4\"><span class=\"s1\">State what your customer can <em>do<\/em> with your product, e.g. <em>\u201cGet ready to sell Smarter, Better, Faster.\u201d<\/em> (<a href=\"https:\/\/www.zoho.com\/crm\/\">Zoho CRM<\/a>)<\/li>\n<li class=\"p4\"><span class=\"s1\">State something aspirational and\/or provocative to grab attention, e.g. <em>\u201cPowering Subscription Success\u201d<\/em> (<a href=\"http:\/\/recurly.com\">Recurly<\/a>)<\/li>\n<li class=\"p4\">(NEW) Outline the problem your product solves, e.g. <em>\u201cHelp desk software isn&#8217;t helpful anymore.\u201d<\/em> (<a href=\"https:\/\/www.kayako.com\/\">Kayako<\/a>)<\/li>\n<\/ol>\n<p class=\"p4\"><span class=\"s1\">From our data, <b>Number 2<\/b> is by far the most-used type of headline. In 2017 it\u2019s common knowledge that telling people <i>what your product does <\/i>is less effective than telling them <i>what they can do with your product. <\/i>Or as was very eloquently stated:<\/p>\n<blockquote>\n<p class=\"p4\"><span class=\"s1\"><i>\u201cPeople don\u2019t buy products \u2014 they buy better versions of themselves.\u201d<\/i><\/p>\n<\/blockquote>\n<p class=\"p4\"><span class=\"s1\">(and just for tradition\u2019s sake, <a href=\"https:\/\/www.useronboard.com\/features-vs-benefits\/\"><span class=\"s2\">here\u2019s the over-used Mario analogy<\/a>).<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>What we learned<\/b><\/h2>\n<h2 class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7898\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/88_-1-720x228.jpg\" alt=\"\" width=\"720\" height=\"228\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/88_-1-720x228.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/88_-1-300x95.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/88_-1-1024x324.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/88_-1.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/88_-1-300x95@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/h2>\n<p class=\"p4\"><span class=\"s1\">The average headline length (<b>6 words<\/b>) remains almost unchanged from our last analysis. What we <i>did <\/i>see however, is some more creative uses of language and page design to stand out from what is widely-accepted as the standard for most sites.<\/p>\n<p class=\"p4\">Here&#8217;s a word cloud representing frequency of words in all of the headlines in the analysis:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7752 size-large\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud-1024x963.jpg\" alt=\"Headline word cloud\" width=\"1024\" height=\"963\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud-1024x963.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud-300x282.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud-720x677.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud.jpg 1503w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud-300x282@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/headline-cloud-720x677@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 1: Asana<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">I love this headline from <a href=\"https:\/\/asana.com\/\">Asana<\/a>. At just three words, you\u2019d think it would be too vague to convey the product\u2019s true value (so many businesses end up with \u201cgrow your business\u201d), but it still gives a sense of what Asana the product is about: Reducing friction, organizing teams to get work done. It also conveys all of this in a positive light \u2014 the notion of moving forward is always positive.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7642\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-1024x352.jpg\" alt=\"Asana headline\" width=\"1024\" height=\"352\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-1024x352.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-300x103.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-720x247.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-1920x660.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-1024x352@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-300x103@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/asana-headline.jpg-720x247@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 2: bridge<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/www.getbridge.com\">Bridge<\/a> are doing something that is increasingly popular in landing page headlines \u2014 they use animation to morph the headline and play on an overall theme that fits the value of their product. In this case, the value is \u201cgetting smarter\u201d (it\u2019s a learning platform) and they\u2019re highlighting how each role does better at their job when they\u2019re \u201csmarter\u201d. <\/p>\n<p class=\"p4\"><span class=\"s1\">Slack jumped on this fairly early with their <em>\u201cA messaging app for _______ \u201c<\/em> scrolling headline (which is no longer used).<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7643\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/bridge-headline.gif.gif\" alt=\"Bridge headline\" width=\"452\" height=\"276\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 5: The Call To Action (CTA)<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">The Call To Action (CTA) is the one action that every single element on the landing page is trying to get your user to take. Clicking a CTA indicates that the user has made a choice \u2014 either that they want more information or they want to sign up \u2014 it\u2019s represents a definite &#8220;win&#8221;.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>What we learned<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7668\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/92-720x228.jpg\" alt=\"CTA text data\" width=\"720\" height=\"228\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/92-720x228.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/92-300x95.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/92-1024x324.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/92.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/92-300x95@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><span class=\"s1\">Given that the CTA is such a pivotal part of any landing page, it\u2019s obviously the object of a lot of debate. The key decisions are:<\/p>\n<ul>\n<li class=\"p4\"><span class=\"s1\">What text to use (<strong>hint: <\/strong>Over 90% are less than 5 words in length)<\/li>\n<li class=\"p4\"><span class=\"s1\">What color to use (<strong>hint:<\/strong>\u00a0Nearly 70% of all CTAs are green or blue)<\/li>\n<li class=\"p4\"><span class=\"s1\">Where to place it (<strong>hint:<\/strong><b>\u00a0<\/b>Many sites duplicate the primary CTA or make it \u2018sticky\u2019)<\/li>\n<\/ul>\n<p class=\"p4\"><span class=\"s1\">The above decisions, given so much multi-variant testing of sites today, are not as difficult as they used to be. For the text, the most successful CTAs reflect the action that the user is taking by clicking the button, as explicitly as possible (while also remaining brief in length). \u201cSign up\u201d is not as explicit as \u201cSign up for free 2-week trial\u201d.<\/p>\n<h3 class=\"p4\">Don&#8217;t ignore\u00a0the data<\/h3>\n<p class=\"p4\">CTA button color must be one of the most split-tested web page variables in history. Our data shows a very clear preference towards green or blue. Again, these are colors that are proven to have a positive effect on users, psychologically. Green is filled with positivity, while blue is calming:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7712\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/cta-button-colors-720x660.jpg\" alt=\"CTA button colors\" width=\"720\" height=\"660\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/cta-button-colors-720x660.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/cta-button-colors-300x275.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/cta-button-colors-1024x939.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/cta-button-colors.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/cta-button-colors-300x275@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3 class=\"p4\"><span class=\"s1\"><b>Use secondary CTAs for Enterprise<\/b><\/h3>\n<p class=\"p4\"><span class=\"s1\">In many ways, having a secondary CTA next to the main one breaks many of the rules of CTAs: \u201cThere should be one and only one action that the user can take.\u201d<\/p>\n<p class=\"p4\"><span class=\"s1\">What we\u2019re seeing this year in SaaS is the rise of a second (usually less prominent) CTA next to the trial signup, allowing users to request a demo.<\/p>\n<p class=\"p4\"><span class=\"s1\">The goal is to catch those users who are, for whatever reason, not ready to do a self-service signup, but want to have a discussion and see more of the product. Typically, enterprise customers are not likely to self-sign-up, so this strategy effectively adds an \u201cI\u2019m Enterprise &#8211; please sell to me in the way I\u2019m accustomed to\u201d button.<\/p>\n<h3 class=\"p4\"><span class=\"s1\"><b>Inline forms smooth the signup friction<\/b><\/h3>\n<h3 class=\"p4\"><span class=\"s1\"><b><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7669\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/signup-in-cta-720x180.jpg\" alt=\"CTA signup form data\" width=\"720\" height=\"180\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/signup-in-cta-720x180.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/signup-in-cta-300x75.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/signup-in-cta-1024x256.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/signup-in-cta.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/signup-in-cta-300x75@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/b><\/h3>\n<p class=\"p4\"><span class=\"s1\">A bigger trend we see this years is the decision to bring part (or all) of the signup form onto the landing page, next to the CTA. In other words, the user needs to enter some information as well as clicking the button on the landing page. You\u2019d think this adds friction, right?<\/p>\n<p class=\"p4\"><span class=\"s1\">What businesses are discovering is that asking for some information upfront has the following effects:<\/p>\n<p class=\"p4\"><span class=\"s1\"><b>It takes some friction from the next steps of the signup, and adds it to the first step. <\/b>This does make the initial CTA <i>harder<\/i> for users to complete, but it smooths out the signup flow \u2014 they\u2019re less likely to be overwhelmed with a huge form further down the funnel.<\/p>\n<p class=\"p4\"><span class=\"s1\"><b>If the user drops out of the sign up flow, you at least have them as an email lead. <\/b>This is huge! Similar to abandoned shopping carts in eCommerce, a user who\u2019s filled out their email and clicked the initial CTA (only to close the tab) CLEARLY has a strong interest in your product. With this method, you\u2019ve got that person\u2019s email \u2014 and therefore a well-qualified lead that you know had strong intent to purchase. Nurture away!<\/p>\n<p class=\"p4\"><span class=\"s1\">We found that the majority (over 60%) of CTAs with inline form fields had just one field \u2014 the email. Many sites also went to the other extreme of capturing probably <em>all<\/em> the information required on the landing page, with six, seven or more form fields. This has the benefit of giving the user their account right away, without any further steps.<\/p>\n<p class=\"p4\"><span class=\"s1\">The main learning here? Designing a signup flow is a game of balancing friction. Take it away from one step, you\u2019ll probably have to add it in another step. It\u2019s worth questioning whether you need all those form fields at all, or whether you can capture the information in other ways.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 1: Segment<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">Very solid CTA from <a href=\"https:\/\/segment.com\/\">Segment<\/a> \u2014 captures email upfront, specifically requests \u201cwork\u201d email, and has a fallback \u201cRequest a demo\u201d secondary CTA.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7644 size-full-column\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/segment-cta.png-720x573.png\" alt=\"Segment CTA\" width=\"720\" height=\"573\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/segment-cta.png-720x573.png 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/segment-cta.png-300x239.png 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/segment-cta.png-1024x815.png 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/segment-cta.png.png 1224w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/segment-cta.png-300x239@2x.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 2: Zendesk<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"http:\/\/zendesk.com\">Zendesk<\/a>\u2019s latest rebranding comes with a clean visual style, which is echoed in the sharp copywriting across the site. Notice that the \u201cdemo\u201d option is actually the primary CTA here, with the trial signup relegated to second place. This without a doubt reflects a push to onboard bigger accounts through their sales process.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7645\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zendesk-cta.png-720x616.png\" alt=\"Zendesk CTA\" width=\"720\" height=\"616\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zendesk-cta.png-720x616.png 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zendesk-cta.png-300x257.png 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zendesk-cta.png.png 970w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zendesk-cta.png-300x257@2x.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 6: Social Proof<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">Social proof comes in a few different forms on landing pages:<\/p>\n<ul>\n<li class=\"p4\"><span class=\"s1\">Customer testimonials (quotes)<\/li>\n<li class=\"p4\"><span class=\"s1\">Links to case studies \/ customer stories<\/li>\n<li class=\"p4\"><span class=\"s1\">Customer logos<\/li>\n<li class=\"p4\"><span class=\"s1\">Social media embeds<\/li>\n<\/ul>\n<p class=\"p4\"><span class=\"s1\">The purpose of social proof on a SaaS website is to remove hesitation and promote confidence in the user. The presence of recognisable brands or highly-positive quotes tells the user that they\u2019re in good company \u2014 \u201cif THIS successful business I respect uses X, it must be a quality product!\u201d<\/p>\n<p class=\"p4\"><span class=\"s1\">The strongest form of referral is <a href=\"https:\/\/chartmogul.com\/blog\/b2b-word-of-mouth\/\" target=\"_blank\">word-of-mouth<\/a>, and if done right, social proof can feel just a step away from that in effectiveness.<\/p>\n<p class=\"p4\"><span class=\"s1\">The problem, of course, is that with every hopeful SaaS business pasting the logos of successful companies across their landing page, users might develop \u201cblindness\u201d to this technique.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>What we learned<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full-column wp-image-7664\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/6-720x180.jpg\" alt=\"Customer logos data\" width=\"720\" height=\"180\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/6-720x180.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/6-300x75.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/6-1024x256.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/6.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/6-300x75@2x.jpg 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3 class=\"p4\">We&#8217;re becoming logo blind<\/h3>\n<p class=\"p4\"><span class=\"s1\">Customer logos are now often placed without any explanation. This reflects people\u2019s familiarity with the technique, making the assumption that these logos are in fact customers.<\/p>\n<p class=\"p4\"><span class=\"s1\"><b>A word of warning: <\/b>Some businesses have been shown to \u201cfake it before they make it\u201d and flat out lie about their customer base. Putting logos without explanation or linking to more detailed information on the customer puts you into the category of potentially faking your social proof.<\/p>\n<p class=\"p4\"><span class=\"s1\">Possibly as a result of this, more businesses are making social proof a much deeper experience for users \u2014 some companies are putting their customer stories front and center on the site, with accompanying videos, podcasts and case studies taking center stage \u2014 sometimes ahead of product information (See the New Relic example in the Hero section above).<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 1: User Testing<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/www.usertesting.com\/\">User testing<\/a> use a fairly-typical bar underneath the hero, featuring some strong customer brands. What they do incredibly well is link through to a full\u00a0Customer page complete with compelling customer stories, which really reinforce how they help those businesses succeed.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7646 size-large\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-1024x121.png\" alt=\"Usertesting social proof\" width=\"1024\" height=\"121\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-1024x121.png 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-300x35.png 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-720x85.png 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-1920x227.png 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-1024x121@2x.png 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-300x35@2x.png 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/usertesting-socialproof.png-720x85@2x.png 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 2:\u00a0Webflow<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">The team at <a href=\"http:\/\/webflow.com\">Webflow<\/a> have done a great job of leveraging social proof &#8212; particularly from social media. The language is strong here too, telling users not to &#8220;take our word for it&#8221;, and to check out the\u00a0<strong>real<\/strong> feedback from\u00a0<strong>real people<\/strong>. Displaying tweets in a native-feeling UI rather than plain text quotes reinforces the feeling that these are real comments.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7709\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-1024x480.jpg\" alt=\"Webflow social proof\" width=\"1024\" height=\"480\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-1024x480.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-300x141.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-720x337.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-1920x899.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-1024x480@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-300x141@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/webflow-socialproof-720x337@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 3: Zenefits<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">Similarly to ProsperWorks, <a href=\"http:\/\/zenefits.com\">Zenefits<\/a> is leveraging their customer base at the forefront of their landing page. No product screenshot here &#8211; just a big smiling Tope Awotona of Calendly! A quote would have been nice here.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7648\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-1024x432.jpg\" alt=\"Zenefits social proof\" width=\"1024\" height=\"432\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-1024x432.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-300x127.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-720x304.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-1920x810.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-1024x432@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-300x127@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/zenefits-socialproof.jpg-720x304@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 7: Video<\/b><\/h1>\n<p class=\"p4\"><span class=\"s1\">All data points and research on the use of video in Marketing suggest that the format wins hands down against static images. It\u2019s considerably more expensive to create than static imagery, but with improved tooling and technology, that cost is coming down, to the extent where most startups can create a professional-looking demo video.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>What we learned<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">We saw an increase in the number of sites using some form of video on their landing page this year &#8211; <b>from 46% in 2015 to 54%<\/b>.<\/p>\n<p class=\"p4\"><span class=\"s1\">We saw video used for:<\/p>\n<ul>\n<li class=\"p4\"><span class=\"s1\">Silent video backgrounds for the hero section<\/li>\n<li class=\"p4\"><span class=\"s1\">Product demo videos<\/li>\n<li class=\"p4\"><span class=\"s1\">Company culture or vision videos (perhaps more useful for hiring?)<\/li>\n<li class=\"p4\"><span class=\"s1\">Customer testimonials<\/li>\n<\/ul>\n<p class=\"p4\"><span class=\"s1\">However, the biggest noticeable change with regards to video was the <strong>placement<\/strong>. Landing pages today are putting over-sized play buttons front and center in the hero section. This suggests that the video is intended to be the first element of interaction when the user arrives on the page.<\/p>\n<p class=\"p4\"><span class=\"s1\">From a purely anecdotal perspective, this makes sense to me. If I visit the website for a product or service and there\u2019s a video available on the page, I\u2019ll usually jump straight to playing it.<\/p>\n<p class=\"p4\"><span class=\"s1\">From a Marketing perspective, video is an incredibly information-dense medium. You can convey a whole product, company, vision in a 30 second video, where it would have taken you a 10-page website with 25 clicks and tons of scrolling to convey the same level of information.<\/p>\n<p class=\"p4\"><span class=\"s1\"><b>Warning: <\/b>Video is nuanced. There are subtleties that you\u2019ve got to get right, to give the impression you\u2019re aiming for. There\u2019s a knife edge between seeming inspiring and professional and being amateurish and arrogant.<\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 1: ProdPad<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">When you land on the <a href=\"https:\/\/www.prodpad.com\/\">ProdPad<\/a> website, the play button is right there. It has no explanation, and that\u2019s fine \u2014 we know exactly what\u2019s going to happen when we click it. In this case, the resulting product video is well thought out, simple and uplifting.<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7649\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-1024x450.jpg\" alt=\"ProdPad video\" width=\"1024\" height=\"450\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-1024x450.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-300x132.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-720x316.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-1920x843.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-1024x450@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-300x132@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/prodpad-video.jpg-720x316@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Example 2: Samepage<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\"><a href=\"https:\/\/www.samepage.io\/\">Samepage<\/a> uses video in a different way. Their full-width video background on the hero section doesn\u2019t explain the product, and obviously doesn\u2019t have sound. What it <i>does <\/i>(and quite effectively) is set the tone for the theme of the product \u2014 team collaboration. It\u2019s also a more effective way of using human faces to engage the user (even more than static imagery).<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7650\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-1024x582.jpg\" alt=\"Samepage video\" width=\"1024\" height=\"582\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-1024x582.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-300x170.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-720x409.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-1920x1091.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-1024x582@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-300x170@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/samepage-video.jpg-720x409@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Part 8: Other findings<\/b><\/h1>\n<h2 class=\"p4\"><span class=\"s1\"><b>Content belongs everywhere<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">In 2017, content is leaking from the blog to other parts of company websites, including the landing page. An increasing number of businesses are using small sections of their landing page to highlight recent content (can be downloadables, articles, etc.). This has a couple of key benefits:<\/p>\n<ul>\n<li class=\"p4\"><span class=\"s1\">Keeps the landing page feeling dynamic, if recent content is regularly updated<\/li>\n<li class=\"p4\"><span class=\"s1\">Helps with lead capture (in the case of \u201clead magnet\u201d content that requires email signup)<\/li>\n<li class=\"p4\"><span class=\"s1\">Helps establish the business as more than just a \u201cproduct\u201d, but also a thought leader in the space.<\/li>\n<\/ul>\n<p class=\"p4\"><span class=\"s1\">Here\u2019s a brilliant example from <a href=\"https:\/\/www.kayako.com\/\">Kayako<\/a>. Their content gets a whole section on the landing page, demonstrating how they\u2019re dedicated to helping educate people on the topic of customer service:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7651\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-1024x530.jpg\" alt=\"Kayako content\" width=\"1024\" height=\"530\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-1024x530.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-300x155.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-720x373.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-1920x994.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-1024x530@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-300x155@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/kayako.content.jpg-720x373@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Free trial vs. demo<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">Product demos (whether video or in-person) feature much more prominently this year on landing pages. As mentioned in the <b>Call To Action<\/b> section, there\u2019s often a secondary CTA button for booking a demo, alongside the trial signup. Sometimes there\u2019s no trial at all \u2014 only a demo!<\/p>\n<p class=\"p4\"><span class=\"s1\">Obviously this is closely tied to the product itself, and the segment of the market they\u2019re selling to. It is interesting however to see that<b>\u00a0less than half of landing pages offer just a trial alone<\/b>. <\/p>\n<p class=\"p4\"><span class=\"s1\">Check out the data on this here:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7652\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/chart.jpg-300x275.jpg\" alt=\"Trial vs Demo data\" width=\"600\" height=\"550\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/chart.jpg-300x275.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/chart.jpg-1024x939.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/chart.jpg-720x660.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/chart.jpg.jpg 1200w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/chart.jpg-300x275@2x.jpg 600w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>The death of the full screenshot?<\/b><\/h2>\n<p class=\"p4\"><span class=\"s1\">Our last study saw an overwhelming number of \u201cdevice\u201d screenshots, where the full product screenshot is wrapped in a sleek looking (usually Apple-esque) device such as a laptop or smartphone.<\/p>\n<p class=\"p4\"><span class=\"s1\">One trend we\u2019ve seen in this year\u2019s landing pages moves away from full screenshots, and focuses on extracting small elements of the user interface to showcase individual features and interactions. The technique is often done in a stylistic way, to emphasise or even abstract away from the real interface.<\/p>\n<p class=\"p4\"><span class=\"s1\">I\u2019m sure they weren\u2019t the first, but Slack popularized this with their <a href=\"https:\/\/www.youtube.com\/watch?v=B6zVzWU95Sw\">trendy product video<\/a> a couple of years back:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7653\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-1024x546.jpg\" alt=\"Slack UI\" width=\"1024\" height=\"546\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-1024x546.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-300x160.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-720x384.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-1920x1023.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-1024x546@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-300x160@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/slack-ui.jpg-720x384@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p class=\"p4\"><span class=\"s1\">\u2026And now we see an increasing number of landing pages highlighting small interactions in their UI, in a more isolated way. For example, <a href=\"https:\/\/hootsuite.com\/\">HootSuite<\/a>:<\/p>\n<p class=\"p4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7654\" src=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-1024x403.jpg\" alt=\"Hootsuite UI\" width=\"1024\" height=\"403\" srcset=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-1024x403.jpg 1024w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-300x118.jpg 300w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-720x283.jpg 720w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-1920x756.jpg 1920w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-1024x403@2x.jpg 2048w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-300x118@2x.jpg 600w, https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/hootsuite-ui.jpg-720x283@2x.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<hr \/>\n<h1 class=\"p3\"><span class=\"s1\"><b>Appendix: Data points<\/b><\/h1>\n<ul>\n<li class=\"p4\"><span class=\"s1\">Mean number of nav bar items: <b>4.3<\/b><\/li>\n<li class=\"p4\"><span class=\"s1\"><b>63% <\/b>of sites use a fixed (sticky) navigation menu<\/li>\n<li class=\"p4\"><span class=\"s1\"><strong>30%<\/strong> of landing pages use a chat widget<\/li>\n<li class=\"p4\"><span class=\"s1\">Mean headline length: <b>39 characters<\/b><\/li>\n<li class=\"p4\"><span class=\"s1\"><b>46% <\/b>of CTA include the word \u2018free\u2019<\/li>\n<li class=\"p4\"><span class=\"s1\"><b>44%<\/b> of CTA use uppercase text<\/li>\n<li class=\"p4\"><span class=\"s1\"><b>34%<\/b> of CTA have an inline form element<\/li>\n<li class=\"p4\"><span class=\"s1\">Median no. of inline form fields: <b>1<\/b><\/li>\n<li class=\"p4\"><span class=\"s1\"><b>92% <\/b>of CTA buttons are less than 5 words in length<\/li>\n<li class=\"p4\"><span class=\"s1\"><strong>88%<\/strong> of landing pages headlines are less than 10 words in length<\/li>\n<li class=\"p4\"><span class=\"s1\">Mean number of customer logos: <b>6<\/b><\/li>\n<li class=\"p4\"><span class=\"s1\"><b>73%<\/b> of landing pages include photos of people<\/li>\n<li class=\"p4\"><span class=\"s1\"><b>53%<\/b> of sites are using video<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We revisit our <a href=\"https:\/\/chartmogul.com\/blog\/saas-landing-pages\/\">2015 analysis<\/a> to take a look at some of the changes and trends in SaaS landing page design in 2017. This expanded analysis looks at the landing pages of over 100 SaaS businesses of all sizes \u2014 with some powerful insights!<\/p>\n","protected":false},"author":9,"featured_media":7500,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14],"tags":[85,84,75,83,21,72],"class_list":["post-7498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gtm","category-pricing","tag-analysis","tag-design","tag-industry","tag-landing-pages","tag-saas","tag-ux"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SaaS landing pages in 2017: Our analysis of 100+ top businesses<\/title>\n<meta name=\"description\" content=\"We take a look at some of the changes &amp; trends in SaaS landing page design in 2017. This new analysis covers over 100 businesses, with surprising insights!\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<link rel=\"canonical\" href=\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SaaS landing pages in 2017: Our analysis of 100+ top businesses\" \/>\n<meta property=\"og:description\" content=\"We take a look at some of the changes &amp; trends in SaaS landing page design in 2017. This new analysis covers over 100 businesses, with surprising insights!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\" \/>\n<meta property=\"og:site_name\" content=\"ChartMogul\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/chartmogul\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-20T10:41:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-10T10:57:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"1250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ed Shelley\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Mr_Ed\" \/>\n<meta name=\"twitter:site\" content=\"@chartmogul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ed Shelley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\"},\"author\":{\"name\":\"Ed Shelley\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/55ca03cbfebabf05e94258e529620fcb\"},\"headline\":\"SaaS landing pages in 2017: Our analysis of 100+ top businesses\",\"datePublished\":\"2017-03-20T10:41:19+00:00\",\"dateModified\":\"2023-08-10T10:57:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\"},\"wordCount\":3725,\"publisher\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg\",\"keywords\":[\"analysis\",\"design\",\"industry\",\"landing pages\",\"saas\",\"UX\"],\"articleSection\":[\"GTM\",\"Pricing\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\",\"url\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\",\"name\":\"SaaS landing pages in 2017: Our analysis of 100+ top businesses\",\"isPartOf\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg\",\"datePublished\":\"2017-03-20T10:41:19+00:00\",\"dateModified\":\"2023-08-10T10:57:58+00:00\",\"description\":\"We take a look at some of the changes & trends in SaaS landing page design in 2017. This new analysis covers over 100 businesses, with surprising insights!\",\"breadcrumb\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage\",\"url\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg\",\"contentUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg\",\"width\":3000,\"height\":1250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/chartmogul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SaaS landing pages in 2017: Our analysis of 100+ top businesses\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#website\",\"url\":\"https:\/\/chartmogul.com\/blog\/\",\"name\":\"ChartMogul\",\"description\":\"Get all your SaaS &amp; Subscription Metrics with a Single Click! MRR, churn, LTV and much more.\",\"publisher\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/chartmogul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#organization\",\"name\":\"ChartMogul\",\"url\":\"https:\/\/chartmogul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png\",\"contentUrl\":\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png\",\"width\":278,\"height\":52,\"caption\":\"ChartMogul\"},\"image\":{\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/chartmogul\",\"https:\/\/x.com\/chartmogul\",\"https:\/\/www.linkedin.com\/company\/chartmogul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/55ca03cbfebabf05e94258e529620fcb\",\"name\":\"Ed Shelley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0266c82a7f8c5d908b6e777ae14b3f52031ea56eb421b3624c74426e07c751c5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0266c82a7f8c5d908b6e777ae14b3f52031ea56eb421b3624c74426e07c751c5?s=96&d=mm&r=g\",\"caption\":\"Ed Shelley\"},\"description\":\"Former Director of Content\",\"sameAs\":[\"http:\/\/@Mr_Ed\",\"https:\/\/x.com\/Mr_Ed\"],\"url\":\"https:\/\/chartmogul.com\/blog\/author\/ed\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SaaS landing pages in 2017: Our analysis of 100+ top businesses","description":"We take a look at some of the changes & trends in SaaS landing page design in 2017. This new analysis covers over 100 businesses, with surprising insights!","robots":{"index":"index","follow":"follow"},"canonical":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/","og_locale":"en_US","og_type":"article","og_title":"SaaS landing pages in 2017: Our analysis of 100+ top businesses","og_description":"We take a look at some of the changes & trends in SaaS landing page design in 2017. This new analysis covers over 100 businesses, with surprising insights!","og_url":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/","og_site_name":"ChartMogul","article_publisher":"https:\/\/www.facebook.com\/chartmogul","article_published_time":"2017-03-20T10:41:19+00:00","article_modified_time":"2023-08-10T10:57:58+00:00","og_image":[{"width":3000,"height":1250,"url":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg","type":"image\/jpeg"}],"author":"Ed Shelley","twitter_card":"summary_large_image","twitter_creator":"@Mr_Ed","twitter_site":"@chartmogul","twitter_misc":{"Written by":"Ed Shelley","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#article","isPartOf":{"@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/"},"author":{"name":"Ed Shelley","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/55ca03cbfebabf05e94258e529620fcb"},"headline":"SaaS landing pages in 2017: Our analysis of 100+ top businesses","datePublished":"2017-03-20T10:41:19+00:00","dateModified":"2023-08-10T10:57:58+00:00","mainEntityOfPage":{"@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/"},"wordCount":3725,"publisher":{"@id":"https:\/\/chartmogul.com\/blog\/#organization"},"image":{"@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage"},"thumbnailUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg","keywords":["analysis","design","industry","landing pages","saas","UX"],"articleSection":["GTM","Pricing"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/","url":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/","name":"SaaS landing pages in 2017: Our analysis of 100+ top businesses","isPartOf":{"@id":"https:\/\/chartmogul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage"},"image":{"@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage"},"thumbnailUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg","datePublished":"2017-03-20T10:41:19+00:00","dateModified":"2023-08-10T10:57:58+00:00","description":"We take a look at some of the changes & trends in SaaS landing page design in 2017. This new analysis covers over 100 businesses, with surprising insights!","breadcrumb":{"@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#primaryimage","url":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg","contentUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2017\/03\/landing-2017-header-zoomout.jpg","width":3000,"height":1250},{"@type":"BreadcrumbList","@id":"https:\/\/chartmogul.com\/blog\/saas-landing-pages-2017-analysis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/chartmogul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"SaaS landing pages in 2017: Our analysis of 100+ top businesses"}]},{"@type":"WebSite","@id":"https:\/\/chartmogul.com\/blog\/#website","url":"https:\/\/chartmogul.com\/blog\/","name":"ChartMogul","description":"Get all your SaaS &amp; Subscription Metrics with a Single Click! MRR, churn, LTV and much more.","publisher":{"@id":"https:\/\/chartmogul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/chartmogul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/chartmogul.com\/blog\/#organization","name":"ChartMogul","url":"https:\/\/chartmogul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png","contentUrl":"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2019\/05\/ChartMogul-Logo.png","width":278,"height":52,"caption":"ChartMogul"},"image":{"@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/chartmogul","https:\/\/x.com\/chartmogul","https:\/\/www.linkedin.com\/company\/chartmogul\/"]},{"@type":"Person","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/55ca03cbfebabf05e94258e529620fcb","name":"Ed Shelley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/chartmogul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0266c82a7f8c5d908b6e777ae14b3f52031ea56eb421b3624c74426e07c751c5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0266c82a7f8c5d908b6e777ae14b3f52031ea56eb421b3624c74426e07c751c5?s=96&d=mm&r=g","caption":"Ed Shelley"},"description":"Former Director of Content","sameAs":["http:\/\/@Mr_Ed","https:\/\/x.com\/Mr_Ed"],"url":"https:\/\/chartmogul.com\/blog\/author\/ed\/"}]}},"_links":{"self":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts\/7498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/comments?post=7498"}],"version-history":[{"count":0,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/posts\/7498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/media\/7500"}],"wp:attachment":[{"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/media?parent=7498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/categories?post=7498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chartmogul.com\/blog\/wp-json\/wp\/v2\/tags?post=7498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}