Iflexion
Progressive web app development

10 Progressive Web App Examples that Brand Owners can Learn From

Progressive web apps (PWA) combine the best features of mobile websites and native apps. They are economical, efficient, and occupy little space on users’ mobile devices.

Regardless of these advantages though, if your business is thinking of implementing a progressive web app, it will pay to scrutinize some of the best live examples first, as then you can see what might be achieved.

You will find some successful progressive web app examples profiled in this article, but in case the concept is new to you, we’ll first take a closer look at what it means, and at the key characteristics separating PWAs from other solutions offered by mobile and web app developers.

Usability and Accessibility: The Best of Both in a PWA

Before exploring the characteristics that define progressive web apps, you might be interested to know that in terms of user engagement, they have the potential to minimize constraints typical of both mobile web property and native apps. The graph below highlights the fact that mobile users tend to access mobile web property more often than apps, but spend more time engaging with the apps they install, compared to the web pages they visit.

Mobile websites and native apps have their own pros and cons. The characteristics of native apps make them easier to engage with, while mobile web property enjoys greater reach because it is more accessible in the first place (as there is no need to locate and download a software program from an app store).

PWAs meanwhile, blend the best characteristics of mobile websites and native apps. This is why, as you will learn from the progressive web app examples featured shortly, some of the world’s best-known companies and organizations are adopting them.

How to Define a Progressive Web App

Essentially, you can think of a progressive web app as being either a mobile app delivered via a web browser, or a website with the functionality of a mobile app, although the latter option is rather more accurate.
PWA technology utilizes APIs to create a native-style app experience within a browser. Progressive web apps do not need to be downloaded, yet they can reside permanently on a user’s home screen or desktop.

The most notable characteristics of progressive web apps include:

  • Compatibility with just about any web browser
  • Responsiveness, making them suitable for use on all device types
  • The ability to work offline or on poor-quality networks (with the help of “service worker” scripts)
  • Interaction and navigation that’s very similar to a native experience
  • Support for push notifications, making it easy for users to re-engage
  • Installation like a regular mobile or desktop app, but with no need of a download
  • Ease of sharing by links

In addition to these characteristics, progressive web apps also have the advantage of being very light and enabling users to enjoy the benefits of websites and apps without consuming vast quantities of data.

10 Seriously Successful Progressive Web App Examples

There are plenty of resources online if you want to find out more about the technology behind progressive web apps or gain an understanding of their development. However, you can also learn a lot by studying some of the apps launched by leading brand names in technology, retail, and media industries.

Without further ado then, here are ten progressive web app examples that should prove encouraging, especially if your business is considering changes to current digital—and especially mobile—commerce solutions.

#1: Twitter Lite Social Media PWA

As a platform for social news sharing, Twitter needs little introduction, but with some 80% of users on mobile, the brand wanted to create a more reliable and engaging experience, as well as to reduce loading times and visitor bounce rate.

The new Twitter Lite app has been received with great enthusiasm since its 2017 launch, and Twitter is frequently adding new features to make its PWA even more popular. Now known as the fastest, least expensive and most reliable way to access Twitter, the progressive Twitter app requires less than 3% of the storage space required for its native Android counterpart.

The Twitter Lite PWA is generating more than ten million push notifications per day, massively encouraging user reengagement. Indeed, according to a Google Developers case study, 250,000 Twitter members engage with the app directly from their home screens at an average frequency of four times per day.

#2: Trivago Hotel Booking PWA

Trivago is a travel-industry app that aggregates results from hotel search sites and claims to help users find the very best price for hotel rooms around the world. It is known today as one of the leading hotel search engines. Trivago launched its progressive web app in April, as part of a drive to increase engagement and encourage more travelers to book accommodation via the platform.

The Trivago PWA is available to users in 55 countries and allows them to select from more than 30 languages. Features include push notifications (which have provided Trivago with a new channel for re-engagement), an offline mode, and loading time of fewer than three seconds. The app also provides hotel reviews, guest ratings, and distances from the listed hotels to local points of interest.

Since its launch, the progressive web app has improved engagement considerably. Users who have added the app to their home screen revisit Trivago 150% more than they did previously, and clickouts to hotel offers have increased by nearly 100%, as reported in a Think with Google article.

#3: Starbucks Coffee PWA

