Even though mobile traffic and time spent on mobile is much higher than on desktop, conversion rates on desktop are still higher. Retailers are encountering the so called “mobile gap”. This article is about filling this gap with conversion rate optimization.

This article is the outcome of the extensive research I’ve done on conversion rate optimization in mCommerce. I started out from asking our Vue Storefront team, which works on the mobile-first eCommerce platform.

In parallel, I was doing some research across data and mobile case-studies. I took some time to talk with mCommerce experts from leading mobile-first companies. The feedback I collected came from UX designers, product owners and frontend developers from leading companies like Google, Trivago, Tinder, Allegro, OLA, and Konga. Feel free to join the discussion and share your thoughts in the comments.

The Mobile Gap

Retailers observe that mobile traffic and consumer time on mobile are much higher than on desktop. Retail apps and websites are one of the fastest growing mobile categories. Among many retail categories, apparel is leading with growth of 20%. Other fast-growing categories are Food, Tickets, Automotive, Travel, and Health.

In the majority of markets, retail has the higher proportional audience reach among mobile users than desktop. Nonetheless, mobile sales numbers are much lower. We see a huge mobile gap.

Of course, part of this phenomenon is due to the different focus of mobile users. They use mobile destinations to augment their off-line shopping experience, not only to buy directly.

State of mobile conversion

Mobile conversion rate is defined as the percentage of online store’ users that convert out of the total number of visitors. According to all available data, mobile conversion is much lower than desktop conversion. The data varies from mobile conversion rates as low as 25% on mobile to 50% on desktop.

According to the latest data from the Monetate Ecommerce Quarterly Report conversion on desktop is 3.9% and on smartphones 1.6%.

Monetate eCommerce Quarterly Report (Q2, 2018)

Conversion rate depends on multiple factors, like attractiveness of the store and offer or ease of the process; this must be optimized to satisfy visitors. I’ll get back to optimization methods in a moment. First, let’s have a look at the reasons for low conversion rates among mobile users.

Reasons for lower conversion rates on mobile

For sure there are some different user-journeys connected to mobile commerce which aren’t so focused on conversion itself. This could be a part of the “problem”, but when we focus on users interested in shopping, we get much more complex reasons.

Before analyzing the reasons, we must consider two additional factors. The first one is that mobile users struggle with lack of attention. Another is the limitation given by the size and connectivity dependency of mobile devices.

Lack of users’ attention

The typical mobile user splits his/her attention across multiple channels and devices at any given time. Most commonly, mobile devices are used while watching a favourite TV show or commuting to a different location.

What’s interesting is that many users are addicted to a constant stream of information but at the same time they lose their focus. The more information, the poorer the attention span.

Illustrations by Sviatlana Havaka

Restrictions of mobile devices

Mobile devices, like any other device, have some limitations. Starting from external factors like the low quality of mobile connectivity or dependency on power sources, to internal ones like a small screen size, limited storage or limited functionalities that in the end cause slow inefficient performance of mobile webpages or apps and restrain users from closing the shopping process.

This same user often browses on mobile and decides about a product purchase, but waits for the desktop to finalize the purchase after he re-assures himself about the product details and safety of the buying process.

Direct reasons for low conversion rate

The above gives us indirect reasons for low conversion rates. When we ask users, we see typical direct reasons why they aren’t buying on mobile.

Direct reasons for not converting

    • Security concerns – 20.2%
    • Cannot see product details – 19.6%
    • Navigating is difficult – 19.3%
    • Can’t browse multiple screens/compare – 19.6%
    • Too difficult to input details – 18.6%

As you can see, 4 out of 5 reasons are connected with User Experience. In the following part, I present conversion rate optimization methods that focus strongly on improving UX.

Disclaimer – conversion rate (CR) is not the one and only metric you should focus on. Especially when your business is growing fast. Use CR as one of the many KPIs you need to track.

Ok. Now let’s focus on optimizing and increasing mobile conversion rate!

 

Discover the best loyalty programs in FREE Benchmark Study

