As part of my role at Shopify I speak with freelancers and agencies who specialise in Shopify theme design and builds. One of the hot topics we often discuss is lead generation - in other words, how to find those in need of their specialist skills.
In addition to being listed in programs such as Shopify Experts, many freelancers and agencies create highly crafted “landing pages” which potential clients are directed to via multiple marketing channels – both online and off.
What’s a Landing Page?
You’ve probably heard the term “landing page” before and might be wondering what the difference between a bog standard “web page” and a “landing page” is.
According to UnBounce, a landing page can be described as follows:
“In the purest sense, a landing page is any web page that a visitor can arrive at or “land” on. However, when discussing landing pages within the realm of marketing and advertising, it’s more common to refer to a landing page as being a standalone web page distinct from your main website that has been designed for a single focused objective.”
Landing pages often differ structurally and visually from a company's main web site (despite often sitting on the same logical domain).
Landing pages are purposefully designed to limit the options available to the visitor with the aim of guiding them towards a defined objective. You will often read the phrase “one page, one goal” in relation to landing pages.
Goals
Some typical goals include:
- Watching a promo video
- Completing a email newsletter signup form
- Booking a free project consultation phone/Skype call
- Completing a project initiation document
- Requesting a quote
- Following you on a particular social network
- Downloading a free PDF after submitting an email address
Whilst this article will focus on landing pages, it’s fair to say that many of these ideas and concepts – such as the goal-driven nature of the page – can be applied to single page company or product web sites. I’ll have a quick look at a recent one I found at the end.
The distinguishing feature should always be that it has a defined goal – whether it be one of those mentioned above or an action such as signing up to a plan or buying a product.
Driving Traffic to Your Landing Page
There are a number of ways to direct potential “leads” to your landing page, ranging from organic search engine traffic to pay per click (PPC) campaigns targeting keywords and phrases. Other ways of directing potential “leads” to your landing page include:
- Sharing your content/url of your landing page via social media channels.
- Sharing your content and expertise via a regular email newsletter which includes a “call to action” button taking the reader to your landing page.
- Contributing to third-party blogs that highlight your expertise and including a link back to your landing page.
- Speaking at events on your specialism. This will elevate you to expert level to those attending. Use a short URL of your landing page to direct attendees to it during or after the event.
- Hosting free lunchtime drop-in sessions for local businesses keen to learn more, and including your landing page URL on all slides and handouts.
- Making use of your email signature to highlight specific blog posts and landing pages within your site.
- Starting a podcast in your niche area. There’s plenty of room in this area and even getting a handful of listeners interested in your content will increase visits to your site and landing page.
That’s just a few of the things I have tried and you will of course have your own ideas. Sadly, there’s not room in this article to discuss how to fully implement all these approaches but let’s assume some, if not all, play their part in driving visitors to your niche services landing page.
Building a Landing Page
With strategies in place to get traffic to your landing page, it’s vital that the page itself is constructed to achieve your intended goal.
Unbounce, a service that bills itself as “the landing page builder for marketers,” has a number of useful articles directly relating to constructing successful landing pages.
Their 12-point plan includes some really useful things to consider when designing and building a landing page. Let’s explore a few in depth:
- Ad message match – Ensure that the messaging and copy you use in PPC campaigns, blog posts and social media content matches the copy you use on your landing pages.
- Context of use – Make use of video and imagery that shows your work in action. For example, a Shopify Expert could use a video of a store owner discussing a theme they built for them.
- Make use of video – According to Unbounce, video can increase conversions by up to 80%. It’s exceptionally easy to produce a short video today and to host it for free on services such as YouTube and Vimeo. Using a plugin such as FitVids will also enable you to take advantage of video on multiple viewport sizes.
- Make use of directional cues – Use arrows, colour and contrast to guide visitors to the primary call to action.
- Data vs. Conversion – If collecting data is one of your goals, consider how long your form is. A long form with a number of required fields may put the potential customer off completing it.
- Edit ruthlessly – Delete 50% of your copy and then 50% of the remaining copy! This is never easy but rigorous editing will result in a more accessible message. One test I often use is to ask friends and family who work outside of your industry to review the page copy – does it make sense; what do they interpret from it; does it make them achieve your goal?
- Enable social sharing – Make it easy for people to share your page or save it for later. You can easily create a “Tweet this” link or add in a “read it later” button as part of the page design.
- Demonstrate trust – Showcasing positive feedback from clients via testimonials as well as including links to recent blog posts and social media activity will demonstrate trust.
- Post conversion marketing – If the primary goal of your landing page is to capture data (i.e. an email address, a short form, etc.) then consider making use of the confirmation page to further engage with your potential customer/client. For example. you could enable them to download a document or highlight further ways they can engage with you such as “follow us on Twitter.”
- A/B test – Always be thinking about how you can test incremental changes that will help achieve your goal. For example, reducing copy, enlarging key bullet points, etc. There are a number of tools such as Optimizely that will allow you to offer alternative variations of a page to different visitors and track the results via an easy-to-use online interface. Also knowing where your traffic has come from will be key to working out which campaign drives the most people to your page. Consider using a URL shortener to hide tracking parameters in the URL.
To the list offered by UnBounce I would also add the following:
- Responsive – Ensure that your landing page(s) functions across multiple screen sizes and resolutions. Completing forms on a mobile device is often hard work – distilling your data capture down to the bare minimum is therefore vital.
Real World Examples
Let’s have a look at some examples to see the theory in practise.
Web Site Rescues
The following is a full-page screenshot of a site called “Web Site Rescues” by Ethercycle who are based in Illinois, USA. They are a client-focused web design agency specialising in responsive, mobile first and performance optimised sites.
Before looking at the different elements of the page, it’s worth noting that this single page sits on its own domain of websiterescues.com and is linked to via a menu item on the main Ethercycle web site.
Overall, I really like this page. It’s long, but has a nice flow to it and there are many little touches that make it appealing including:
Clear Messaging
The banner headline is short and concise. You are instantly made aware that this offering focuses solely on “rescuing” an existing Shopify store as opposed to designing a new one.
Equally, the three round graphics which appear second in the flow highlight the three major selling points of their service: speed, affordability and the goal of increasing checkout conversions.
Client Testimonials
As we progress down the (admittedly lengthy) page, their success is enforced by testimonials and case studies. Highlighting the revenue of their existing clients (over $10 million USD) shows that they are “trusted” by companies with considerable income. However, they are careful not to alienate any businesses by making a point of saying that they work with startups, online retailers and Inc. 5000 businesses.
Creative Design
The second half of the page is taken up with a letter from Kurt Elster – the co-founder of Ethercycle. It’s a clever design trick as it clearly distinguishes this text from the testimonials above and feels more personable (even if we know it’s not).
The letter can be broken into four main sections:
- The why: explanation of the problem
- The how: the process to fixing the problem
- The cost: details of the fee, delivery time and their “30 day Shopify Store Performance Guarantee”
- The call to action: “Let’s do this” followed by how they work and a direct dial number to call Kurt directly.
The Big Call to Action
Overall, I really like this landing page but was a little surprised that the main call to action wasn’t referenced earlier. The “Contact us for a confidential discussion“ form appears very late on in the page. Many landing pages would have included a button link to the form higher up in the page. By not doing so, you are “forced” to scroll down which may increase engagement.
Links
There are only four links on the landing page, all of which are very discreet. The first appears at the end of the letter section.
Links are often referred to as “leaks” in relation to landing page design. Whilst giving people the opportunity to browse your site is the usual course of action, the main goal of a landing page is to keep the visitor on that single page as Oli Gardner explains:
“Distractions remove people from the reason you have paid them to be there. Removing all links on the page, so there is only one action, will increase engagement with the page’s conversion goal, increasing form completions and reducing the bounce rate.”
It’s for this reason that you will rarely see the primary navigation of a site included on a landing page.
Newsletter
The landing page also has a secondary goal of signing visitors up to a free five-part email course via a link in the footer of the form. To reinforce the option, a pop-up overlay (which isn’t alway advisable from a UX perspective) appears after a given amount of time providing the option to subscribe to the course. This page uses Drip to handle their signups and email course. Both MailChimp and Campaign Monitor offer similar features.
Responsiveness
The page is responsive in design and works equally well on mobile devices or wide screen desktop monitors.
Never “Submit”
Oli Gardner is not a fan of the “Submit” button. In 26 Beautiful Landing Page Designs Critiqued with A/B Testing Tips he begins with the following:
“Do you remember those old grey Windows buttons that said “Submit”? We all do. And it’s about time we stopped copying bad habits and started creating relevant Calls-To-Action (CTAs). CTAs should be instructive. They should inform your visitor what will happen once they’ve clicked. And for the love of all things clickable, your CTA should never, ever say “Submit”.”
One potential improvement to the form section of this landing page would be to change the text of the submit button to something more appropriate – e.g. “contact me with next steps.”
For further inspiration, I recommend reading the UnBounce 50 point landing page checklist.
Delighted
One-page landing pages for web applications can (as mentioned earlier) include many of the tactics used in landing pages. In fact, you could argue they are landing pages.
Recently launched “Delighted” describes itself as “the fastest and easiest way to gather actionable feedback from your customers.”
The page looks great. Here are a few highlights:
- Whilst there are “leaks,” they are internal page links which, when clicked, scrolls the page to the relevant section
- The navigation (not encouraged in a more traditional landing page) is fixed and has one “leak” – a link to a live demo of the app
- Other links in the main copy are present but serve to reinforce the app via full page case studies and testimonials
- Clear messaging at the top of the page easily explains what the app does
- Strong use of colour (purple in particular) highlights key sections and the “sign up to free trial” call to action button
- Purple is also used for directional cues – in this case, the dotted lines which link the step-by-step guide to the app
- Video is used very effectively to highlight how the app solves a real problem and the benefits it offers to a company
- Demo videos are also used to showcase the app on desktop and mobile
- Testimonials are used both in written form and by the inclusion of well-recognised brand logos
- Clear pricing displayed with a bright purple call to action button right beneath it makes it easy to get started without any hidden surprises
Conclusion
Landing pages are as much about understanding human psychology as designing great web pages. Tactics such as reducing choice, visually guiding a user through a page, and using video to further engage each play a part in persuading visitors to action our intended goal.
Whilst I have highlighted two pages I think work well (and feel free to disagree), there are plenty of other great, and not so great, landing pages out there.
Hopefully some of the ideas outlined here – most of which have been culled from the fantastic knowledge shared on blogs by Unbounce and Hubspot – will influence how you plan and design your next landing page.
Extra Resources
If you’re new to Landing Page Design, we’d recommend a number of introductory tutorials to get you up to speed with the basics:
- Landing Page Design Principles: Open Assignment - Accompaniment to the Tuts+ course by Adi Purdila
- A Beginner’s Guide to Successful Conversion by Ian Yates
You could also take a look at the Landing Page Themes on Envato Market.
