How to leverage user insights to perfect your mobile UX design

Imagine if your vehicle could make right turns but not left. Only having part of the driving experience would get pretty frustrating, right? That’s what it’s like for your customers if your desktop site is wonderful, but your mobile UX design falls flat.

Since your mobile UX design is part of the customer experience, it can’t take a backseat. 

Whether consciously or not, mobile website visitors judge everything they interact with. A hard-to-navigate site with annoying pop-ups drives people away, while an intuitive and engaging page draws customers in and builds brand affinity. 

This guide covers

• 9 ways to improve UX design on your mobile website

• 5 real-life examples to get inspired

TL;DR

Creating a website that’s easy and enjoyable to use on a mobile device is a critical part of the customer experience, which impacts engagement, loyalty, and conversions. 

Improve your mobile UX design by

1. Identifying what drives mobile visits, from referral sources to user goals

2. Removing barriers to engagement and conversion, like broken buttons or confusing navigation

3. Researching hooks that close a sale based on your customer personas

4. Comparing how mobile vs. desktop users use your website to tailor the experience

5. Prioritizing accessible design so every visitor can seamlessly use your mobile website

6. Using images sparingly

7. Keeping typography minimalistic

8. Implementing sticky elements

9. Measuring website analytics and iterating your UX designs

9 ways to improve UX design for mobile devices

Mobile user experience (UX) design is the process of building a website that’s easy and enjoyable to use on a mobile device. It’s an important subsection of UX design because 57% of the time people spend browsing the internet is on a mobile device.

While the same basic UX design principles apply to mobile and desktop sites, visitors may interact differently when browsing desktop and mobile. 

Because the way your customers use your mobile and desktop sites varies, you need to test and fine-tune them separately—but it’s worth it. Here’s why:

• Every touchpoint matters: Your desktop site, mobile site, product, and marketing efforts must work well (and together) to increase engagement and conversions. Bonus: satisfied customers reveal user preferences you can use to improve UX.

• You can make (or lose) a sale on your mobile site, too: A positive website experience encourages visitors to stick around and make a purchase—no matter the device. Improving your mobile UX design is a vital part of optimizing conversions.

• Mobile UX is an opportunity to delight customers: Exceeding customer expectations establishes an emotional connection that increases loyalty and word-of-mouth recommendations.

Now that you know why mobile UX design matters, let’s dive into techniques to optimize it.

1. Identify what drives mobile visits

Drivers are why and how visitors make it to your site. The path people take to get to your site and what they want to do can vary between desktop and mobile, so you need to design your mobile site to put relevant information front and center.

Here are a few ways to identify what drives mobile visitors:

• Use Customer Journey Analysis to identify your most popular landing pages for mobile visits and prioritize UX improvements there

• Watch Session Replays—real-time playbacks of visitor interactions—to learn how users move through your site and what content or pages they look at

• Test a ‘Start here’ page or prominent buttons for page categories and review what’s most popular with mobile visitors

Mobile session replays let you capture specific behaviors like checkout completions or contact form submissions

💡 Pro tip: use mobile UX-friendly surveys to learn more about your customers. 

Surveys let you hear directly from customers to find ways to improve your UX design, but if you aren't careful, your on-page mobile survey can sabotage the experience you want to improve.

Here are a few ways to use surveys without ignoring mobile UX design principles:

• Use embedded surveys that exist on your mobile page instead of a pop-up that covers your user’s entire screen 

• Send a survey to customers via email that asks about their experience with your mobile website

• If you do use a pop-up survey, test the design across devices to make sure the ‘X’ button is noticeable and easy to use

2. Remove barriers to engagement and conversion 

A barrier is anything that causes mobile visitors to leave, like a button that doesn’t work or missing information. These screeching halt moments affect the current visitor session and leave a lasting impression that keeps potential customers from returning.  

Bugs, faulty design, and frustration are bound to happen sometimes, so your best bet is to be on the lookout for barriers that need attention. Here’s how:

• Filter recordings for rage clicks and u-turns that signal frustration or confusion through repeated clicks or quickly going back to a previous page

• Use an on-page feedback widget to find pages visitors are unhappy with

• Review heatmaps that visualize where most visitors scroll, click, and move to find critical elements they ignore or unnecessary designs you can delete

Mobile and website heatmaps visualize the most popular (hot) and unpopular (cold) elements of your content

🏃 In a hurry? Try these quick fixes to common mobile UX problems. 