The Starbucks PWA has been live since 2017 when it was built with emerging markets and highly mobile customers in mind. Starbucks wanted to make it easier for people to browse the menu, create customized orders, and add them to the website’s shopping cart, even when connectivity is poor or temporarily absent.

The app’s features include:

  • Smooth, native-quality animations
  • Full offline functionality
  • Location-specific price listings (when the app is online)
  • Fast, highly responsive performance

As ubiquitous a company as it is, Starbucks is physically present in many countries that have poor communications infrastructure. The tiny PWA, which occupies a mere 233 kilobytes of storage and utilizes caching to make almost all functionality available offline, is extending the company’s virtual presence in these locations too.

In fact, the app is strengthening Starbucks’ position as a brand synonymous with both coffee and hi-tech consumerism. The app is also proving successful in engaging desktop users, who are placing online orders via the website at about the same rate as mobile customers.

#4: Forbes News and General Interest PWA

Forbes was one of the first major media companies to implement a progressive web app, having recognized the need to improve the start render time of its website. The performance of Forbes’s previous mobile website was appalling, with a start render time of 6.5 seconds.

According to Salah Zalatimo, head of Product and Tech at Forbes, the decision to launch a PWA for delivering news and general-interest content proved to be the right one, delivering what he describes as “dramatic” results.

Readers now get to see content within three seconds of launching the app and enjoy a more visually rewarding experience. As a result, Forbes is seeing an increase in readership of 12%. Additionally, the number of ad impressions per page is up 20% and there is a sixfold increase in the number of readers completing articles.

#5: Debenhams Online Retail PWA

If you are involved in multi-channel retail, you’ll be well aware of the need to streamline and optimize the customer journey. That was one of the key motivations for British retail chain Debenhams to convert its mobile-shopping website to a progressive web app.

Debenhams’s previous website was slow and cumbersome for shoppers to navigate, requiring the download of large quantities of data—as much as eight to ten megabytes over a typical two-day period of engagement with the site. This was reduced significantly by the retailer’s new PWA, which also ushered in other improvements, including an intuitive multiple-view approach to product listings, along with advanced filtering options.

Furthermore, the overall customer journey time is now 50% less than it was with the old website, and that has no doubt contributed to the double-figure growth in conversions recently reported by Debenhams’s digital product management team.

#6: West Elm PWA Beta Test

A mere six months ago, the implementation of progressive web apps in retail was almost unheard of, with the aforementioned Debenhams PWA being one of the first. Indeed, at that time, none other than Ted Schadler, principal analyst and VP at Forrester, was quoted by Essential Retail as saying he hadn’t heard of any US retailers getting on board with PWAs.

That situation seems to be changing fast though, and West Elm, a home furnishing store chain headquartered in New York, is one example of a US retailer with a PWA in the pipeline. The West Elm app is customer-focused and looks incredibly appealing; with fixed header and footer sections cleverly exploited to ensure shoppers always have key actions at their fingertips.

Results have been highly encouraging for West Elm, given that the app is still in Beta. Already the company is attributing a 9% increase in per visit revenue and a 15% uplift in time-on-site to its new mobile commerce storefront. Those are some encouraging PWA statistics for a solution not yet on general release.

#7 Washington Post News PWA

The progressive web app developed by The Washington Post deserves a mention in this list, even though the news agency’s adoption of PWA technology is old news. The company began working on Accelerated Mobile Pages back in 2015 and since then has perfected the use of service worker caching to maintain a robust news platform with fast loading times, even on the patchiest of networks.

Readers benefit from an exceptional experience when perusing any of the 1,000 or so articles published daily by The Washington Post, but the agency has not been taking the website’s 88% performance improvement (as compared with its original mobile site) for granted.

The PWA monitors offline user activity with help from the Offline Google Analytics Library. This enables the company to gather insights about readers’ interaction with the app, even when they are not connected to a network. This analytical capability will grow in importance as audiences spend more time engaging with offline content and functionality, which they surely will now that technology has evolved to make it possible.

#8: Pinterest Social Curation PWA

Images, recipes, products, videos—anything is fair game for Pinterest users to curate and share with the world, but it was the desire to capture wider global attention that led Pinterest to invest in a progressive web app. With the incumbent web experience generating conversions at a rate of just 1%, decision makers at Pinterest realized that something needed to be done.

