Successful PWA Examples of Media Industry

So progressive web apps for Magento 2 and Shopify stores already get a lot of buzz. But that’s not the only industry.  Like all other sectors, digital transformation has also impacted the media industry. The entire industry is undergoing a rehaul from newspapers to news channels to over-the-top content (OTT). The digital changes are being led by changing consumer expectations and the need for instant access to content on any device, anywhere. Adding various social channels and streaming services to gain information or entertainment has added to the woes of traditional media.

Be it a news site, a magazine, or a news aggregator app, everyone has to transform digitally to provide the best user experience and optimize their revenue using the web. So you can say the future of progressive web apps is quite clear.

But users face several key challenges while accessing news or media sites on their devices.

• Stiff competition from social media sites and apps which are important sources of news
• Overload of content from all channels and very little time to consume it
• On a smaller device, ads can seem disruptive and reduce user engagement
• Slow loading times of news sites, especially when the number of concurrent users is high
• Limited or zero access in slow networks 
• News/media apps are typically heavy and use up too much device storage

As a result of these user challenges, many news websites and media apps faced some of these usage issues:

• High bounce rate
• Uninstallation of apps
• Reduced engagement
• Lower page views
• Poor average session times
• Low intake of ads and lower conversion

These poor engagement and content consumption rates mean that media/news apps are no longer efficient from the business standpoint.

The Solution – PWA

With Progressive Web Apps, there rose a new era of content dissemination and consumption.  The PWA standard is a media company’s dream. It enhances reader access to the latest articles and helps them share the trending stories seamlessly between channels and touchpoints.

Here are some key reasons why PWA is ideal for a media/news app:

• Compatibility with browsers/devices
• Full responsiveness
• Offline access through flaky internet service
• Interaction and navigation exactly like a native app
• Use of push notifications for user re-engagement
• No need to download the app
• Ease of sharing with links

Apart from the top PWA examples, we have covered; here are some media apps that benefited immensely from a PWA transition

1. Voot lite

Voot is one of India’s most popular video-on-demand products. It is available as both a native app and a mobile web app. Voot has close to 35,000 hours of premium content online, with exclusive shows from TV networks and about 8000 videos for children. 

Challenges

• Mobile is the primary device for content consumption for Voot 
• Limited storage for native apps 
• Most users on 2G and 3G networks making data transfer expensive
• Slow loading times led to abandonment even before the streaming began

To address these and other challenges, Voot successfully launched a Progressive Web App. Their PWA reported session time per user increased by 39% within days of launching and an increase in daily views per user by 15%. Here are the key benefits:

• 39% increase in session time per user
• 80% reduction in page load time
• 19% decrease in bounce rate
• 77% boost in conversion from visitor to the video viewer
• 15% rise  in average daily video views per user

2. The Weather Channel

The Weather Channel is a highly acclaimed and popular channel that has been forecasting since the 1980s. It now serves people globally on many platforms. The weather.com website has high traffic from across the world and is a top-2) site in use. On average, it serves up to 40 billion forecast requests per day. 

Challenges:

• A large population now accesses weather information on the mobile web
• The Weather Channel pushes important information to their native app users daily
• Yet, a large number of visits come not from the app, but the mobile web
• Mobile web is also important for areas with low connectivity or demographics that don’t use the latest smartphone
• Browser push notifications were a key requirement to send urgent weather updates or warnings
• The goal was also to re-engage mobile users who didn’t download the app but were likely to hit by severe weather

The Weather Channel opted for a progressive web app to solve these key challenges. The PWA helped in  relaying important weather information to people globally in their local language. With PWA, they could also support over 60 languages using a single code base.

A different approach:

• Implemented push notifications for mobile users on Android and desktop users on Chrome to scale quickly
• The experience was similar to a native app and worked even if the browser wasn’t running(using service workers)
• 1 million users opted-in to receive push notifications within three months with 52 percent from mobile
• 80% improvement in load time after PWA launch
• Rolled out progressive web apps in 178 countries, serving 62 languages.

3. Forbes 

Forbes is a well-known American business magazine portal that features articles and news on technology, finance, marketing, investment, and other business-relevant topics. Forbes is also famous for its lists featuring the richest people on earth. The Forbes 400 is the list of the richest people in the USA. The Forbes 500 is a list of the largest companies in the world. 

Forbes was facing challenges with their native web app and were looking to rebrand their mobile web. 

Challenges: 

