How to optimize your landing pages for great UX
Clear to understand landing pages are the key component for increasing the sales of your product. Whether it’s the homepage that’s acting as a landing page, or a separate section of the website altogether, your investment of thought into the design of a landing page will greatly impact the UX that your users are going to experience.
Creating better user experiences means more conversions, which then leads to a happy and fruitful business experience for you and your team. Though easier said than done, especially when we consider factors like the average attention span of a web user; it’s not even ten seconds!
Great landing pages have something in common. They are easy to understand, they state their objective clearly, and their usability is pixel perfect, allowing users to either convert into paying customers or subscribers, or simply leave.
You don’t want users to leave, but you also don’t want to force stuff upon them in hopes that they will convert. Copywriting goes hand in hand with landing pages, but too much copy can have the reverse effect, and scare users away because of lack of clear direction.
Lesson #1: Indicate clear directions for the user for any landing pages
Whether promoting a product, or giving away an eBook, clear directions of the action steps that the user can take are essential parts of a great user experience. Take a look at the recent promotion from HackerRank:
The marketing goal here is understandable from the perspective of HackerRank, they are giving away an eBook on the recruiting process in the tech industry, and in exchange want to acquire some details about you: name, your email, and your status at the company you’re working for.
How could such a simple landing page generate good results?
There are two things that HackerRank are executing well here:
- Clear copy — the copy of the promotion is clear, loud, and actionable. Three individual points are listed that promote the content of the eBook, no extra fluff necessary.
- Signup form — the signup for to download the eBook is more sophisticated than the usual “enter your name and email” signup boxes. This indicates authority from HackerRank’s perspective.
The footer is used to fuel trust signals through adding logos of popular brands that HackerRank has worked with. For something as simple as giving away an eBook in exchange for an email subscription, this is a flawlessly executed landing page.
Lesson #2: Compliment your copy with design elements
Design and copy can work together like a team, as long as you allow it to. HackerRank promoted the cover of their eBook, they used a custom designed signup form, and the copy elements had some visual appearances to it as well.
Let’s take a look at Dropbox, a popular cloud storage platform, and how they use copy and unique design elements to talk about their product, without making users feel overwhelmed by ridiculous amounts of copywriting.
The above snippet is essentially the first point that Dropbox outlines as a feature of their product. It explains that you can save your files on your computer, but also access them from any device that supports the Dropbox app.
For a techie, understanding this concept isn’t going to be difficult, but what about those who are inexperienced? In those cases, Dropbox lets users unfold more information through the “Learn more” call to action.
As users unfold the “Learn more” action, Dropbox provides more concise understanding of how the platform works, complemented with screenshots. Now even the most inexperienced users of technology can understand the process of Dropbox, and how it securely manages your files in the cloud.
What are the takeaways?
- Concise description — providing a concise product description helps to boost the onboarding process by not going into too many details about what your product does.
- Informative calls for action — allowing users to learn about your service as an alternative element of the design is a great example of how to improve UX for experienced and the inexperienced web users.
Dropbox does this process for all of their features, not only are they saving design space for describing their product, they are actively using modern design elements to improve the user experience.
Lesson #3: Create a smooth onboarding experience
The first two lessons are all about design and the interaction of design elements combined with concise copy to explain what your product does.
Remember the old days? When marketers would create ten miles long web pages talking about the huge benefits of what they are selling? Those days are long over.
Onboarding can be understood as the perfected signup process that user needs to undergo when signing up for your service. Instead of simply asking user to enter their email and password, through the onboarding process you can fully prepare your customers for your service. Shopify is a great platform that utilizes onboarding to its full potential.
This is the signup screen that appears when you click the “Start your free trial” button on the homepage.
Looks average? Doesn’t it? From here, you’d expect that Shopify would send you an email with all the juicy details to help you get started with your own eCommerce store. But no, Shopify does a lot more than that.
Because you are going to be operating as a business, Shopify wants to learn a little bit more about you before letting you in the platform. The screen above appears once you click the “Create your store” button on the first page. Here you share your business details, like your name and address. But we’re not done yet.
Before finalizing your signup, Shopify asks for one last piece of information, which is the size of business you are operating with, which then better adjusts your user experience you’ll have with the Shopify platform.
Once all the information has been finalized, and submitted, you are ready to experience Shopify. A welcome email will arrive in your inbox, followed by an email that explains how Shopify works, and how to make the most of your newly created eCommerce store.
The icing on the cake is the actual Shopify dashboard that you’re led to when finishing the signup. It looks as follows:
It’s called “Advice”, and this section of your dashboard contains all the essential pages, links and tips that you will need to get started with selling on the Shopify platform. You can use the buttons to quickly access the store building page, and other pages like selling on Facebook, or adding Shopify widgets to your website. All these options are part of the Shopify platform, and giving new users directions creates a much smoother user experience.
There’s a lot of interesting stuff to digest here.
- Thorough signup process — collect as much data from your new signups as possible through the onboarding process. Try to get them to answer the most important questions during the signup process so you can make them better offers through email, and direct platform features.
- Create actionable advice — once the user has reached the inside of the product or platform, explain to them how your best features work, and give them clear directions to access and start using them.
The old ways of traditional signup forms are gone, and for an online platform it’s best to personalize the user experience through an onboarding process, such as the one that Shopify is using, or take example from other startups that embrace the onboarding process.
Closing words
WordPress developers have put in the work to create a phenomenal collection of landing page templates targeted at apps, software, platforms, portfolios, and similar categories and selling points. But this isn’t just about WordPress users, if you are building a solid business module on the web, you will want to put in the work to create optimal performance landing pages, yielding inspiration from either this post right here, or going out there in the real world and exploring for yourself what seems to be working so well for other businesses.
Author Bio
Alex Ivanovs works as a managing editor for Colorlib — a world renowned platform for WordPress developers.
You must be logged in to post a comment.