As part of the “Campus Experts Summit” event that took place last month at Campus Madrid, the Mobile UX Manager at Google Claire Illmer hosted a session called “Winning on the Mobile Web”.

Claire shared valuable insight on how to get more conversions from mobile traffic that we’d like to share with you.

If you are interested in learning about performance, mobile user experience, or conversion rate optimization then keep on reading. The talk was divided in four areas: priority, speed, design, and future. Let’s go over them in detail.

Priority

Why should you invest in mobile?

People have their connected smartphones with them all the time. And they use them to browse or shop at any moment of the day. When they are searching for a service or product online you need to be there. This should be enough reason for your business to prioritize the mobile web. But if you are not convinced yet, just take a look at this interesting data provided by Google:

More than 50% of all Google searches start from a mobile device.
In the U.S. 52% prefer shopping on the web compared to in an app.
The mobile web offers broader reach than mobile apps.
89% of people are likely to recommend a brand after a positive brand experience on mobile.

Speed

Performance and speed is one of the most important ways for your business to win on the mobile web. We have already talked about this in previous posts.

The “The Need for Mobile Speed” report indicates that 53% of visitors will abandon a mobile site if it takes longer than 3 seconds to load. And according to another case study published by SOASTA, mobile pages that are one second faster see up to 27% increase in conversion rate.

Always try to put yourself on the user’s shoes. No one likes to stare at an empty screen for more than 3 seconds. If you don’t want to lose more visitors and potential customers work on your mobile performance and be fast. A few seconds can make all the difference.

Bounce rates increase by 123% when mobile page load times increase from 1 to 10 seconds. – Think With Google.

First of all, you should test your site’s performance to start making the necessary changes. During her talk, Claire Illmer mentioned 3 performance tools to consider:

Page Speed Insights: a tool that measures the performance of your page for mobile and desktop devices and score ranging from 0 to 100 points.
WebPageTest.org: used for measuring and analyzing the performance of web pages. It provides you with suggestions and a set of grades for the most critical performance optimizations.
Lighthouse: this is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, and more.

If you are a developer, there are 3 metrics that you particularly should care about too (if you are in the Chrome DevTools or using WebPageTest.org):

Speed index: your goal should be less than 3 seconds on a 3G network.
Page weight: always try to keep pages as light as possible, less than 1.0MB.
Total requests: they should be less than 80 requests.

You can have the greatest user experience in the world but if your website is not loading fast, then your users are not going to see the message that you are trying to deliver to them. After all, remember that page speed is revenue. You can start by taking some of these actions that will help you improve your mobile speed:

The French organic retailer Greenweez decided to switch to Google Accelerated Mobile Pages (AMP) in January 2017. Since then, mobile page speed increased by 5x and they got an 80% increase in mobile conversion rates.

You can read the full case study here.

Design

A beautiful intuitive design is another competitive advantage if you want to win on the mobile web. In order to provide a smooth user experience your web design needs to be simple and easy to navigate through.

There are 3 important elements to consider when designing a homepage:

A descriptive and clear call-to-action (CTA): it should be clear what action you want your visitors to take when they land on your site.
A clear value proposition: tell your visitors what your company does and what makes it special with a clear value proposition. Think about the reasons why they would choose your product or service over the competition. If your users don’t understand what you do, they are not going to stick around to learn more.
Some visuals of your products or services: make sure that your homepage includes some benefit-oriented visuals, an image or a video that inspire visitors to learn more about your company.

Glyph page is an example of good UX — Glyph is a good example of a nice product page, but also simple and easy to navigate through.

Aside from this, here are some other essential tips that Claire Illmer provided for improving your mobile web design:

Make content clear and pay special attention to headlines. Most people don’t read, they scan. And headlines are one of the first things visitors quickly scan when looking for useful and engaging content. If they don’t find it, they will not take the time to search or read your site.
Make it possible to convert: offer your visitors a simple way to finish their journey on another device via email, call or save functionality.
Remember the rule of noise: the less things you have on your screen the better. Don’t distract users from conversion.
Progress bars: they inform users of how close they are to completing their journey or a set of tasks. Providing feedback is important to a positive user experience.
Allow Guest Checkout: offer a guest checkout option for people who don’t have an account, and don’t have the time or desire to create one. This way you will ensure that every visitor has a chance to make a purchase.
Consider reducing the number of fields if you want to increase form conversions. The fewer the better.

InlineValidation-TwitterExample — Inline Validation: Twitter shows an informative message right when you make an error.

Use autofill in webforms and inline validation. Inline form validation helps users understand if there are any errors immediately, rather than having to submit and then come back to make changes.
Use dropdowns as a last resort. With no available options visible, dropdown menus are a multi-step process than often requires effort and time. Luke Wroblewski wrote a great article about it.

Pro tip: start A/B testing improvements ideas for a better user experience and higher site conversion rate.

Future of the mobile web

Your web experience should not feel any different from experiences that are built on native platforms. But, how do you make your web more like an app?

There are already Google’s advancements that significantly improve the mobile browser experience and bring much of the functionality of native apps. You can start by reducing the sign-up friction with Google One Tap Sign-up and Automatic Sign-in, or helping users checkout faster with Simple Web Payments (check out Pay with Google and Payment Request API).

Users expect frictionless experiences that are fast, integrated with the device they are using, and that work reliably (even under uncertain network conditions). And Progressive Web Apps make all this possible. They deliver mobile web experiences with a native look and feel, offering features like push notifications, adding a site to your home screen, or offline support.

BookMyShow, the largest ticketing firm in India, developed a PWA that takes less than 3 seconds to load and enables checkout within 30 seconds. They saw an 80%+ increase in conversion rates.

Every day, we’re starting to see more companies develop their own PWA to improve their mobile web presence. Uber, Starbucks, Instagram, Trivago, Twitter… and that’s just to name a few. There a lot of case studies that make clear the benefits of implementing this technology in terms of engagement and conversion.

Everything points to Progressive Web App as the next generation of the mobile web. There is no better time to start getting familiar with them.

Final thoughts

If you don’t have one yet, develop a mobile action plan for your site and prioritize speed. It’s an opportunity to be faster than your competitors and provide an incredible first impression. This way, your users will keep coming back to your product or service, and thus to your mobile web.

Once you have fixed your performance, work on your conversion funnel, consider using AMP (Accelerated Mobile Pages) or building on a Progressive Web App. It can change your business in a big way.