• Poor page load speeds
• High bounce rate and abandonment rate
• Wanted an element of personalization
• Needed a mobile web solution that worked with sparse internet networks on a variety of devices

The Forbes mobile PWA is hailed as a massive success story:

Highlights:

• New PWA site loads in an average of 0.8 seconds
• Increased user engagement by 100%
• 43% increase in sessions per user
• 3x increase in scroll depth
• Ad views increased by 20%
• Highly visual and personalized content
• Push notifications for Android devices
• Introduced story format called cards where users can swipe through any content
• Reduction in average app size from webpages from 2MB to 30KB

Other well-known examples of successful PWAs in the media industry include Twitter, Pinterest, Medium, Flipboard, Financial Times, and Smashing Magazine.

How news apps and magazines use PWA for users

The benefits of Progressive Web Applications (PWAs) are now well-known. How it increases engagement and conversion. Or how it blazing fast, device-agnostic, reliable, and countless other benefits.

If you want to talk numbers and benefits, head to the PWAStats.com website that has all the customer success stories that include details on conversion rate, revenue and optimization.

One recent example that is worth noting is that of Forbes.

As you probably know, Forbes is a well-known American business magazine portal that features articles and news on technology, finance, marketing, investment and other business-relevant topics.

User engagement on entertainment and news websites relies heavily on page load speed and the ability to interact quickly with the interface.

Yet, the impact of the web on newsrooms has been significant. Content is driven and directed by the reader. They need to be served the content they want and rather quickly.

For users of a business magazine, it is imperative that the content is available on the go, on a variety of devices and often with intermittent internet access.

What happens when such users experience slow loading websites and poor engagement on their mobile phones? As you can imagine, they move on to the next available source for the content they are searching for.

Forbes was facing many issues with their mobile site and decided to rebrand their mobile experience as a PWA.

A solution that was faster than the previous mobile site. In fact, the home page of the Forbes PWA website launches only in 0.8 seconds. Compare this to the average mobile landing page load speed of 22 seconds and you realise the impact. The design that has a new format bases their card stories inspired from the layout of Snapchat Stories feature.

AMP coupled with PWA

But Forbes did it cleverly. They not only launched a PWA, but they also adopted Accelerated Mobile Pages (AMP). Both technologies by Google and both highly recommended by Google engineers for optimal mobile experiences.

Using this potent combination, Forbes could deliver the content its readers wanted faster. One big advantage of going the PWA way is the ability to deliver visuals faster.

Visuals are key to user engagement. When you can deliver content and visuals faster, your readers stay longer. As a result, they view more ads.

PWA makes Personalization possible, which is key to customer experience.

Forbes PWA: How it made the most of technology

Once the PWA is stored on the reader’s smartphone home screen, the user can store interesting topics in the PWA.

With the help of push notifications, the app can inform you when there is news from a category you prefer. This way a reader is not overwhelmed by a lot of information but selective news stories that are relevant and personalized.

PWA – the promise of reliability

Why is reliability important to a news publishing website?

One major feature in PWAs is that there is absolutely no down-time. If the network is flaky, or there is no connection, a reader can still access the PWA in offline mode. Once the content is downloaded on the device’s home screen, the user can access it whenever they like.

This allows the users to use the app more often, even when there is no internet. Reliability and accessibility allowed Forbes to monetize better on their platform.

Execution challenges

Since a PWA looks and works much differently than a traditional mobile site, the process of implementation is more challenging and can lead to an internal organizational clash.

Forbes needed to bring major culture and process change through a number of departments, not just technical teams to make it happen. To design and launch the PWA for example, they adopted the DevOps practice of continuous deployment.

Continuous deployment is an Agile approach to development that allows organizations to release new features and updates in a continuous, non-stop fashion. This is unlike the Waterfall approach of releasing a new product where the process can take months or even years.

So Forbes pushed out small but critical changes in real time as their developers continued work on the PWA. This involved stakeholder buy-in and a major cultural and process change.

They had the challenge of launching a new mobile experience in a short period of time without disrupting their ad-supported platform. Needless to say, it was done with the utmost discipline and perfectionism.

The results are there for everyone to witness. 20% increase in impressions per page, a 12% increase in the number of users and 6x increase in readers that complete reading the articles.  Being faster, more reliable and more engaging has a direct impact on revenue.

Here were some of the other benefits of launching a PWA:

• 43 % more sessions per user
• Ad viewability up by 20 %
• 100 % user engagement in the PWA
• 3x increase in scroll depth
• Highly visual content
• Push notifications 
• New story format called cards where users can swipe through the content they like
• Forbes cut down the average size of its web pages from 2MB to 30KB

