Landing the second click: a guide to designing better landing pages

Creating Landing pages that give better conversion.

Cover image displays illustration and examples of landing pages

A landing page is like an inspiring story — a story you want your audience to believe in. And just like any other story, this one also needs secret ingredients to become engaging and successful.

With start-up culture and Web3 as the hot new things, we’ve been churning out landing pages like a whirlwind — for new ideas, product features, and innovative propositions. At Razorpay, our mission is to build the best quality landing pages that push the bar of excellence.

“Landing pages are the first thing users see that helps convert them into potential customers. Because, let’s face it — the world is an imperfect place, people judge books by their cover — and they’ll judge your landing page too.”

This article offers some tips so that you can deliver top-notch landing pages for your app or website.

A good landing page exchanges many hands. Let’s talk about the journey of a landing page as it flies from the product team to the front-end team via design.

Image showcasing each phase of the landing page creation in form of a process chart
Process chart displaying each phase of the landing page creation
  • Understand thy user: Research. Research. Research. On who our users really are, what their needs and wants are, what they are looking for, how this offering can ease or revolutionize their life, and at what stage of their journey they visit it.
  • Have a clear objective: Be crystal clear about why you’re building this. And make sure the inside story from your research manifests on the landing page. Use valuable insights from research and spend time solidifying the page’s core storyline and selling points.
  • Ideate on layouts and wireframes: The more one ideates, the more one eliminates reasons for failure. Stakeholders should work closely on the layout, structure, and ordering of the page. By the end of it, you should have a clear understanding of what the low-fidelity layout needs to look like.
  • Get business alignment: Decide how your page should perform on key business benchmarks, like the number of sign-ups achieved. This will make it easier to measure your page on certain metrics for success.
  • Focus on content: The script of any story is what makes or breaks it. Likewise, for a landing page, content is king. The text should be persuasive enough to attract and keep the user engaged. Keep in mind SEO optimization, and make the page top all listings for best visibility.
  • Bring in the WOW factor: Once you’ve nailed the basics of design philosophy and incorporated brand guidelines, visuals must be added. Brainstorm on the illustrations or images that would convey the message best and the sections that might need custom layouts and interaction.
  • Check everything off the list: Create a plan for a phased rollout. Make sure to get the basic hygiene right — like the page load time, adherence with legalities, functioning links, etc. Finally, set up the last round of review sessions with your stakeholders to ensure all expectations are met.
Image lists a few checkpoints for a final delivery
Checklist for a phased rollout
  • Set up analytics: Landing pages not backed with the right analytics devoids the maker of performance insights. Apart from signups, also focus on what pages the user navigates before and after, which sections they spend the most amount of time on, what they are clicking on more, etc. Tools like Hot-jar help us to see how the user is traveling through the page. This will allow us to make better design iterations for next time.
  • Test with users: Once the page goes live, validate the intended effects through multiple ways depending on the type of design elements to be evaluated. Commonly used methods are A/B testing and visual perception which aids in a hygiene check for any red flags.

1. Think mobile-first:

There is an increasing number of users turning to mobile devices to browse the web. So it’s important to optimize for smaller screens and find ways to incorporate delight even with smaller real estate.

Image covers example for for Mobile vs web layout and how the design elements adapt from one to another.
Design for Mobile vs web: notice changes in the layout and positioning navigation of cards from Desktop to mobile

2. Convey a compelling value proposition:

To attract customers, one needs to communicate all the benefits and features that the consumer will get out of the product so they know why they should be clicking on the CTA. Emphasize the product’s USP to set them your company apart from its competitors.

Image captures different ways to communicate and visualise the value proposition
Captured different ways to communicate the value proposition

3. Keep It Simple, Silly:

Keep it crisp, to the point, and easy to understand. Don’t spill all the details; users are only looking for a convincing summary. A good rule of thumb here is that, if you are unsure of specific content, don’t feel obligated to fill the blank space with it. Only display key information that is important for users to make a decision.

4. Display a clear Call to Action:

The Call to Action (CTA) defines the primary action you want your visitor to take. It could be a product purchase, booking a slot for a follow-up call, or signing up for a trial. Whichever action it is, state it clearly in your CTA and give it prominence. Also, make sure to have multiple CTAs throughout the page so that the user intent can convert to action at any stage of the journey.

5. Focus on the hierarchy:

Think about how the user’s eyes are traveling through the page. Make sure that the ordering and structure of the sections on the page follow a logical flow. Don’t let the user scroll too much to reach the meaty part of the page.

“The flow of the page should provide the right amount of information at the right time which would be easy and effortless to follow.”

6. Make visuals your best friend:

Grabbing attention and keeping the customer engaged is the main goal of visual elements. Play around with colors, different fonts, bullet points, headers, and sub-headers — these elements encapsulate information hierarchy and make it easier for visitors to identify key information at a glance.

Image shows Variety and Examples of different Visual styles.
Variety and examples of different Visual styles


I hope this article helps you to come to the conclusion that some of your landing pages might indeed need a makeover. However, there’s no need to be stressed — you can start with One page Love or Unbounce for some impressive templates.

Read the full article here

Leave a Reply

Your email address will not be published.

How We Use Research Hub

How We Use Research Hub

Table of Contents Hide Our UX research team and how we workPatterns and problem

UX in India: The Journey from circle to triangle

UX in India: The Journey from circle to triangle

Does the Government of India really care about the User Experience?

You May Also Like