20+ areas to improve for higher mobile-commerce conversion rates

Conversion rate optimization in mCommerce should be a systematic process that leads more and more users towards the desired action, like filling in a form or buying. Each mCommerce business is different so the whole process should be preceded by analysis of user behaviors and needs, and when we think of mobile users we should take an entirely mobile-first approach.

The 25 areas to work on for higher mobile-commerce conversion rates tackle issues from providing a consistent UX across different devices, adjusting to mobile restrictions, to gaining users’ trust.

There are some areas, like simplifying the checkout or forms, that, when improved, bring an instant increase in conversions. Some others need to be designed as a series of long-term experiments. I describe all of them below and complement them with opinions from the experts of leading worldwide eCommerce.

At the end, you’ll find an extra tip to fix several areas at once.

1. Provide consistent user experience

“Consistency increases trust. Trust increases momentum. Momentum increases goal completion. If you’re going to be anything. Be consistent.“Jamie Hands, Nu-Hi – eCommerce Growth Specialists

In eCommerce, it is all about trust. We build online stores to astonish the user on the first visit and, most importantly, to build his attachment so we are sure he will come back and shop again.

During his buyer’s journey, a user moves from one channel to another. Mobile experience is just a part of the bigger picture including in-store visits, offline and online advertising, as well as touchpoints on desktop or tablets. If the experience is not consistent, the user needs to learn a new interface every time he changes the channel, and each time we need to build his trust anew.

“Users might be browsing and adding items to cart on a different device but completing the purchase on a different one. In such cases, it is important that the users can figure out the required pieces and find a correlation among designs across devices for a better recall value.” Sankalp Agrawal, Product Designer at Design Capital, Former Product Designer at Ola

For a seamless experience, it simply must be consistent. In this case we must think not only about moving from one touchpoint to another, but also within the platform. An example of technology that eases this process is progressive web apps (of which we are great fans) as they allow us to build the app once and then use it for every channel (as a mobile, and desktop website, as well a mobile app).

“The main issue for mobile eCommerce websites I still see a lot is a lack of clarity and simplicity in UX. Cluttered websites make users leave since the shopping experience seems to be too cognitively demanding. Too many elements, distractions, and poor checkout flow are the main conversion killers. “ Damian Rams, Digital Analyst & Conversion Optimization Manager

“Don’t make your visitor think. Great UX has removed the requirement for the visitor to think. Consistency in design reduces the need for your visitor to think.

Consistency is key in UX. When things all behave the same way, the user doesn’t have to think about what will happen. They just do.” – Jamie Hands, Nu-Hi – eCommerce Growth Specialists

A consistent user experience is also important when you think about user acquisition as it starts long before entering the online store. Many users begin their mobile buyer’s journey in social media channels, like Instagram or WeChat, and moves to online store in the second step. Social media provides an excellent UX for mobile users, so we must be sure to create a UX at least as good as theirs. Anything less than this will probably be disappointing for users and, sadly, we still see mobile-first social media campaigns sending people to poorly optimized websites.

2. Responsive Web Design

I hope this is rather obvious. Today, responsive web design is a must that adjusts eCommerce stores to different screen sizes :)

With ever increasing sizes and dimensions of digital interfaces, it is important that the design of your digital product scales and fits to the users’ devices. For example, responsive design and a consistent user experience gets even more important for an eCommerce product.” – Sankalp Agrawal, Product Designer at Design Capital, Former Product Designer at Ola

3. Improve TTI and overall speed

Time to Interact (TTI) is a key indicator of mobile site speed and a good user experience. TTI measures the time until a user can interact with a page, even if the whole page has not loaded yet. At the same time, overall page speed is equally important.

53% of users leave if a mobile site takes more than 3 seconds to load!

Radware tested load times of the Internet Retailer Top 500 and found a strong correlation between pages with lower TTI and overall page performance. In this research, the median TTI for the top 500 retailers was 4.9 seconds. This is really slow.