Flipboard is another example of a news app that was relaunched as a PWA and reaped the benefits of this new, progressive web technology.

Also worth noting is that BBC news has recently launched a new PWA for their Worklife section with the promise of mobile-first design elements, faster loading times, offline reading capability, improved ad layout and more features.  This new PWA is sponsored by Merrill.

If you have a news magazine or a similar application and are wondering how to go about this, Google has laid out this information in a challenge here.

How PWA is revolutionizing the News Industry?

Back in 1980, when Columbus Dispatch got announced as the first online newspaper, it only had 3600 subscribers. However, the number was significant, considering there weren’t many internet users, not many had access to the devices, and the overall subscriber list was good for a start.

Since the domain was good enough to tolerate 3000 odd people at a time, the website never really had to go through the technical hiccups like page load time, speed of web surfing, etc.

And even if the pages were slow to load, that is, more than 10 seconds to display the text, the users never really bothered about interaction with the machine.

Today, we all want computers to generate outcomes so swift that the interface should feel as human as possible. Anything slower than 1 second feels machinery, and the entire point of having a website feels senseless and useless.

The thirst for sprinkling human-ness to the machine gets even bigger today because of the number of subscribers and looking at their endless demands; we just can’t overlook their requirements.

With millions of online subscribers skimming through the channel at one go, the challenges for the news web industry has gotten bigger and real. And the only way to go about it is by accepting them and moving forward in the way industry wants.

Let’s quickly go through some of the problems with the existing news web.

• There’s too much traffic which bounces off.
• There’s little new traffic.
• There’s a little dedicated readership.
• Number of pages visit per session.
• Lesser scroll depth.
• Super expensive portals and applications with no guarantee over traffic generation.

The news and entertainment industry can’t afford to have such problems on the website because these problems also affect their “ad views,” and the only way to convince a conversion is by engaging the customers.

The above problems are based on the perspective of website owners; however, there are far greater problems that the readers face.

Here are some of the problems which detest readers while they go through non-interactive news websites.

• The pages are not so expressive. 
• The lengthy response time tests the patience.
• Offline navigation is a distant dream.
• High data consumption despite poor connectivity.
• Difficulty in sharing the content.

With as many problems troubling readers, a content management website can’t really handle the subscribers and meet their expectations.

Handling two E’s in the media industry with PWA.

If you can take care of two Es of the customers, i.e., customer engagement and customer experience, you can pretty much conquer the news space and readers.

The seismic change from mobile websites to PWA will be as big a seismic change as when the newspapers got shifted to digital print.

Today, noting the need for the hour, Media and news industry have opted for Progressive Web Application (PWA) for engaging their customers and enhancing the customer experiences.

As PWA modernizes and streamlines the need for websites in the native application outfit, there’s a little too very low resistance to change in every organization (because there’s possibly no good reason to ignore the technology).

PWA is like masking mobile websites with a native application look, but that’s not the full story.

Along with the interactive attire and ambiance, your mobile website also performs better— something which isn’t expected from the usual sites.

So far now, PWAs for CMS sites have met their expectations, and we will cover a few motivating case studies in the later part of the blog.

Let’s find out how PWA solves multiple issues for both publishers and readers at the same time.

The Win-Win Deal With Faster Page Load

PWA promises faster page load— thanks to the service workers— thereby pushing the win-win deal for both the website holders and readers.

A speedy mobile web application brings conversion for web owners, and the same brings engaging experience for the customers.

Service workers are like gold miners— they mine the vital resource and sideline the unimportant ones before bringing the resource to people’s visibility.

In any Progressive Web Application, the first and the foremost step involves breaking down of resources into granular pieces so that the screen gets the required resources for the early visibility.

Later in the stage, Service workers cache all the additional pieces which get loaded during navigation to other pages and screens.

The added benefit of service worker: Since these workers cache relevant data like feed, current views, etc., repeat visits are mostly instantaneous— very similar to that of applications.

It brings a lot of positives for web applications because “we download zero application per month,” and with PWA, the users can have an “app-like” joy ride without worrying about installing or downloading native applications.

PWA supports the AIDA model

Again, PWAs are super-efficient when it comes to covering AIDA for captivating the audience.

If content did all the conversion jobs, most of the websites would have been minting limitless green bills; but we know that reality is very different.

It’s also about responsively placing the content so that it doesn’t repel the readers.

AIDA model or simply put “Awareness, Interest, Desire, and Action” in your content, you can engage your reader.