The tips above help you find barriers specific to your audience and mobile site, but there are other common mobile website issues to resolve that improve your UX. 

• Use Google’s mobile-friendly test to find unresponsive design elements 

• Optimize image files with Squoosh

• Create touch targets that are at least 44 pixels for buttons and links, and set your button and link padding to at least 8 pixels for each side

• Add parameters to pop-ups, like a minimum number of pages visited, to ensure you only show them to interested visitors 

• Replace auto-playing content with a static image to avoid draining mobile device batteries and consuming too much data

3. Research hooks that close the sale

Hooks are the elements that persuade users to take action or make a purchase, so you need to learn what resonates with mobile users to improve your design and increase conversions. 

Here are a few ways to find hooks: 

• Identify customers who purchased on mobile and email them a link to a post-purchase survey to learn what they liked about the experience and what almost kept them from buying

• Conduct A/B tests to find UX design variants that increase sales, and then review recordings from those sessions to understand why the design worked

• Interview customers about their goals, challenges, and preferences, and then use their terminology in your designs

💡 Pro tip: learn about your customers to discover your winning UX design for mobile. 

Understanding customer psychographics—which outline who your customers are beyond classic demographics like age—helps you create mobile UX designs they love interacting with. 

For example, the branding and layout of a mobile website for an outdoor gear company would be very different than one for a luxury apartment building in the city because the goals and priorities of each customer group vary. 

Here are a few examples of how customer details influence UX design: 

• Personality: extroverts might prefer group shots, while introverts could want images of solo time

• Interests: people interested in pop culture may connect with a CPG company that uses movie references in their design

• Beliefs: a collection of logos from organizations a company donates to might hook a socially conscious audience

• Values: budget buyers might gravitate toward product images with stickers of the percent savings for bulk orders or subscriptions

4. Compare user flow expectations vs. reality

Even the most customer-centric UX decisions are still somewhat of a guess—you need to see how users interact in reality and compare it to your expectations. 

User experience tools give you a real-time look into mobile website interactions:

• Filter funnels to view mobile and tablet sessions to visualize where users drop off, then compare them to desktop visits

• Review replays for mobile and tablet visits to learn how visitors navigate your website on mobile vs. desktop

• Use heatmaps to uncover what navigation elements mobile visitors interact with and use this to prioritize your design roadmap

5. Prioritize accessible design 

You want everyone to enjoy your website, so you need to consider your UX design accessibility. Permanent visual, mental, or physical impairments and even temporary injuries like a broken hand all impact how customers use your website. 

Here are a few accessibility tips to incorporate into your design:

• Put labels in code for dynamic content to work with screen readers

• Review heatmaps to see which navigation headers visitors frequently use and which you can delete to simplify your design

• Use WAVE to check font accessibility

• Check the color contrast of your site

• Don’t rely on colors to convey a message, like green for ‘good’ and red for ‘bad’—add symbols or text, too

💡Pro tip: talk to customers about their mobile experience. 

Talk to customers, especially those with disabilities that impact how they use your website, to gain a new perspective on your UX accessibility. 

Email your customers a short survey to recruit participants for accessibility testing, and then use an interview to hear about their experiences with your mobile site. 

Customize your recruitment survey questions to find participants from a particular segment

6. Use images sparingly 

Humans are visual beings. Much of how we consume information and entertainment involves the use of imagery. But images can pose considerable damage to mobile user experience. That’s why you need to heed best practices to avoid a bad mobile UX.

Firstly, there is a smaller screen on mobile, so images carry a larger weight. As such, their implementation is trickier on these devices. They have to be large enough to be seen in a way that clearly and easily conveys their contents, but not so large as to require scrolling.

Make sure your images do not cause any loading delays; images are the primary cause of slow page load times and the problem is compounded on mobile. Slow load times bog down your website speed, which in turn negatively affects SEO and triggers impatience, a telling sign of a bad UX. 

That’s where you have to consult your server. Make sure it has the proper speed and correct updates, so that images never set back your mobile site or app. A good server is able to distinguish which devices your visitors are accessing your content from—desktop or mobile. 

Graphic designers must use the right coding so there are no issues with the general view of the image. Pay close attention to image sizing; there are recommendations on standard image sizes as they relate to pixels and the like. 

7. Keep your typography minimalistic

The typography, i.e., textual style of a website, is a crucial component of the UX. Most of the information we imbue comes from reading, so the typography must be presented in an easy-to-read way.