The goal, as with most other PWAs described in this article, was to improve UX by making the Pinterest website respond faster, particularly in terms of interactivity. The old website could take more than 20 seconds for the main thread to settle down and become responsive to user inputs.

The Pinterest site was converted to a progressive web app in just three months, and the result was an immediate improvement in performance metrics. The time needed for the mobile site to become interactive was slashed from 23 seconds to less than 6 seconds. Core engagements, time spent on site, and ad clickthroughs increased.

Despite the success so far, Pinterest is eager to continue with development, most recently working on an improved experience for unauthenticated users, in an effort to stimulate increased sign-up activity.

#9: AliExpress Etail PWA

AliExpress is the retail division of the immensely successful Chinese B2B platform, Alibaba. When the company first set out to develop a mobile ecommerce website, their plan was to use the web property to encourage shoppers to download the AliExpress native app for iOS and Android.

However, although the technology team focused diligently on high-quality site design and functionality, user engagement was poorer than expected. Meanwhile, AliExpress continued to have difficulty getting mobile consumers to download and install the app.

Fortunately, recognition of the challenges coincided with the emergence of progressive web app technology, so the company decided that a cross-platform PWA offered the most promising solution. AliExpress went ahead with development and after launching the new mobile experience, soon began to see improved results.

Users clearly approved of the app and began to visit twice as many pages per browsing session. Time spent on the site per user-session increased by 74% and as a case study from Google reveals, the new-user conversion rate more than doubled after implementation of the AliExpress PWA.

#10: Lancôme Cosmetic Sales and Marketing PWA

Lancôme’s mobile marketing story follows a path similar to that of AliExpress, in that the L’Oréal-owned cosmetics brand found mobile conversions fading in comparison with those involving desktop users—this despite the fact that desktop traffic had been overtaken by mobile-device traffic.

However, unlike AliExpress, Lancôme chose to forego the option of developing expensive native apps and instead, moved straight into a website redesign, using PWA technology. The new site launched in October 2016, placing Lancôme at the very forefront of retail progressive web app development.

The company’s designers set out to make their PWA really app-like, making use of the instantly recognizable “hamburger” menu icon, slide out boxes, and scrollable carousels of product images. Static headers help to increase page-loading speed, and code splitting gives users the impression of an app that’s ready to go almost instantaneously, even if content below the fold hasn’t fully loaded.

The progressive web app is clearly a hit with Lancôme’s customers, who are enjoying the immersive experience, so much so that they respond readily to the offer of push notifications. By April 2017, some 20,000 shoppers had signed up for alerts, with 9% of those tapping on a push notification going on to make a purchase.

A Summary of Progressive Web Application Advantages

The ten progressive web app examples featured in this article, of course, represent some of the higher-profile success stories among enterprises adopting the technology. However, if you perform your own research online, you can find many more accounts of businesses receiving positive results from their own PWAs.

Perhaps more notably, there are few tales of dissatisfaction. That is not surprising since, at this point, there is a lack of better solutions to combat the shortfalls of native apps and traditional mobile websites. Just to press that point home, here is a brief summary of the benefits appearing as a common thread through each of the examples we have featured.

It’s fair to say that all the featured PWAs have delivered:

  • Greatly reduced loading times for mobile web pages
  • Comparatively low development costs
  • Improved customer engagement and reengagement
  • Higher clickthrough rates
  • Reduced bounce rates
  • Increased conversions

Meanwhile, mobile and desktop users are finding the PWA experience to be more fluid and immersive, less frustrating, and more reliable—and perhaps most important of all, less subject to the discontinuity that goes along with variable network quality and highly mobile lifestyles.

For Progressively Better Business Online, Think PWA

It seems that the traditional dilemma for enterprises targeting mobile traffic has finally been neutralized. Instead of choosing between the immediacy of a mobile website and the rich experience offered by native apps, you can now offer your target audiences the best of both and improve the commercial performance of your business to boot.

Has your company considered converting its mobile website to a PWA? If not, why? This article has, of course, focused very much on the positives, but do you see any real drawbacks to progressive web apps?

If so, please feel free to share your reservations. After all, the ten brands featured here have all had success with PWAs, but no doubt encountered some challenges along the way. Perhaps we can address the possible issues in a future article, and offer some tips to reduce their significance.

10 Progressive Web App Examples that Brand Owners can Learn From
June 4, 2018