Another study by Akamai found that 25% of users will abandon a website if TTI is longer than 4s.

Making a website load fast is the easiest CRO advice you can implement. To implement this, you should think about the PWA Standard we describe at the end of this article.

Everything below a 100ms feels like reacting instantly, 1 Second – the user is kept within the flow of the mobile web/app but loses the sense of control, 10 Seconds – represents the absolute limit. Don’t test your website on your super-fast wifi connection, most people are still using 3G on not-so-fast phones.” Konrad Synoradzki, UX Team Leader at Allegro

Optimizing Time To Interact

The best practice here is to optimize pages to load the most important, interactive content first, and the less important content later.

Typical strategies to optimize TTI include:

  • Load what’s visible (above the fold) first
  • Load interactive elements ASAP
  • Third party scripts like social sharing should have low priority
  • Use a Content Delivery Network
  • Compress text and images
  • Monitor your backend speed with Time to first Byte KPI

“If you optimize Time To Interact, think about combining changes into bigger packages (only if you have a website with very engaged users). Why? From the psychology point-of-view, there is the Weber-Fechner Law which you can simplify into a 20% rule. That is, in order for users to barely see a difference in time duration, it has to be changed by a minimum of 20%.” – Konrad Synoradzki, UX Team Leader at Allegro

Optimizing overall speed

You should not only think about the first load, but also about the whole experience. The challenge is that apart from your selling platform, you must also take into consideration external obstacles like high traffic, slow internet connections or breaks in connectivity when the user travels.

This is where Progressive Web Apps can help again. PWAs can work super fast, even with a slow or non-existent internet connection. The whole app is running in the user’s browser so there is no waiting time. When the app is downloaded it works instantly.

Using PWA mechanisms like Service-Workers and cache logic, you can create a seamless experience – even if the connectivity is very bad or/and there is a traffic peak and servers are down. The app is still working in the browser and will send and receive data when back online.

 

Microservices Architecture for eCommerce. Get free ebook>

4. Prioritize content for thumb reach

The touchscreen isn’t a natural interface for us, humans, and it’s not so accurate. With very different phone sizes it’s harder and harder to design an ergonomic UI.

The Steven Hoober study from 2013, How Do Users Really Hold Mobile Devices, shows that users usually hold the phone one-handed (49%). This means the span of possible gestures is very narrow.

Reach of the thumb (in natural and stretched position) on different mobile screens by S. Swiatkiewicz.

 

“Mobile screens are small, and the context of use is often “browsing/shopping on the go”. The amount of time and effort needed to complete a purchase is crucial here. In order to reduce it, the companies must ruthlessly prioritize and display the essential stuff only. Mobile checkouts have to be as easy and seamless as possible.” Damian Rams, Digital Analyst & Conversion Optimization Manager

To be safe, I would advise:

  • position top priority elements in the center (products)
  • position navigation at the bottom
  • the top menu is good additional navigation but only for tier 3 priorities
  • the right part of the screen is much better for the top menu

Please notice that Secondary and Tertiary functions (icons) are on the top right, according to the ergonomics we just discussed.

You also need to be sure that the most important elements are in the center because tapping at the center is much more accurate.

“People are better at tapping at the center of the screen, so touch targets there can be smaller—as small as 7 millimeters, while corner target sizes must be about 12 millimeters.” – Steven Hoober

5. Simplify content on the homescreen

According to the previous section, a homepage is a great place for a navigation. Especially the center of the screen. This is why the typical hero slider doesn’t work very well on mobile.

We see that top mobile eCommerce sites are resigning from this component.

