CX Insights

Designing User Friendly Landing Pages For QR Codes

7 min read

A landing page is a vital tool for your online marketing. Also referred to as a lead capture page or lander, this single webpage appears in response to clicking on an ad, following an email link, or scanning a QR Code.

The general goal of your landing page is to convert visitors into sales leads. As such, it can be a make or break situation. Visitors who arrive at your landing page are no longer a cold lead. Rather, they have already initiated a relationship; they are pre-qualified and interested in what you have to offer. Don’t let bad design ruin this amazing opportunity!

Your landing page needs to have the highest quality design. For professional designers, this probably doesn’t sound like too big of a challenge. However, landing pages have a unique set of design elements. Likewise, the user experience is different from a typical web page.

Not All Landing Pages are Created Equal

Visitors arrive at a landing page from various sources. In the past, landing pages were primarily reached from a link in an email or after clicking on an advertisement. These days, there is a more popular mode of transportation to a landing page: QR Codes.

Visitors who arrive at a landing page via a QR Code have special needs. They will be accessing your landing page from a mobile device, which should be the starting point for your design.

When designing landing pages for QR Codes, remember that people will be accessing the site from a mobile device. Source

While helping you create a stellar landing page design for QR Codes, this article will focus on four key aspects: the call to action, content, appearance, and mobile interaction.

Call to Action

The main purpose of your landing page should be a clear and concise call to action. This is the only way to convert visitors into leads. Make it very clear what you want them to do and what they will get in exchange. If the visitor won’t be receiving an instant reward, don’t lead them to believe they will.

There are a variety of actions you can ask your visitor to take. However, don’t try to add too many — one should be plenty. Do you want the facebook like or the email address? Trying to accumulate both might confuse the visitor.

Don’t confuse your visitors and focus on one call to action only. Source

If you choose to use a form on your landing page, ask for a minimal amount of information. Typing lengthy responses to questions on a mobile device is enjoyed by no one! Also, let the visitor know which fields are mandatory. Otherwise, they might think their disinterest in answering a particular question will be a deal breaker.

Consider adding a second “sign-up” button at the bottom of the page. This is especially helpful for long landing pages where scrolling is involved. The call to action should always be just a tap away. If the visitors don’t want to read all your information, they can simply tap the button at the top. If the visitors make it all the way through your witty repartee, they don’t have to scroll back to the top to sign up.

Also, it might be a good idea to include a few helpful resources near the second call to action. Links to a “Learn more” page, or a “Live demo” might be appreciated. If visitors read all your information, there is a chance they did so because they weren’t totally convinced about your product or service. They might need a bit more convincing.


To ensure the best possible chance of receiving a lead from your landing page, you’ll need to add more than just a call to action. Take a moment to introduce yourself and share some information about your brand.

While it is important to tell a bit about your company, you don’t want the supportive information to dominate your landing page. The content shouldn’t draw attention away from the call to action.

No one likes a show-off. Double check to make sure your content isn’t self-serving. Viewers want to know how they will benefit from your company’s products or services — so tell them!

If you are struggling for ways to add more oomph to your page, throw on a bonus or two; something along the lines of an example, testimonial or video would be nice.

  • Examples — People like to see what they are going to get; rarely do they buy things sight unseen. If you are designing a landing page for an app maker, include some screenshots. If your client is a hairstylist, add some before and after photos.
  • Testimonials — Anyone who is reluctant to take the action you request might be reassured by testimonies of other customers. Include some genuine, friendly testimonials from people — not companies — near the call to action.
  • Videos — Videos are a gold mine when it comes to landing pages. They are an easy way to share a lot of information quickly. Landing pages that are accessed via QR Codes are greatly enhanced by videos. A lot of times, people are on the go when they scan a code. Consider the following: a visitor scans a code on a bus bench and then watches the video during the commute to work. The visitor probably wouldn’t be able to fill in a form on the bumpy ride, but a video is super easy to watch while in transit.

While video does have its advantages, there are some potential pitfalls too. A video’s quality might be compromised by mobile internet. Therefore, the smaller the file size, the better the quality of the video. Also, visitors won’t necessarily have headphones with them when they watch your video. Consider using videos that don’t rely on audio to get the point across.


The appearance of your landing page can be greatly enhanced by giving special attention to two closely related topics: typography and color. Both factors greatly affect the legibility of your content.

Many designers dislike dealing with typography. It has gotten a bad rap for being time-consuming. That may be true, but it doesn’t mean typography should be ignored. It is especially important because displays of mobile devices are small.

Use your typography to establish a hierarchy. Let viewers know where they should start reading. Then, tell them where they should go next. Typography can also help visitors pick out the most important bits of information.

Likewise, color can be used to establish a hierarchy by grouping different topics of information together by hue. However, you must be careful that your color selection doesn’t interfere with legibility. Positive images — black on white — are easier to read than negative images — white on black.

Mobile Interaction

Being user friendly on mobile devices is perhaps the most important factor of QR Code landing page design. Every single viewer will be using a mobile device or tablet. No one will be seeing the landing page on a desktop display. That fact right there should be the driving force behind your design.

When designing your mobile-friendly landing page, ask yourself the following questions:

  • Where will this QR Code be placed? Where the viewers access the landing page should influence what they see when they get there. A QR Code in a fast food restaurant isn’t the best place to include a lengthy registration form. The visitor will be busy eating and looking to make a quick getaway. A simple facebook like, on the other hand, would be appropriate for that location.
  • What is visible above the scroll? Once you have your landing page designed, test it out on the most popular smartphones. At what point do the visitors need to start scrolling? Were they able to see the most essential information? If not, move the important stuff to the top.
  • Have I done everything possible to minimize load time? QR Codes will be scanned by a mobile device. That means the landing page visitors are using a cellular network or Wi-Fi. Slow downloads could cause visitors to exit before you want them to.
  • Have I considered finger dexterity? According to the Apple iOS develop site, tappable areas should be 44 x 44 points or 0.6 x 0.6 inches. Are your tappable areas at least that size? Extensive typing on a mobile device can be challenging — especially for the older generation. When possible, use checkboxes and drop down lists. Also, don’t include a list of links. Trying to tap the right one could be a nightmare!

The next time you design a QR code landing page, focus on the call to action, content, appearance, and mobile interaction. By doing so, your visitors will be much more likely to become leads.

Jessica Velasco
Jessica is a blogger and designer for Subtle Network. While far from perfect, Jessica likes to think she is capable of avoiding the most obvious creative blunders and designs with the reader in mind. Check out how her company used various design elements to help Haarklinikken patients dealing with hair loss.