How to optimize a Landing page even without custom images! + Real example (HostedMetrics)

Written by pdcortes98 | Published 2018/06/21
Tech Story Tags: growth-hacking | conversion-optimization | startup | saas | landing-pages

TLDRvia the TL;DR App

In this article, I will be identifying some problems with HostesMetrics’ website that might be turning off potential customers along with some examples of what a better solution could look like.

What is HostedMetrics?

HostedMetrics offers a streamlined, hassle-free package for application monitoring solutions preventing all sorts of common problems like taking a lot of time to setup, a lot of maintenance or even has bad quality data due to common mistakes during implementation.

Why not use custom images?

Since custom images would increase the maintenance of this website a lot whenever the team wanted to add more things to it I decided to not use them plus this solution doesn’t require many images of the platform because the service is supposed to be something that takes work away from you and you won’t check it too much.

Because of those reasons, I decided to keep this clean, simple and easy to read/follow along while also making it much more actionable for anyone reading this.

The process

This will be specific to HostedMetrics, if you want to learn my 5 step process to turn visitors into customers that you can apply to your website, here’s my 100% free email course

Things to keep in mind

  • HostedMetrics is fixing the problems of having a long setup process and fixing all the problems that could go along the way, so those are the pain points I’ll be focusing on the page.
  • To get context for what problems to focus on we had a quick chat over email
  • This product needs to be validated a bit better so we know what are the best objections to answer, because of that, this is the best we can do for now.
  • The goal is to get more people to sign up and more leads (people contacting/scheduling demos) so Heliodor can get more signups or more validation for the service.

Every problem is different I will do my best to make actionable to as many people as possible if you want something that could apply to every website, check out my 5 step email course (it’s 100% free btw)

Current problems and how to fix them

Header

Current version

  • There’s too much going on at the moment since he’s showcasing all the different platforms as the title which is not an effective way to explain what it does
  • This is the first impression so we need to briefly answer the questions “What is it?” and “What does it do?” so you can create the curiosity to keeping learning more about the service, avoiding high bounce rates.

Suggested version

  • The title is quite big to grab a lot of attention while removing the need to have an image on the right
  • Notice that the title provides some context to the problem it’s solving but creates enough curiosity to learn more through the paragraph below.
  • Heliodor (the founder) mentioned he’s targeting tech-savvy people otherwise this title and paragraph combo wouldn’t work nearly as well because it would be missing information.
  • The line above the CTA provides an extra sense of security and a good reason to create an account.
  • As an alternative to creating an account, I added “Book a demo” in case some people need a more high touch approach to getting the service.

Introducing the problem

Current version

  • This is great! Exactly what I mentioned in my previous article or the formula for a great landing page I covered on my free email course.
  • The only issues here is that the image doesn’t look that professional and the way the issues are present might not be “aggressive” enough

Suggested version

  • The purpose of this section is to either remind them how bad the pain points HostedMetrics is fixing or to provide some context on how many things could go wrong in case it’s their first time using a service like this.
  • Notice how “Normally, a lot could go wrong!” grabs some attention and tries to change the mindset of looking at this as a “nice to have” instead of an investment. With titles and a dedicated section for this we can control how people perceive it much better.
  • To help show that’s this is something going wrong I added those icons from FontAwesome that anyone could use for free.
  • There is a title for each of this to explain the big picture of what could go wrong and a paragraph below to explain why that is or how bad it could be so it can answer questions some people might think about for these issues.
  • I do the exact same thing on my website if you want another example.

Explaining how it works

Current version

  • Seems way to simple and might be what they expect other competitors’ options to be in case they haven’t face these problems before.
  • Needs to be step by step with a bit more context.
  • Needs to answer why it’s better or how can it be better.

Suggested version

  • Using a numbered list and a vertical layout is much easier to follow along since this is the same direction you are scrolling through the page and makes it much more noticeable and more likely for people to read it.
  • Heliodor needed to explain why this could be setup in 15 min when previously he didn’t explain how hard the setup is and how many things could go wrong.

Qualifying the customer

Current version

  • Polarizing is great to make the right people feel like this service and cut out people that don’t qualify to be your customers but the execution needs a bit more work.
  • Seems like the client needs to do the job to figure if there’s a fit and not the other way around.
  • Awesome place for a CTA like “Not sure if you are fit? Let’s chat and we’ll help figure out what’s best for you”