According to an Inflow report (https://www.goinflow.com/best-in-class-ecommerce-cro/) now, only 2 leading mobile eCommerce sites use hero sliders, down from 7 last year.

Don’t worry about being “above the fold”.

People can read content best at the center of the screen and often scroll content to bring the part they’re reading to the middle of the screen if they can.” – Steven Hoober

6. Take full advantage of phone features

Mobile phones have some serious restrictions but at the same time have some great features that enrich the user experience. Camera and GPS (we’ll talk about them in a sec) are just two of them. You should open your mind and check how are we able to help our clients to find a product using all the tools we have in the smartphone.

Perhaps you can take advantage of how your customers use mobile devices (on the go), or support the service with tools available on mobile (camera, measure, location).

 


Vivino app cater convenient vine scanner

“In case of any doubts about the implemented solutions, test them! A/B test results are not only the foundation for making design decisions but they are also very helpful in business activities.” – Jan Binczyk, UX Manager at G2A.COM

7. Optimize product pages and listings for mobile

We got used to how products are exposed on the desktop. The multiple column view or a long product description fail when used on mobile. That’s why we must reorganize it and simplify it, just as we did with the homescreen. Always present the essence of your offer.

The safest and the most common idea for mobile product listing is a single column view. This is the simplest solution, however we are observing new user behavior models and I would recommend experimenting with this element. There is no universal solution as product listing can be extremely customized to a specific industry. Often, one column makes browsing quite slow which demotivates clients when browsing.

Bottom cart concept (Divante Dribbble)

Perhaps we could go with a two-column listing, or a swiping model. There are also some other approaches to consider.

Regardless, the solution we choose should provide the user with only the most important product information, ease comparison and focus on the best-selling product segment in our mobile channel.

When optimizing conversion to mobile, it is essential to pay attention to the best-selling product segments in this channel. A focus on the right selection from the assortment matched to the mobile context may also significantly increase sales for mobile – even the best technical solutions and an outstanding UX may not be enough if the products are not adapted to mobile.” – Jan Binczyk, UX Manager at G2A.COM

8. Provide search tool

As browsing through product list might be difficult for some users, you can support them with other tools. Search is extremely important here.

“In our experience, shoppers are 3 times more likely to convert with search. On site search is an important avenue for the retailer to understand the intent and the demand of the shopper. We recently analysed $1.4B of total business from 869 online stores over 7 months and recorded 27% ($360M) of revenue directly attributed to on site search.” – Amy Marks, Marketing Manager at Klevu

You can use one of the many SaaS solutions to dramatically increase the quality of your mobile experience. Use them to make search as easy as possible and assist users. Using auto-complete, personalization and covering misspellings, you can dramatically improve the whole experience for the user.

I think this is also a good time to start experimenting with voice-search, and virtual assistants, as they are more and more accurate.

Combining search with a recommendation engine will compound the benefits of both options, shorten navigation and boost conversion.

 

Get 5 powerful eCommerce reports with just one click >

9. Visual Search

Another idea for making search (or navigation) seamless is to introduce visual search. You can take a picture of the barcode, QR code or the products themselves and then find the same, or similar, products in the catalog. With some startups offering AI as an API, this is now easier than you think.

Taking a picture to search for a desired product. (source)

10. Use product videos

Video on mobile is really popular. This is why I suggest experimenting with mobile video, if possible. For mobile users, it’s much more natural to watch a 30s video than click 10 times to see the product from every angle in multiple photos.

During the video presentation, you can show the most important part of the products, zoom in on details and add emotional and audio layers. This will be more convenient and more persuasive.

Just remember that while video on the desktop works best using a horizontal view, on mobile vertical video is best.

11. Localize your content

Mobile is… mobile. Use data from GPS to make content more local. You can find stores close to the user, you can offer a discount for some specific localizations, you can mix and change the offer and priorities of the content according to the user location.

If the app is aware that user is using the app in the store, the app can become a personal POS/kiosk. For example, the user can check the stock levels of this specific store, ask store staff for help (eg. ask for this specific product in his/her size), etc.

Localization of content can be a huge enabler for reach of the product. For example, India is a multilingual country with 89% population using languages other than English. If we go slightly off-track and talk about physical businesses and products, McDonald’s has done it by way of localising there Big Mac to the Indian market as Maharaja Mac. And, it’s been pretty successful.” Sankalp Agrawal, Product Designer at Design Capital, Former Product Designer at Ola

12. Be responsive to your user

It’s very important to show the user what is happening now. After every user action, we should present what has changed. For example, when the user is clicking “add to cart” we can show the product picture flying to the cart. This is important because users have a bad experience when browsing on mobile due to slow internet connections and slow interaction. Building a JavaScript Web App, you can animate every interaction and make the user sure things are happening as he wanted.

Tactile response also builds trust – the user needs to be sure he will receive an order with accuracy.

You should think how you would confirm user actions on every interaction. Eg. during filling in a form you can confirm that the data in every field is correct (inline validation). It’s not only about showing errors, but also about building confidence that everything is going well.

13. Reply to questions with bots & chats

When your the user has a question or is in doubt, it is important to answer in his preferred way.

While using a mobile is much more natural to chat with the seller than on desktop, billions of users use WeChat and WhatsApp every month. You can treat Bots and Chat as the first line of support but also as a backup channel for your navigation.

Built-in configurator helps customers pick the right product directly in the chat

What’s more, by analyzing chats you can learn a lot about your users’ needs and your website’s vulnerabilities.

14. Be persuasive

On mobile, you fight for the attention of the user. Use gamification, social proof and urgency as a tool.

Example of gaminication model in limited time span (source)

15. Control your mobile pop-ups

Pop-ups can be a great marketing tool, but if designed badly, can ruin the experience on mobile completely. The problem was so huge that Google introduced a pop-up penalty for mobile sites. This decreases your mobile site position if you use pop-ups in the wrong way.

“Decreasing the number of clickable elements is recommended. Nothing confuses the user more than a weird pop-up coming out of nowhere (triggered by a gentle, unintended tap on the screen).” Damian Rams, Digital Analyst & Conversion Optimization Manager

Example of a floating bar pop-up, aligned with Google’ mobile friendly rules (source).

In my opinion, mobile pop-ups are a strict no-no. They are abrupt, attention-seeking and confusing at the same time. As designers, our job is to help serve the users’ goal to the best. And, I believe, that must be done without taking the users’ focus away onto something else altogether.” – Sankalp Agrawal, Product Designer at Design Capital, Former Product Designer at Ola

Nonetheless, well-designed pop-ups can re-engage your users and drive more conversions. There are some good articles about mobile-friendly pop-ups at OptinMonster Blog:

You can use pop-ups to increase conversion, just be sure you know what you doing :)

 

