Optimizing Mobile UX for a high-ticket landing page

Last month, I was approached by a client making 6-figure revenue per month to help them with their money pages and overall funnel strategy.

This particular client recently started driving paid traffic via Facebook ads to their special one-time offer sales page on their website. Daily $1000 to $2000 was spent to bring in the traffic. Since their product is very good and the offer is a no-brainer, they were getting their ROI quite good. And since they were making more than they spent, they didn’t think much of it.

Then they approached me to see what I can do for them in their campaign.

There are many quick wins and growth achieved, but for this post, we will focus on mobile UX. Here we go…

1. They were getting considerable traffic on mobile devices – About 38%
2. 410px was a common width in most mobile device traffic
3. Out of 38% of traffic, Apple iPhone received roughly 30% of traffic.

This was quite helpful.

Since most web pages are designed in desktop, they are made for desktop experience. And then, the content is stacked one after another, calling it a responsive design.
The responsive content is adapted in different devices, but the UX is not mobile-optimized.

Sure, the developers use in-desktop tools like inspect and “responsive design mode” while coding. This is helpful, but you have to experience what a real user experiences. In that specific device and environment to see how the actual user experience is?

This small exercise sometimes gives us much more insights than any “textbook knowledge” would.

After this, I added HotJar which gave me quite a few insights on what the user was actually experiencing at their end.

• Headings and Sub Headings are overly big, using up almost 50% of screen real estate sometimes.
• Decorative Icons and illustrations are either too big or lose meaning once they go from horizontal to vertical.
• Charts and other product screenshot images are not mobile optimized. Sure the images are resized but they are barely visible, losing their impact totally.
• Pricing tables are stacked one after another. Users are not able to compare between them.
• Things that took a reasonable amount of scroll on desktop, take too much vertical space and totally lose their impact. Sometimes, this even becomes annoying.
• Uses the same footer as the desktop which is huge and too long to scroll.
• And so on.

To sum it up, the page is made responsive. But not created for the mobile experience.

The answer becomes instantly obvious. Suddenly the font sizes, page structure, images, gallery, tabs, navigation all fall in place.

Here are the improvements made to the landing page.

On the mobile version, we seldom resize headings for the mobile experience. The content is stacked one after another breaking the UX. In the age of modern-day CSS, usage of flexbox could easily reorganize the content in any way we want for different devices and we can have the same CRO experience as of desktop.

Instead of big heading and keeping the content order the same, utilize CSS and have appropriately sized headings, and reorganize the content via CSS for the mobile experience.

In the mobile version, since the content is stacked one after another, images and icons usually go 100% of the screen width. Making them way bigger than necessary. The SVG icons are sometimes bigger than even the desktop version. The solution is the opposite. Resize and float the icons and images as necessary. Sometimes, removing decorative illustration images makes more sense.

Resize icons and decorative images as per their importance and float them as necessary for a better experience.

If this was placed as an image, it’d go full-width, making it barely visible, losing its impact totally. Or, if this is a CSS, the line behind the boxes would lose its impact.

As shown above, the solution is either to have a different design for mobile. Or, use alternative images for the mobile experience. This will retain the same experience that the user has on the desktop version.

But when it comes to mobile that the same gallery now goes vertical. The images are given 100% screen-width, the vertical scroll becomes endless and the experience is obtrusive at best.

The solution to this is to resize gallery thumbnails to look like thumbnails on mobile as well. We can use the horizontal scroll as well if thumbnails are not preferred. This retains the same UX we have on the desktop version and looks beautiful.

However, when making it responsive, we push the plans to stack one after another. This makes it incredibly difficult to compare them. In case the pricing columns are long with many features, this gets even worse.

If we delve into the app experience of different companies, we will see that Amazon perfectly shows a 3-column layout on a mobile screen. And it doesn’t feel cramped either. For this particular client, it fit our need so we went with the pricing table look shown above.

In case it doesn’t work out for you, here are some other good examples.

The first example above utilizes a horizontal scroll on the mobile. This makes it possible to compare the plan in mini-screens as well. Or, we can reduce the height of the pricing table, only keeping the most important differences visible while hiding the rest that the user can expand when they tap on them, or in some other way.

But the same becomes a problem when it comes to the mobile experience. As usual, these columns are stacked one after another, making the scroll way too long and meaningless.

Isn’t it funny that we hide main navigation links in a hamburger menu, but would show ALL the links in the footer again, including legal links such as privacy policy and terms of use?

We usually have one-page, one-goal criteria on a webpage. Mostly, a prominent CTA is present right above the footer. To keep its impact intact, reduce the footer to either show the most important links or other crucial information, such that it is not obtrusive to the main CTA.

There are many such small improvements possible. Based on the above, you may have understood the problem and the gist of it. Good thing is that most of these changes are possible simply by writing separate CSS for the mobile experience.