Differentiation

Current version

  • This is a good initiative it just needs to focus more on the unique benefits a small team can offer.
  • Some of the things here like “We won’t disappear overnight on you” might raise up some objections that weren’t there before.

“Final CTA”

Current version

  • The title doesn’t create enough urgency or a good reason to sign up
  • Needs an alternative CTA in case people are not ready to create an account and might need to ask some questions or a demo.

Suggested version

  • “Your solution is only 15 min away” — reminding them that this is much faster to setup and associate this with the easiest/fastest way to do Application Monitoring. Hopefully, even if they consider doing it themselves they will remind themselves this could “X times” faster!
  • Important to highlight the risk-free to encourage more people to signup
  • Allways having that alternative CTA to book a demo if people aren’t ready or need a more high touch approach.

Pricing

Current version

  • All the plans look the same, it needs prioritization to help people decide or not be overwhelmed and not convert.
  • Offering to answer questions or schedule a demo is great but that it’s not in the ideal place to get the most request possible.
  • Needs to explain better what’s included (example below)
  • I don’t have enough info to say if this should be before or after the “Final CTA” ( the section I just mentioned) but that’s super easy to switch order and test anyway.

Suggested version

  • This version focuses on anchoring the prices to make it seem like a better investment and try plan in there mind the thought that this would be the easier and ultimately cheaper method (due to the time or mistakes it saves)
  • I put the prices at the bottom as we normally perceive things that are lower to have a lower price. The ideal place would be in the low left corner of that block.
  • Notice how the Professional plan is more prioritized since it has a bar saying “Most popular” and the CTA has much more contrast than the other ones.
  • Since Enterprise is probably are a rarer occasion I removed a lot of the attention from it to give it to the normal plans and the most attention to the “Professional” plan.

Alternative CTA’s to grab more leads!

Current version

  • Look at how it is this is to read! Is unlikely people will have everything they need to know to convert so try to provide lower commitment alternatives as much as possible so you can grab those leads even if you have to convert them long term.

Suggested version

  • This is pretty much the end of the page, if you don’t get any interaction from the visitor he will leave the page, this is our last chance to grab them!
  • Notice how much more visible these two options are.
  • These have different commitment levels and people can choose whatever it feels best for them but either way, you will still get their contact info!
  • You could use this to link to your FAQ, documentation and so on… depending on what service you are offering.

Additional stuff he could add in the future

  • FAQ — to answer all the questions and have a CTA at the end for people to contact the team in case they have more questions
  • Testimonials — to get some social proof which is really essential (Heliodor doesn’t have these yet)
  • Case studies — even better than testimonials are result driven case studies to show how good HostedMetrics is (Heliodor doesn’t have these yet)
  • Use cases — in this case, it could be to explain what type of data could be imported, what can be measured and any valuable stuff potential customers would pay for.

Want to know how I do it? 👇

This article was a deep dive on one of the steps from my 5 step process to help SaaS startups improve their conversion and revenue. Sign up from my free email course to go from very little leads to a website that converts potential customers!

Click here to get my free course

Need help with your conversion?

Would love to discuss your problems so feel free to tell me about your current situation, needs or goals in the comments 👇 or …

I designed this page in less than 6 hours, imagine what I can do for your company with more time ;) 👇

Services

Testimonials

Free email course

Email: pedro@cortes.design

Further reading:

How To Make a Conversion-driven SaaS Landing Page [2017 edition]_The average human attention span recently fell to 8 seconds (that’s less than a goldfish!), there are hundreds of…_blog.prototypr.io

Anatomy of a great Landing Page_If you know your customers well enough and you have a good product to serve them then building your website with the…_blog.prototypr.io

Design Landing Pages around Objections!_In every single one of my articles, I’ve tried to explain mostly universal techniques that could improve product…_blog.prototypr.io

The Biggest Landing Page Mistakes and How to Fix Them_As a Designer/consultant focused on optimising conversion rates and through analysing a lot of pages regularly and…_blog.prototypr.io

Breaking down a Conversion driven SaaS Landing Page (Designed to capture more leads)_In this article I am going to show you how I designed a concept page specifically to capture leads, in this case, it’s…_hackernoon.com


Published by HackerNoon on 2018/06/21