TOP 30 PWAs - Download FREE Benchmarking Study

16. Re-engage users with push notifications

Push notifications can be very valuable if done non-intrusively. It’s getting harder to get user permission for sending Push notification so you need to offer something valuable.

I would offer push notifications (with an explanation) when

  • Information is time sensitive – eg. a promotion for something from a user’s wish list
  • Location sensitive – eg. a special event in the store next to you

Convincing users to subscribe to push notifs has always be hard. You must gain the user’s trust. With soft-opt in you have much more control over the whole process and you can easily tell the user why it’s beneficial for him to opt-in.

“Show an opt-in banner to the user right after he/she enters the website. In contrast a to hard opt-in, instead of just showing a pop-up without any useful information, we can provide details to the user. ‘Hey, do you want to receive discount coupons from time to time?’ is much more descriptive than the default ‘Show notifications’.

Show an opt-in banner as a response to an action performed by the user. For example, you can display it in your eCommerce store after a purchase to notify the user with order status updates. Another example: In Vue Storefront, we have the possibility to place orders while the user is offline. Once he/she comes back online a notification asking for order confirmation arrives.” – Filip Rakowski, Vue Storefront Core Contributor

17. Simplify the all forms

Filling forms on the mobile device is hard because of the slow input mechanism and small screen. It often cuts the number of conversions, but well-designed forms will convert and even bring a chance for cross-selling.

Less is more

The golden rule would be to minimize the form itself as much as possible. These numbers from HubSpot research show how conversion decreases according to the number of fields in the form. These data are from the desktop. There is probably a much steeper decrease on mobile.

