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…

The Problem

Numbers Don’t Lie – Exploring Google Analytics

Speaking with the client, I understood their product, offer, and strategy. And then I started exploring.

Since the money page was very clear, I delved into their Google Analytics dashboard. And I found some key insights…

  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.

Experiencing what users actually experience

With these numbers, I visited the landing page on Apple iPhone.

And saw common errors that I see on most landing pages.

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.

Common mistakes I see in Mobile UX

Here are some common mistakes I see in many landing pages when I visit them on mobile.

  • 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 Solution

App-like mobile-first experience

Anytime I design a web page for mobile, the first thing I ask is, “how we would design it if this was a mobile-only website?” or “What if we were designing a mobile app instead of a webpage?”

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.

Please Note: Since I don’t really have permission to share details about this client publicly, we will use stock wireframes from CraftWork.design and screenshots from other similar websites to make the point. The screenshots are changed but the lesson remains the same.

Appropriately sized headings

On the desktop version, we have good navigation, appropriately sized headings, a call to action button, and other such elements which is good for conversion.

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.

Optimize image and icon size to match mobile experience

This is the most common mistake I see in the mobile version of any website. We use nice images and icons to make the desktop layout attractive. Of course, these icons and images are meaningful but not always a necessity.

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.

Special images for the mobile version were created when necessary

In the desktop version, many times we have 1-2-3 processes or other similar steps shown. These processes are nicely depicted on desktop but on mobile, the image is either resized to be too small that it is not visible. Or if this is done via CSS, the horizontal process goes responsive, losing its impact totally.

For example, here’s a section I designed for the NewsletterGlue website.

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.

Optimized Photo Gallery for mobile UX

In the desktop version, oftentimes we have a list of images or a photo gallery in one or two rows. This looks very nice in 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.

Pricing Table columns are shown side by side

This is a tricky subject, but perhaps the most important one. On bigger screens, we typically have a price table showing different pricing plans side-by-side. This makes it easier for the users to compare them and decide the plan that best suits their needs.

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.

Optimized footer for mobile version

We see big footers everywhere with multiple columns. Some of this information is necessary while other information is placed there just because we have some space still left. And this works nicely for the desktop version.

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.

The Result

Mobile optimization along with many other factors such as improving copywriting, bringing in urgency/FOMO elements, optimizing funnel, etc. eventually resulted in 7x ROI on their ad spend. Those optimizations require their own separate case study.

To conclude, in the age where mobile users are plenty and this trend is not going back, it is wise to design mobile-first. Or, at least pay special attention to mobile users instead of making your website responsive.

P.s.: Special shout out to Lesley for encouraging me to pen this down.

Do you want more such articles?

If people love this, I’d be happy to share more of such content.
This is the first time I am sharing this accumulated knowledge and I hope this was helpful to you in some way. Do you want me to write more? Did you like this content? Please share this content on social media. Or please reach out to me on Twitter and let me know your feedback.