How to improve conversion rates with progressive web apps?

Posted by Ruben Oostinga on Dec 11, 2017 3:58:14 PM
Find me on:

Lately, the web platform has gained a lot more features. Leveraging these features improves the user experience, which in turn, promotes conversion. A good web app can replace native apps and enhance the user experience. For example, we can develop a single app that everyone can use without needing to go through an installation procedure.
 
Most web traffic today comes from mobile devices. Compared to desktop, mobile devices have limited processing power and connectivity. If a website isn't built mobile first,” it can have an inferior user experience. But this isn't due to the web platform; it's because there's still a lot to improve in how we build web apps.

Improving user experience inside apps means improving design, performance, and ease of use. Outside apps it means discoverability and onboarding experience. These days, web apps can work offline, be added to your home screen and still perform greatly.  Google currently drives the development and standardization of these new features. Web apps that exploit these new features are called progressive web apps (PWAs). You can find some examples here.
 
Lancôme’s PWA features increased conversions 17%
 
The PWA installation experience differs from native apps. When the browser detects a user interacting with the app, it triggers a dialog that asks to put the web app on the homescreen. It’s a device-native dialog window, triggered by the browser, not the app. This makes it impossible for an app to annoy the user with a dialog.
 
Once installed, the app gets a spot on the home screen- a valuable, visible reminder of your brand. This, along with push notifications, makes PWAs a lot more re-engaging compared to classic websites. Push notifications allow brands to remind users of abandoned baskets or sale periods, but you have to be careful not to annoy your user.
 
Flipkart increased re-engagement by 40% by building a PWA with add-to-home-screen functionality
 
Offline and full screen capabilities are a requisite for add-to-home-screen functionality. On your home screen, a web app looks like any other app, so it must also behave that way. When there is no internet access, it should also behave like any other app. It should show something on the screen instead of a default error message.  The app should also open full screen without a url bar, just like any other app.
 
The payment request API can make a checkout flow much easier. Instead of entering your shipping and payment details manually using your (smartphone) keyboard, you can ask the browser for the information. It shows a native dialog which allows you to pick from known shipping addresses or credit cards. Removing friction from the checkout process has a positive impact on conversion.
 
The downside of replacing native apps with PWAs is that you won’t get prompted to add the app to your home screen on iOS. The user can do this manually, but it is somewhat hidden. You can have your app show the user how to do this. If you want your app to have home screen presence, you could add it to the app store as a hybrid app. However, this has the same negatives as any native app.
 
Installation banner on iPhone by Rahul Gaba
Installation banner on iPhone by Rahul Gaba

Native App Comparison
It’s much cheaper to get new customers on your web app than on your native app. On the web, you can just link to a web app. Web apps are much easier to discover than native apps. Search engines can even deep link to specific pages. Clicking a link is much easier than installing an app, especially if you only intend to use it for a short interaction. It’s a big ask to spend time and phone storage on a native app installation.

The web’s reach is broader than native apps. However, when you look at where users spend their time, it’s obvious that native apps are much more engaging. PWAs bridge the gap to make the mobile web just as engaging as native apps, while retaining the reach of the web.
 
 
comScore Mobile Metrix, U.S., Age 18+, June 2015
comScore Mobile Metrix, U.S., Age 18+, June 2015
 
Building a web app is cheaper than building a website and native apps for iOS and Android, because you’re just building one app instead of  three. There are also more web developers available for hire than native app developers.
 
Historically, websites didn’t have access to features that native apps had, but this is changing rapidly. We have discussed features like offline availability and add-to-home screen already. But the web also has features like Bluetooth, camera, and GPS. For a full overview, check out this web app.
 
Although users spend 86% of their time  in native apps, 96% use the web as primary channel  for commercial tasks. So, a website user experience that can rival native apps makes sense. It's also obviously better if you are not annoying your user with a dialog prompting them to leave the current web experience and go and download a native app.

How to Start
Building a progressive web app does not mean you should rebuild your current website. The first step is making sure that the website looks good on any device. Having a responsive design ensures this. If the website also performs well enough you can think about adding offline capability to qualify for an add-to-homescreen dialog.

If it is too difficult to upgrade your existing website to a PWA, you can rebuild it. A full-featured rebuild will take a long time to finish. You could also choose to build a version of your website with less functionality, or even a web app for one specific feature of your website. These options allow you to get customer feedback quickly.
 
For the Costes website, we decided to do a rebuild with fewer features. Currently it is not a progressive web app since we don’t have offline capability yet. However it already has app-like performance and a responsive design. We can add offline capabilities in the future to ensure it can also be added to the home screen.

Do you want to learn more about what we did to give the Costes webshop a great UX? We’re hosting a meetup at January 25th in Amsterdam, together with the parent company of Costes, The Sting. 

Sign up here!
 
Wrapping Up
Providing a better user experience always pays off. At Costes, we already saw an increase of revenue even though we have not implemented all the PWA features. With the new capabilities of the web platform it is possible to replace native apps while improving the user experience.
 
For more information: Google has more showcases for PWA’s. There is also a website dedicated to collecting statistics for PWA’s. 

 

Topics: Agile Software Development

Xebia Articles

Your primary source of information for digital transformation and acceleration!

Subscribe to Email Updates

Recent Posts