Optimizing Mobile eCommerce — PWA and CRO
Retailers are encountering the “mobile gap”. Even though mobile traffic and time spent on mobile are much higher than on the desktop, the conversion rate on the desktop is still higher.
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. I also took some time to talk with mCommerce experts from leading mobile-first companies like Google, Trivago, Tinder, Allegro, OLA, and Konga.
The Mobile Gap
Retailers observe that mobile traffic and consumer time on mobile are much higher than on the desktop. Among many retail categories, apparel is leading with a growth of 20%. Other fast-growing categories are Food, Tickets, Automotive, Travel, and Health.
In the majority of markets, retail has a 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
A 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 the desktop is 3.9% and on smartphones 1.6%.
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 a 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 favorite 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.
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!
PWA for Conversion Rate Optimization
In the beginning, I have a real game-changer when you think about mobile commerce conversion. Many areas mentioned below 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.
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, the 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.
“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 backing online.
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.
“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.
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).
“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
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.
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
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
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.
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
“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:
- https://optinmonster.com/how-to-create-mobile-optins-that-win-more-business/
- https://optinmonster.com/the-new-google-mobile-friendly-rules-for-popups/
You can use pop-ups to increase conversion, just be sure you know what you doing :)
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 been 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 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
Simplify 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.
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
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.
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.
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
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
Resign from captcha
Captcha is a conversion killer on desktop, so imagine how much worse it is on mobile. Just resign from it. Now.
“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
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 are 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
Sources
- Illustrations by Sviatlana Havaka from VueStorefront Team.
- 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/
- The need for mobile speed. Better user experiences, greater publisher revenue. Doubleclick
- 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.aspx
- 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/
