A designer’s Guide to designing a high conversion landing page.
Recently I started working my way through the Daily UI challenges to improve my design skills. My goal is to approach each challenge as if it were a brief from a client and will be used in production.
While working through the challenge #003 | Landing Page, there were some important lessons that I learnt. At first, I completely misunderstood the brief and assumed that we were supposed to design a Homepage. But after conducting some research, I quickly realized that —
“Landing page is not the same as the Home page.”
I then scanned through the work of some of the designers on sites like Dribbble and Behance and saw that just like me, lot of the designers got this part wrong. Though there were some very beautiful, Dribbble worthy shots of Home Pages, they were simply not designed to achieve the goal that a Landing page is meant to achieve. So after going through my research process and understanding the Landing page design principles, I decided to put together everything that I learned into this concise guide.
Following are the main topics that I will be covering in this guide -
- What is a landing page?
- Landing Page vs Home Page.
- Essential Elements of a Landing Page.
- Landing Page Design Principles.
Bonus — I have also included the final design of the landing page that I created to complete this challenge.
What is a Landing Page?
Landing Pages are standalone pages that are designed for a particular marketing campaign. Usually landing pages are not linked to the rest of your website and it does not contain a navigation bar. It is a place where you send traffic to when you really want some action.
Generally landing pages only have one goal -
- Capture Leads or
- Introduce the product/service to a potential customer.
2) Landing Page vs Homepage
Landing Pages —
- Landing Pages are single purpose page. They are often set up for the purpose of a marketing campaign.
- Landing Pages do not and should not contain navigation bar. Any links to other pages or external sources which might drive away the traffic, should be avoided.
- Landing Pages should be kept as focused as possible. You should avoid keeping any elements that might distract the visitor away from taking the desired action.
- Homepages are general purpose pages. Often, homepages are designed to maximize the company’s or person’s online presence.
- Homepages include Navigation Bar and are connected to other internal pages of the website.
- Homepages intentionally provide links to other posts or pages such as contact pages.
So now that we understand the major distinctions between the homepage and the landing page, lets dive into the crucial elements of the landing page and the design principles.
3) Essential Elements of a landing Page
There are six important elements that must be included on a landing page-
- Headline — This element is so important that it is a subject in itself. There are dedicated books and courses to develop the skill for writing “magnetic” headlines. Writing an effective headline is both an art and a science. Headlines play an important role to get the audience hooked. If the headline is catchy enough and conveys the USP clearly, it will motivate the visitor to scroll down and read rest of the content.
- Subheading — This is where you get to elaborate bit more and explain the headline in more detail. This is a direct extension of the headline.
- The Hero Image — The use of header image or the video background is a great way to convey the message visually. A good choice of a graphical image here can not only enhance the aesthetics of the page but also enhance the user experience and engagement. A good hero image will make your page “sticky”.
- A Single Conversion Goal with CTA — The whole purpose of designing the landing page boils down to this one element — CTA (Call-to-Action). The success of a landing page design is measured with the rate of conversion. If your goal is to capture leads, the form and the CTA has to be positioned strategically. They should be designed to stand out from the rest of the elements.
- Benefits of your offering — This is the part where you list down the benefits of your product / service. Ideally, it is supposed to be in the form of concise bullet points which makes it easily scannable. You can also embed a video or some kind of visual to explain the benefits of your product for the visitors who prefer visuals. According to a research, embedding videos can increase conversions by 86%. So take advantage of this whenever possible.
- Social Proof / Trust Indicators — This is the section which adds weight to your claims. Having social proof in the form of genuine user testimonials is a great way to gain trust from an audience and significantly improve the conversion rate. Trust Indicators are logos of popular influencers or industry leaders who use your product or they recommend it in some way.
4) Landing Page Design Principles
- The F-Pattern in Usability — You may have heard this one before, according to the study conducted by Nielson group, visitors typically scan the website in an F shaped pattern, from left to right. Although this is not a hard and fast rule and you can control the flow of the scan by using other design techniques like visual hierarchy and the use of colors, organizing the structure in this way can help improve the conversion rate. Place most of your important content towards the left of the page.
- Put your most critical landing page elements in the area above the fold — According to usability research, about 50% of your visitors will not scroll below the fold, unless the content above the fold catches their attention and makes them want to know more about the offering. Again, Headline plays a very crucial role in accomplishing this task.
- Keep your Input Form simple — This is very important if you want your visitors to take action. Lot of landing pages do the mistake of asking too much information which may or may not be relevant. This creates the resistance. Only ask for the information that you really need. If you need to ask for more details, the best thing is to only keep about 2–3 easy to fill input fields visible and then reveal more fields in steps as the user completes the visible fields. You can even make the cursor placed automatically in the first field, once the page loads.
- Use contrast colors for the most important elements — This is one of the low hanging fruits. One of the easiest ways to make the most important elements stand out is to use contrasting colors. It really does not matter if the button color is red or green, the important thing is, it should easily stick out from the background and rest of the elements.
- Use lots of White Space — White Space helps you emphasize what matters. Making a good use of white space is essential for a good user experience and to make your matter stand out. If your page is too cluttered, it can be distracting for the visitors and they need more energy to figure out what’s what. The aim should be to reduce the friction as much as possible and make it easy for the visitor to take action.
Finally, here it is — my version of the landing page design. If you have any suggestions on how this can be improved, please feel free to comment. If you like it, then too let me know by showing some love. It will mean a lot.
Here is an image of the full page —
To wrap things up, here are some quick tips to keep in mind when designing a landing page -
- Optimize your page for mobile devices. More than 50% of the traffic comes from mobile.
- Optimize the speed of your landing page. A one second delay in your site speed can mean 7% fewer conversions. (Source)
- Have a clear Call To Action. If possible, avoid using a generic “Submit” text in the CTA Button. Use something more descriptive like “Download our Guide”.
- Do NOT include a navigation bar or links to any external sources.
- Avoid including multiple offers or trying to achieve multiple goals from a single landing page.
- Do NOT clutter your landing page with the elements or any extra details, which does not help to achieve the objective.
If you would like to learn more about Landing Pages, here are couple of amazing resources —