Tuesday, January 3, 2023

How Progressive Web Apps can drive business success

 Progressive Web Apps are on a lot of companies' roadmap to modernize their websites and adapt to users' new expectations. As with many technologies, PWAs raise questions: is it what my customers want, how much will it grow my business, what is technically feasible?

Identify your stakeholders.
Identify your stakeholders.

To shape your digital strategy, several stakeholders are often involved: the product manager and chief marketing officer are co-owners of the business impact of each feature, the chief technology officer assesses the feasibility and reliability of a technology, the user experience researchers validate that a feature answers a real customer issue.

This article aims to help you answer those three questions and shape your PWA project. You will start from your customer needs, translate this into PWA features, and focus on measuring the business impact of each.

PWAs solve customer needs ##

One rule we love to follow at Google when making products is "focus on the user and all else will follow". Think user-first: what are my customers' needs, and how does a PWA provide them?

Identify customer needs.
Identify customer needs.

When doing user research, we find some interesting patterns:

According to those observations, we found out that customers prefer experiences that are fast, installable, reliable, and engaging (F.I.R.E.).

PWAs leverage modern web capabilities #

PWAs provide a set of best practices and modern web APIs that are aimed at meeting your customers' needs by making your site fast, installable, reliable, and engaging.

For example, using a service worker to cache your resources and doing predictive prefetching makes your site faster, and more reliable. Making your site Installable provides an easy way for your customers to access it directly from their home screen or app launcher. And APIs such as Web Push Notifications make it easier to re-engage your users with personalized content to generate loyalty.

Improving the user experience with web capabilities.
Improving the user experience with web capabilities.

Understand the business impact #

The business success definition can be many things depending on your activity:

  • Users spending more time on your service
  • Reduced bounce rates for your leads
  • Improved conversion rates
  • More returning visitors

Most PWA projects result in a higher mobile conversion rate. You can learn more from the numerous PWA case studies. Depending on your objectives, you may want to prioritize the aspects of PWAs that make more sense for your business, and it's completely OK. PWA features can be cherry-picked and launched separately.

Let's measure the business impact of each of these great F.I.R.E features.

The business impact of a fast website ##

A recent study from Deloitte Digital shows that page speed has a significant impact on business metrics.

There's much you can do to optimize the speed of your site to improve critical user journeys for all of your users. If you don't know where to start, take a look at our Fast section, and use Lighthouse to prioritize the most important things to fix.

When working on your speed optimizations, start measuring your site speed frequently with appropriate tools and metrics to monitor your progress. For example, measure your metrics with Lighthouse, fix clear targets like having "Good" Core Web Vitals scores, and incorporate a performance budget into your build process. Thanks to your daily measurements and the "value of speed" methodology, you can isolate the impact of your incremental speed changes and calculate how much extra revenue your work has generated.

Measure the value of speed and correlate it with conversions.
Measure the value of speed and correlate it with conversions.

Ebay made speed a company objective for 2019. They used techniques such as performance budget, critical path optimization, and predictive prefetching. They concluded that for every 100 millisecond improvement in search page loading time, add-to-card count increased by 0.5%.

A 100ms improvement in load time resulted in a 0.5% increase in add to cart count for eBay.
A 100ms improvement in load time resulted in a 0.5% increase in add to cart count for eBay.

The business impact of an installable website #

Why would you want a user to install your PWA? To make it easier to come back to your site. Where an Android app installation would add at least three steps (redirection to Play Store, downloading the app, launching the app), PWA installation is done seamlessly in one click without taking the user away from the current conversion funnel.

The install experience should be seamless.
The install experience should be seamless.

Once an app is installed, users can launch it in one click using the icon on their home screen, see it in their app tray when they are switching between apps, or find it via an app search result. We call this dynamic Discover-Launch-Switch, and making your PWA installable is the key to unlocking access.

In addition to being accessible from familiar discovery and launch surfaces on their device, a PWA launches exactly like a platform-specific app: in a standalone experience, separate from the browser. Additionally, it benefits from OS-level device services such as the app switcher and settings.

Users who install your PWA are likely your most engaged users, with better engagement metrics than casual visitors, including more repeat visits, longer time on site and higher conversion rates, often at parity with platform-specific app users on mobile devices.

To make your PWA installable, it needs to meet the base criteria. Once it meets those criteria, you can promote the installation within your user experience on desktop and mobile, including iOS.

PWAs are installable everywhere.
PWAs are installable everywhere.

Once you've begun promoting the installation of your PWA, you should measure how many users are installing your PWA, and how they use your PWA.

