I’ve Consulted Over 150 Mobile Sites — Here’s What I Know About Effective UX

As a Mobile UX lead at Google working with small company web development teams, I’ve made a lot of observations — and learned how to avoid the pitfalls

Ryan Warrender
Google Design

--

This is a running list of insights from partnering with over 150 web development teams over the past 5 years.

Mobile Web Best Practices

I joined a team at Google in 2016 called the Mobile Transformation Team. Our team had a simple, but very ambitious goal: Make the mobile web better for everyone. We focused on helping small- to medium-sized businesses improve their mobile web experiences. More specifically, we were UX consultants that would work with web dev teams and provide recommendations on how they can better optimize performance, usability, and accessibility.

We championed for end users.

Here are the learnings, observations, and pitfalls we gathered after seeing literally hundreds of websites:

First impressions matter. Mobile users are very goal-oriented and super impatient. Avoid distracting a user from their goals. Keep your homepage and top landing pages simple. Be sure to have a clear call-to-action and a value proposition above the fold. A user should know what to do and why they should stay on your mobile site in a moment’s glance.

Left to right: Warby Parker, Stash Invest, Drizly

Do less. The number one recommendation I consistently made was, “Do Less.” That means fewer images, fewer form fields, fewer complicated navigation patterns, fewer plugins, fewer 3rd party pixels, fewer walls of text, fewer full screen overlays, fewer render blocking js, fewer clicks… fewer ways to distract your user from their goals.

Speed accentuates good design. It is no surprise that faster mobile sites have better user engagement. Countless case studies, usability tests, and I am sure your own personal anecdotes, make it abundantly clear that speed drives conversions. The three performance metrics that truly reflect the user experience are First Contentful Paint (FCP), Speed Index, and Time to Interactive (TTI). It is critical to set a performance budget and hold your team accountable. It’s a shame, when your beautifully designed site results in a bounced user because you forgot to compress your 2MB hero image. Use tools like Lighthouse (shown below) to monitor these metrics.

Recommended benchmarks:

Read up on Web Vitals. Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.

First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

Run tests on your site using Lighthouse.

Screenshot from Lighthouse

Talk to your customers. This might seem incredibly obvious, but I can’t tell you how many blank stares I have instigated by asking, “When was the last time you talked to your users?” Our goal as mobile UX leads was not to just make recommendations, but to be the voice of the user. Put yourself in your users’ shoes and try to complete the most common tasks (track the number of clicks and total time to complete).

Use data to justify design. The trend of “data-backed design” is nothing new. After prioritizing a mobile project it is important to track mobile KPIs. For retailers, monitor Average Order Value (AOV) and the exit rate on the page where the checkout funnel begins. For lead generation companies focus on CTR of the primary Call-To-Action button and the lead to close ratio (successful sales / number of leads * 100). If you have a travel site, focus on return sessions (customer retention) and channel-specific traffic (ie: are social shares increasing). Consider monitoring micro conversions as well like email newsletter signups, comments on an article, user reviews, video views, or shares on social media. Pro tip: I highly recommend you leverage this brilliant Datastudio dashboard that one of my peers (Damla Cakirca) made to monitor user engagement on your site.

Relapse is real. The majority of the companies we worked with saw significant improvements in site speed and/or user engagement. However, 30–60 days post consultation (when we were no longing looking over their shoulder) we would see bad habits resurface. To avoid this pitfall, use a performance budget. I also, recommend using the Chrome Dev tool to find unused CSS and JS code with the Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need. It is critical to monitor and audit your mobile site on an ongoing basis.

Be bullish on new opportunities. If you are looking for a transformative modern mobile experience, scope out building a PWA. If you want to reach a new audience check out Web Stories.

Web Stories are a web-based version of the popular “Stories” format that blend video, audio, images, animation and text to create a dynamic consumption experience. This visual format lets you explore content at your own pace by tapping through it, or swiping from one piece of content to the next.

If you are a retailer, look into ways to expedite the checkout such as reducing fields, enabling autofill, or implementing Google Pay. The key to success is to add technologies incrementally with a focus on enhancing the user experience. If it does not add value to your users, don’t invest in it.

Build Web Stories

Cross functional consensus is key. Getting all key stakeholders on the same page is an obvious, but important reminder. Improving your mobile web experience is a team effort. All teams need to take responsibility on monitoring the mobile experience. Marketing teams should watch the use of 3rd party tracking pixels. Engineering teams should focus on optimizing the critical rendering path (removing render blocking assets). UX teams should ensure images are optimized and focus on reducing usability pain points (ie: automatic sliders). It is critical to set cross functional goals and hold all teams accountable.

Observations of Mobile Trends. This last section is a catch all of the best UX trends that I’ve seen positive results from during 2019–2021 .

Remember there is no magic bullet to resolve all of your UX issues. Improving your mobile site takes patience, analysis, and cross-functional commitment. Kickoff the web project that is right for your users and your business.

@RyanWarrender

--

--

Ryan Warrender
Google Design

Product Manager at Google. DIYer, Podcaster, and fan of tacos.