Although the text must be large enough to see without incurring any squinting, you should steer clear of using large fonts, since mobile screens are much smaller. Otherwise, large letters would block other parts of the page from view, forcing users to constantly scroll around to find anything. But don’t settle for small fonts either—you wouldn’t want to worsen the user experience by making your visitors constantly zoom in/squint. 

So how do you determine a happy medium? The key is to keep the text proportional to the page and screen size. Jason Pamental of H+W Design has formulated a method that maps out the correct proportions of the text (including the body copy, H2s, H3s, etc.), the line height and characters. 

8. Implement sticky elements

Sticky elements are often those that visitors rely on most; when these elements are not in immediate view or access, it can easily irritate them. As such, you should implement sticky elements for a more convenient mobile user experience that provides a component of seamlessness.

You may have heard of the sticky search bar, but, although a sticky search bar is valuable for desktop, it is inconvenient for a good mobile UX, as it takes up a lot of space. Since it is inopportune for user experience on mobile, you’ll need to opt for another element.

In place of a sticky search bar, add a search icon at the top navigation, or provide the search function within the hamburger menu. The former is a better option since it renders instant visibility of the icon.

9. Measure and iterate

After you implement the previous strategies, you need to measure their performance. Mobile website metrics signal potential issues and high-performing pages, which means they’ll help you find pages to iterate and designs to duplicate. 

Here’s what to measure to monitor your mobile UX design:

• Checkout and cart abandonment rate: find what mobile UX moments make customers leave a sale

• Conversion rate: compare conversion rates between devices and over time to find UX issues

• Net Promoter Score® (NPS): understand how likely mobile customers are to recommend you to their friends

• Customer satisfaction (CSAT): gauge overall customer satisfaction to benchmark sentiment toward your UX design

💡 Pro tip: get a comprehensive view of UX metrics with Contentsquare.

Contentsquare gives you the tools you need to understand the complete cross-channel customer journey. You can 

• Capture all data across web and mobile for a broad view of your digital experience

• Optimize multi-session and multi-device journeys so you can understand how your mobile and web experience compare

• Quickly visualize the user experience and make rapid changes for fast conversion and improvement

4 amazing mobile UX design examples to learn from

The best mobile UX design is specific to your company and audience—which takes some time to perfect. Still, looking at inspiring examples of great UX design for mobile offers a starting point and a way to learn without a lengthy trial-and-error process. 

1. Duolingo’s integrated research

The Duolingo mobile site asks new users how they heard about the program and why they want to learn

Why it works: 

• Duolingo’s site identifies drivers by asking how mobile visitors heard about the company 

• All of the answer options appear on the page without scrolling

• There are recognizable icons for options next to the text

• There’s only one question per page to avoid overwhelming visitors 

2. Hotel Tonight’s on-the-go priorities

Hotel Tonight puts quick reference hotel details at the top of the mobile page, like guest rating and location

Why it works: 

• Hotel Tonight’s mobile website places the hotel map at the top of the page—instead of further down like on the desktop version—which is perfect for on-the-go customers

• Visitors can establish a quicker opinion thanks to the ‘Why We Like It’ copy high on the page

• The ‘Book now’ button with nightly price is always visible so visitors don’t have to scroll up or down to find it

3. InVision’s content hierarchy

The InVision blog lets content take up as much space as possible on the mobile site by eliminating any distracting sidebars

Why it works:

• InVision’s website focus is just on the content—it eliminates distractions and the font is as large as possible

• There’s a subtle progress bar at the top of the page to let readers know how far into the content they are

• There’s white space between paragraphs and between lines for readability

4. Spotahome’s delightful details

Spotahome uses a subtle illustration at the side of the mobile website that opens a quiz for new users to find housing

Why it works:

• The cat on the side of Spotahome’s mobile site creates delight. At first, you don’t notice it, but it’s too cute not to investigate.

• The short quiz feels like an adventure unfolding while being a lead driver for the company

• The progress bar lets visitors know how far they are in the process

Great mobile UX design begins with empathy

User behavior and interactions transform your website from a collection of code into an experience—so it’s critical to include customers in your mobile UX design efforts. Learning from customers helps you make relevant design decisions with less guesswork to create an enjoyable mobile site for visitors. 

You might not always know what to ask and when, but leading with empathy and learning along the way will carry you to your goals.

FAQs about mobile UX design