To maximize the number of users installing your site, you may want to test different promotion messages ("install in one second", or "add our shortcut to follow your order" for example), different placements (header banner, in-feed), and try proposing it at different steps of the installation funnel (on the second page visited, or after a booking).

To understand where your users are leaving and how to improve retention, the installation funnel can be measured in four ways:

  • Number of users eligible to install
  • Number of users who clicked on the install prompt
  • Number of users who both accepted and declined the install prompt
  • Number of users who successfully installed

You can promote your PWA installation to all your users or take a more cautious approach by experimenting with a small group of users.

A few days or weeks should give you enough data to measure the impact on your business. What is the behavior of people coming from the installed shortcut? Do they engage more, do they convert more?

To segment users who installed your PWA, track the appinstalled event, and use JavaScript to check if users are in standalone mode, which indicates use of the installed PWA. Then use these as variables or dimensions for your analytics tracking.

Measure the value of installation.
Measure the value of installation.

The case study of Weekendesk is interesting; to increase the chance a user would install their PWA, they promote installation on the second page visited. Users who launched the PWA from their home screen were more than twice as likely to book a stay through their PWA!

Installed users had a 2.5 times higher conversion rate.
Installed users had a 2.5 times higher conversion rate.

Installation is a great way to encourage people return to your site and improve your customer loyalty. You can also think of personalizing the experience for premium users.

Even if you have a platform-specific app, users may feel they don't want to, or don't need to install it. These semi-engaged users may feel a PWA is right for them as it is often perceived as lighter, and can be installed with less friction.

PWAs can reach semi-engaged users.
PWAs can reach semi-engaged users.

The business impact of a reliable website #

The Chrome Dino game, offered when a user is offline, is played more than 270 million times a month. This impressive number shows that network reliability is a considerable opportunity for PWA use, especially in markets with unreliable networks or expensive mobile data such as India, Brazil, Mexico, or Indonesia.

When an app installed from an app store is launched, users expect it to open regardless of whether they're connected to the internet. Progressive Web Apps should be no different.

At a minimum, a simple offline page that tells the user the app isn't available without a network connection should be served. Then, consider taking the experience a step further by providing functionality that makes sense while offline. For example, you could provide access to tickets or boarding passes, offline wish lists, call center contact information, articles or recipes that the user has recently viewed, etc.

Be helpful, even when offline.
Be helpful, even when offline.

Once you've implemented a reliable user experience, you may want to measure it; how many users are going offline, in which geographies, and do they stay on the website when the network is back? Analytics can tell you when users go generally go offline and online. This tells you how many users continue browsing on your website after the network comes back.

Trivago saw a 67% increase in users who came back online and continue browsing.
Trivago saw a 67% increase in users who came back online continue browsing.

The Trivago case study illustrates how this can impact your business objectives. For users whose sessions were interrupted by an offline period (around three percent of users), 67% of those who come back online continued browsing the site.

The business impact of an engaging website #

Web push notifications allow users to opt-in to timely updates from sites they need or care about and allow you to effectively re-engage them with customized, relevant content.

Be careful, though. Asking users to sign up for web notifications when they first arrive and without exposing the benefits can be perceived as spammy and negatively affect your experience. Make sure to follow best practices when prompting for notifications and inspire acceptance through relevant usages like train delays, price tracking, out of stock products, etc.

Technically, push notifications on the web run in the background thanks to a service worker and are often sent by a system built for managing campaigns (e.g. Firebase). This feature brings great business value for mobile (Android) and desktop users. It increases repeated visits and consequently sales and conversions.

To measure the effectiveness of your push campaigns, you need to measure the whole funnel including:

  • Number of users eligible for push notifications
  • Number of users who click a custom notification UI prompt
  • Number of users who grant push notification permission
  • Number of users who receive push notifications
  • Number of users who engage with notifications
  • Conversion and engagement of users coming from a notification
Measure the value of web push notifications.
Measure the value of web push notifications.

There are a lot of great case studies on web push notifications, such as the one with Carrefour who multiplied their conversion rate by 4.5 by re-engaging users with abandoned carts.

The P in PWA: a progressive launch, feature by feature #

PWAs are modern websites that combine the massive reach of the web, combined with all the user-friendly features that users expect in Android, iOS, or desktop apps. They use a set of best practices and modern web APIs that can be implemented independently depending on your business specificities and priorities.

Progressively launch your PWA.
Progressively launch your PWA.

To accelerate the modernization of your website and make it a real PWA, we encourage you to be agile: launch feature by feature. First, research with your users what features would bring them the most value, then deliver them with your designers and developers, and finally do not forget to measure precisely how much extra money your PWA generated.