As you can see some forms elements, like select boxes, are even worse.

Some more research indicates that mobile users hate drop-downs – don’t use them at all. You can try to use Stepper controls when appropriate.

“If you have less than 5 options, it’s best to use stepper controls. If you have a dropdown with many positions, such as a country picker, try using text input with autosuggestions.” – Stanley Swiatkiewicz, Product Designer at Vue Storefront

Mobile form checklist

Norman Nielsen have been researching form design for many years. They produced a quite clean Checklist for designing a mobile form.

The top things to consider when you design a form for a mobile device are:

  • Is this field absolutely necessary?
  • Description – is the label above it? (not inside or below)?
  • Is the field big enough so that most possible field values are visible?
  • Is the field visible in both orientations when the keyboard is displayed?
  • Do you have any good defaults for this field?
  • Can you use the phone features (camera, GPS, voice, contacts ) to populate it?
  • Can you compute it for the user based on other info (e.g.: state based on the zip code, coupon field)?
  • What is the right keyboard for this field?
  • Can you make suggestions/autocomplete based on the first letters typed?
  • Do you allow users to enter it in whatever format they like? (e.g.: phone numbers credit cards)

Remember: you should use autofill and autocomplete whenever possible.

“How to bake a perfect mobile form: (1) make it as short as possible (2) leverage floating labels, autofill, and tab index (3) make fields big enough so it is easy to tap them – 42 px is just the right height (4) specify input type to show the correct keyboard (5) get the validation right. Finish it off with a beautiful, screen-wide call to action in contrasting color.” Pawel Ogonowski, The eCommerce Optimization Guy at Growcode

More information about designing forms you can find in an infographic by Monk.

18. Ease the mobile checkout

One of the main reasons why customers abandon carts is due to inconvenient checkout processes. Baymard Institute found that 28% of people abandon carts if the checkout is long and complicated.

Follow the red-lights-rule, it means that every action on mobile could be finished on one traffic lights change. Try to simplify checkout by preselecting the most common choices, decrease the number of fields, remove unnecessary steps, focus on mobile-friendly payment methods.” Konrad Synoradzki, UX Team Leader at Allegro

The best mobile checkout is clear, minimalistic and seamless. Try to simplify the checkout process.

Some good tips to build a good mobile checkout:

  • Keep the checkout as short as possible
  • Ask only about what is necessary
  • Use inline validation
  • Make sure the total cost is visible all the time
  • Provide trust-building certificates and popular payment systems
  • Use cart saving software

“Create an easy-breezy checkout if you want to have a high mobile conversion rate: slash steps to three, get rid of up-sells and cross-sells, simplify the header and the footer, make screen-wide buttons easily accessible from both right and left edge of the screen!” – Pawel Ogonowski, The eCommerce Optimization Guy at Growcode

Sometimes Single Page Checkout it’s not the only best choice. We see some effective checkouts that are separated into many pages. You can check some good checkout ideas at Inflow blog.

Baymard Institute suggested that 37% of people ditch their carts if the site mandates creating an account. So offering a guest checkout could also be a good idea.

Save the checkout for later

The client can use mobile to browse the catalog but he is afraid of buying on mobile. Or maybe the client is commuting and just arrived home before he finalized the buying process? In cases like these, it would be great to save the product and then continue in a different channel.

Think about mechanisms that will help fight with cart abandonment and will help the user to keep the cart as long as possible. You can offer one account and just show the user that he can log in and save the product for later. You can also offer the functionality to send the product or event, or the checkout link to email. Then the user can click the link form the email and continue the process from the most convenient and secure location.

19. Add innovative payment methods

Payments are one of the biggest issues for a 47% mobile gap. To fill it in users must be provided with payment methods that are simple, safe and secure. Apart from that, the whole process must be quick and painless. Business must reorient to match users’ expectations with innovative payment solutions.

“We expect more than 3 billion online eCommerce transactions to happen this year so these are many opportunities we have to really wow the customer and remove any friction.” – Conor McGann, Mobile UX Specialist (GMS). Google