It has been in the industry for years, and PWA bears the model with the same zeal for building a loyal readership.

Let’s have a fine look at how it takes care of the stated model with outright honesty.

1. Attention: As PWA supports highly visual and flexible content over the top of faster loading, it quickly grabs attention, thereby giving a great start to the AIDA model. It’s one of the most excellent ways to build trust so that readers spend more time on comprehending the content instead of figuring out the complex content schema. It’s a pure science to understand that visuals produce more leads than any other form of content— credit to faster human interpretation. So, with PWA, you can nicely place and sort your visual content and start with getting visual attention.
2. Interest: You want to make your users believe that you are here to benefit them, and they aren’t scrolling aimlessly. You want your content to add value to their lives, and by jolting their area of interest, you can achieve the said. As PWA are lighter to code and faster to load, you can think of adding serviceable ads for readers. In ordinary non-PWA websites, ad placements can further deteriorate the response time of the pages. However, PWA encourages you to have a beautiful blend of content and ad, which just entice the interest level of the readers so good enough for conversion.
3. Desire: As a part of the media industry, you want the content to spread like wildfire, and that’s a tough nut to break if you aren’t igniting the passion in your readers. The desire to spread your words like fire can get true only if the readers feel the urge your piece. With PWA, you can organize your content and allow the readers to swipe through any content. As navigation between the content is much smoother, the readers anticipate more pages per entry than expected. And if your content matches their standard, they are twice as likely to share your content. By organizing your content, categorizing them correctly, permitting them to hedge content through user preference, and letting them save and share the content will do worlds of good to your business. 
4. Action: When you are a part of the news industry, you can’t wait for your piece to conclude for readers to react to the CTAs. You have to think of converting them as early as possible. You are up against a challenging force if you want users to act to your content. It is said that “you aren’t a good media person if you look very inviting to your readers.” You have to keep your points without letting your users know your bias. So, it’s technically a tough ask for you to see them through CTAs. By dressing your website in PWA ambiance, you get the chance to convert your readers through push notifications. Moreover, repeat entry to the web application through the home button increases the likelihood of conversion.

PWA Media Industry— Case Study

We are getting close to the importance of PWA in the news and media industry with these use cases.

Let’s check how some of the top giants of industry have implemented PWA in filling up all the problem holes of the customers.

The Financial Times

The Financial Times is a British international daily newspaper which also operates online and is owned by the Japanese company Nikkei Inc. 

Headquartered in London, the company aims to cover economic strata of the globe, thereby disseminating everything encircling the finances of the world.

It’s best known to reflect the content on salmon-colored pages— both on newspaper and webpage, and they vow to carry the same legacy on their progressive web applications.

Challenges

Nikkei Inc. observed massive users influx through all their media publication houses, including Financial Times via mobile phones.

It means that the users were looking to get into the website; however, the slow page load, i.e., response time more than 20 seconds, repelled most of them. Moreover, knowing that more than half the readers bounce off the page if the page load takes more than 3 seconds, Nikkei couldn’t resist PWA change. 

It’s needless to say that the slow page load and reduced speed index did affect their search rankings, and their business did take a massive toll.

PWA and Financial Times.

The idea of progressive web applications did lure Nikkei when the Lighthouse testing made them aware of the fact that where they stand.

Like any new PWA-user, Nikkei ran a few Lighthouse tests to find out how optimized they stand among their competitors.

To cater offline content to the readers, the daily platform converted the mobile web into the web application.

Soon they got PWAs in places, their Lighthouse score leaped from 23 to 82, and their organic search, traffic, and conversion touch great heights. [1]

Noteworthy Results.

1. 75% faster loading with prefetch
2. 14 seconds speedier time-to-interact
3. 2X better Speed Index
4. 58% more conversions (subscriptions)
5. 49% more daily active users
6. 2.3X organic traffic
7. 2X page views per session

A lot of other news and digital content companies such as Medium, Smashing Magazines, Twitter, The Weather Channel, etc. have taken PWA seriously exactly when they should, and knowing how Google places PWAs on the search engine, almost all the mobile pages will acknowledge that “PWAs are no more an option, but compulsion.”

Conclusion

Most media companies compete for the attention of a highly mobile, smart user who uses devices and is often on the go. PWA eliminates the restrictions of storage, network connectivity issues, application download, poor page load speed, and provides  fast, easy and reliable access. This translates into better retention, higher engagement, and ultimately better monetization opportunities for the media app.