Top Brands

Sunday, January 1, 2023

What are Progressive Web Apps?

 The web is an incredible platform. Its mix of ubiquity across devices and operating systems, its user-centered security model, and the fact that neither its specification nor its implementation are controlled by a single company makes the web a unique platform to develop software on. Combined with its inherent likability, it's possible to search it and share what you've found with anyone, anywhere. Whenever you go to a website, it's up-to-date, and your experience with that site can be as ephemeral or as permanent as you'd like. Web applications can reach anyone, anywhere, on any device with a single codebase.

Platform-specific applications are known for being incredibly rich and reliable. They're ever-present, on home screens, docks, and taskbars. They work regardless of network connection. They launch in their own standalone experience. They can read and write files from the local file system, access hardware connected via USB, serial port, or Bluetooth, and even interact with data stored on your device, such as contacts and calendar events. In these applications, you can do things such as take pictures, see playing songs listed on the home screen, or control song playback while in another app. Platform-specific applications feel like part of the device they run on.

A graph illustrating the relative capabilites and reach of platform-specific apps, with high capabilities, web apps, with high reach, and progressive web apps, which have both high capabilities and high reach.
Capabilities vs. reach of platform-specific apps, web apps, and progressive web apps.

If you think about platform-specific apps and web apps in terms of capabilities and reach, platform-specific apps represent the best of capabilities whereas web apps represent the best of reach. So where do Progressive Web Apps fit in?

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

The three app pillars #

Progressive Web Apps are web applications that have been designed to be capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application.

Capable #

The web is quite capable in its own right today. For example, you can build a hyper-local video chat app using WebRTC, geolocation, and push notifications. You can make that app installable and take its conversations virtual with WebGL and WebVR. With the introduction of WebAssembly, developers can tap into other ecosystems, such as C, C++, and Rust, and bring decades of work and capabilities to the web. Squoosh.app, for instance, uses this for its advanced image compression.

Until recently, only platform-specific apps could really lay claim to these capabilities. While some capabilities are still out of the web's reach, new and upcoming APIs are looking to change that, expanding what the web can do with features like file system access, media controls, app badging, and full clipboard support. All of these capabilities are built with the web's secure, user-centric permission model, ensuring that going to a website is never scary for users.

Between modern APIs, WebAssembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing.

Reliable ##

A reliable Progressive Web App feels fast and dependable regardless of the network.

Speed is critical for getting users to use your experience. In fact, as page load times go from 1 second to ten seconds, the probability of a user bouncing increases by 123%. Performance doesn't stop after the onload event. Users should never wonder whether their interaction—for example, clicking a button—was registered or not. Scrolling and animation should feel smooth. Performance affects the entire user experience, from how they perceive your application to how it actually performs.

Finally, reliable applications need to be usable regardless of network connection. Users expect apps to start up on slow or flaky network connections or even when offline. They expect the most recent content they've interacted with, such as media tracks or tickets and itineraries, to be available and usable even if getting a request to your server is hard. When a request isn't possible, they expect to be told there's trouble instead of silently failing or crashing.

Users deserve apps that respond to interaction in the blink of an eye, and an experience they can depend on.

Installable ##

Installed Progressive Web Apps run in a standalone window instead of a browser tab. They're launchable from on the user's home screen, dock, taskbar, or shelf. It's possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they're installed on.

New capabilities open up after a web app is installed. Keyboard shortcuts, usually reserved when running in the browser, become available. Progressive Web Apps can register to accept content from other applications, or to be the default application to handle different types of files.

When a Progressive Web App moves out of a tab and into a standalone app window, it transforms how users think about it and interact with it.

The best of both worlds #

At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, your web application becomes reliable and installable. If the new capabilities aren't available, users still get the core experience.

The numbers don't lie! Companies that have launched Progressive Web Apps have seen impressive results. For example, Twitter saw a 65% increase in pages per session, 75% more Tweets, and a 20% decrease in bounce rate, all while reducing the size of their app by over 97%. After switching to a PWA, Nikkei saw 2.3 times more organic traffic, 58% more subscriptions, and 49% more daily active users. Hulu replaced their platform-specific desktop experience with a Progressive Web App and saw a 27% increase in return visits.

Progressive Web Apps provide you with a unique opportunity to deliver a web experience your users will love. Using the latest web features to bring enhanced capabilities and reliability, Progressive Web Apps allow what you build to be installed by anyone, anywhere, on any device with a single codebase.