We see the rising popularity of mobile-wallets, which is great news. Thanks to mobile-wallets we don’t need to ask for credit card details (which generates an 80% abandonment rate!). This is a no-brainer. Using wallets like PayPal, Apple Pay, Samsung Pay, etc. will help clients finalize the order.

Customers are 10% more likely to complete a purchase if a digital wallet payment option such as Apple Pay, Android Pay, or PayPal is available.

Another promising solution is face recognition.

Face ID Authentication released with the latest iPhone releases (XS, XS Max & XR).

Payments also create one of the very last opportunities to leave the user with a positive impression on mobile. We should focus here on building a positive impression that will attract the user for further shopping.

“If we’re focused on the consumer and interested in creating great mobile web experiences so that it will delight users to return, I’d argue this a very strong area of focus.” – Conor McGann, Mobile UX Specialist (GMS). Google

20. Use Payment Request API

The Payment Request API is a new standard that is designed by W3C Web Payments Working Group to replace current checkout processes with a seamless and standardized browser-based payment method.

The API eliminates manual and tedious entry by storing the user’s information securely in the browser. The browser passes addresses and credit card (or other payment) details directly to the website. And, because the browser is collecting payment information from the user, making a payment goes from ” n ” taps to one tap.

Google found that forms and payments are completed 25% more when autofill is available, The Payment Request API extends this idea and will help us collect payments.

You can check examples of Google Payment Request API at the Developers Google Website https://developers.google.com/web/ilt/pwa/introduction-to-the-payment-request-api

21. Resign from captcha

Captcha is a conversion killer on desktop, so imagine how much worse it is on mobile. Just resign from it. Now.

Captcha often fails on mobile, even with audio support (source).

While security of a system is of great concern without a doubt, it is important to understand and figure out ways to try and avoid captcha since it’s an additional step to a genuine user. For example, there could be an algorithm which shows the captcha to only those users who it deems to be tricking into the system.” – Sankalp Agrawal, Product Designer at Design Capital, Former Product Designer at Ola

PWA for Conversion Rate Optimization

In the end, I have a real game-changer when you think about mobile commerce conversion. Many areas mentioned above can be optimized with Progressive Web Apps (PWA).

PWA Is a standard from Google, supported by Apple and Microsoft. It allows you to build one web-app and use it on the desktop and mobile browsers, but also install it as a native app. PWA is the biggest invention in mobile-development since RWD.

Thanks to Service Workers, the PWA standard allows websites to run much faster; thanks to mobile-native features, the user-experience is much smoother on mobile.

PWAs must be built mobile first. This means the developer should build to take advantage of the features offered by modern mobile browsers including Service Workers (for dynamic Caching and other great features), the Ability to Add to Home Screen, Push Notifications and more.

The developer must also cater to the fact that mobile devices do not typically offer processing speeds at the same level as Computers, and are limited with regards to Network connectivity. Hence a PWA should be built to work considerably well even in poor network conditions.

The Nigerian market is a very good use case. Network connectivity is relatively poor and more customers are embracing the use of smartphones. Hence it was a prime opportunity to leverage the strength of PWAs to get an improved mobile conversion.” – Excellence Ilesanmi, Software Engineer at Konga Online Shopping Ltd

Konga.com is a leading eCommerce in Nigeria and its largest source of traffic and user growth is provided by mobile devices. PWA decreased by 84% amount of data needed to complete first transactions vs previous mobile web experience.

“Trivago released its PWA in Spring 2017 and experienced a 97% increase in conversions, which was both attributed to: (1) Streamlining navigation to mobile sites: PWAs can be added to users’ home screens and can thereby be accessed in a few taps. As a result, trivago recorded an increase of of 150% in return visits for users who had added the app to their home screen. (2) More cohesive user experiences: Service works enable PWAs to cache data for offline consumption and thereby sustain the momentum of an online, immersive retail experience. As a result, trivago observed that 67% of users whose sessions were interrupted by a period offline and regained their connection continued browsing the site.” – Laura Oades, Digital Product Designer, Eskimo Media and Technology, formerly Product Design at trivago

From all the case studies presented in TOP 30 PWAs report, we’ve seen that for PWAs, the average conversion rate increase for mobile users was 36%. This means for a retailer doing 5M from mobile annually, the revenue from a PWA will bring additional 1.8M annually.

If this PWA concept is new to you, you should definitely learn more about it.

Is it really all about CRO?

I already wrote this at the beginning, but it bears repeating:. Conversion rate is not the one and only KPI that matters. I would even say that there are things that are more important than any KPI here.

As I see it, it’s not much about how people perceive the experience a product provides as it’s about what people imagine they will gain using it. It’s about human emotion and the image of better yourself. I believe people don’t see a pretty UI or even delightful UX, they see the version of better themselves. The product has to provide possibility and the brighter future however far.” – Yaroslav Zubko, Product Design at Tinder

Tinder.com is a location-based social search mobile app that allows users to swipe left or right and to chat if both parties swiped to the right. The app is used as a dating app or hookup app, depending on the user’s individual preference.

Tinder noticed users purchase significantly more on their PWA compared with their native app.

Rethink your mobile-commerce strategy

Conversion rate optimization leads to a revenue increase on mobile but there’s something more to it. Optimization of your mobile-commerce also strongly impacts sales in your physical stores.

This screen from Google confirms the decrease of offline store traffic and on the other hand increase of total turnover.“ – Jan Guenther, Design AG

 

We see that customers visiting physical stores often make their decision online. The impact of advertising, social media and reviews is immense.

Today we can assume that the mobile experience shapes customer decision on mobile, desktop and in-store, and drives revenue in all possible touchpoints. To increase conversion, we’ll have to create content that entertains and helps users to discover our products, especially in the days of short user attention spans. We’ll have to develop more and more ways to adjust to the user and let him convert where he wants to convert.

 

Learn more about:

The mobile-first approach in eCommerce

Vue Storefront – the PWA storefront for eCommerce

 

Illustrations:
Sviatlana Havaka

Sources:
Monetate Ecommerce Quarterly Report, Q2 2018
https://www.smartinsights.com/goal-setting-evaluation/goals-kpis/why-conversion-rate-is-a-horrible-metric-to-focus-on/
comScore MMX Multi-Platform and e-Commerce & m-Commerce Measurement , Q3 2016
Global Digital Future in Focus, 2018 International Edition, comScore
https://www.wordstream.com/blog/ws/2018/08/13/google-ads-mobile-benchmarks
https://www.smartinsights.com/ecommerce/ecommerce-analytics/ecommerce-conversion-rates/
https://optinmonster.com/how-to-increase-your-mobile-conversion-rate/
https://www.getelastic.com/ttfb-and-tti-2-kpis-more-important-than-page-load-speed
https://optinmonster.com/how-white-river-increased-mobile-conversions-150-percent/
https://authenticstyle.co.uk/improve-ecommerce-conversion-rate-mobile/
https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php
https://huemor.rocks/ecommerce/how-to-improve-mobile-e-commerce-conversions/
https://www.invespcro.com/blog/increase-mobile-conversion-rate/
https://medium.com/swlh/6-super-effective-ways-to-optimize-your-mobile-conversion-rates-d3c74da6cad3
https://monk.webengage.com/tips-to-increase-mobile-app-conversion-rate/
https://monk.webengage.com/wp-content/uploads/2016/03/how-to-optimize-contact-forms-for-conversion.png
https://blog.hubspot.com/blog/tabid/6307/bid/6746/Which-Types-of-Form-Fields-Lower-Landing-Page-Conversions
https://shanebarker.com/blog/ecommerce-conversion-rate-optimization-expert-roundup/
http://blog.payvision.com/3-challenges-facing-mobile-payments-conversion/
https://www.goinflow.com/best-in-class-ecommerce-cro