You are considering implementing a Progressive Web App in your business, aren’t you? If the answer is yes, then this is just the article for you. Here you’ll find out about all the opportunities a PWA brings, read the most powerful success stories (and probably find one or more that can be inspiring for your company), and discover how easy and cheap it is to introduce a PWA.
We’ll also present you our product: Vue.js-based PWA – Vue Storefront. Ready? Fasten your seatbelt – steady – go!
What are the advantages of PWAs?
The list of advantages of PWAs is long and (with new updates) growing. Progressive Web Apps behave like native apps – they designed to be mobile-first and use some of app-like features, including, for example, push notifications. They can work offline – no matter if you’re in the metro, on a plane or in another place with no Internet connection, you can browse the products from your favourite eShop.
What’s more, PWAs are low on data, which is especially important for businesses operating in countries with poor Internet connections. An app which takes close to 10 MBs as a native app, can be reduced to about 500KB when made as a PWA. PWAs require no updates – they get updated like web-pages.
Additionally, PWAs are easily shareable and linkable (which makes them more discoverable than native apps).
It’s no surprise that PWAs attract eCommerce Managers and Business Owners. But it’s surprising how good the results of implementing PWAs in their companies are.
PWA Success Stories
You’re probably asking yourself if there are any companies that have already implemented Progressive Web Apps. Sure – of course! There’s plenty of them :) And I’m sure you know many of them and even use some of their products! Have a look at our Top 30 PWA Report, where we listed 30 interesting case studies of PWAs and how they improved their results. We also described some of them below.
AliExpress: +104% increase in conversion rate with new Progressive Web App
AliExpress is an online retail service based in China. Launched in 2010, AliExpress is owned by Alibaba. The marketplace is made up of small businesses in China and elsewhere, such as Singapore, that offer products to international online buyers.
The company’s motto is “Smarter shopping, better living!”. Alibaba confirms it by building great mobile experiences – as mobile commerce is growing three times faster than eCommerce.
AliExpress found it difficult to build an engaging experience on the web that was as fast as their mobile app. They looked at the mobile web as a platform to transition a non-app user to an app user. Not everyone downloaded their app, however, and getting users to install and re-engage with it was challenging and costly.
The company decided to build a cross-browser Progressive Web App (https://m.aliexpress.com) to combine the best of their app with the broad reach of the web. The results were astonishing – the conversion rates increased by 104%, conversion rates on Safari increased by 82%.
The brand new strategy resulted in a better experience. Users now visit twice as many pages per session, and time spent per session increased an average of 74% across all browsers.
AliExpress – Implementing a PWA resulted in a 104% higher conversion rate.
Trivago: 150% increase in engagement
Trivago is another great example of how PWAs can improve your performance. Trivago is one of the world’s leading hotel search engines, comparing around 700,000 hotels on 175 booking websites.
More Trivago users access the service through mobile devices than on desktop and laptop computers. Users don’t always accept the cost of downloading a native app just to find out if it provides the service they need.
Trivago decided to implement a PWA, a collection of APIs that allows mobile websites to provide much of the functionality of a native app, such as offline access, push notifications and homescreen shortcuts, while still being accessible through a regular mobile browser.
Trivago noted a 150% increase in engagement and a 97% increase in clickouts to hotel.
Who of you hasn’t heard about Twitter? One of the biggest players in the world of social media also decided to invest in a PWA.
With over 80% of users on mobile, Twitter wanted their mobile web experience to be faster, more reliable, and more engaging.
The Twitter Lite Progressive Web App combines the best of the modern web with native features. Twitter implemented web push notifications that work the same as those from native apps and arrive even if the user’s browser is closed.
Twitter Lite uses less data by default, serving smaller media resources and relying on cached data as much as possible. The PWA also optimizes images to help reduce data consumption and its users benefit from data consumption savings.
The data saver mode helps them preserve even more mobile data by giving them control over when Twitter Lite downloads media assets. Twitter Lite helps reach this audience more effectively by making Twitter faster and easier to use in low-bandwidth conditions.
Twitter noted a 65% increase in pages per session, a 75% increase in Tweets sent and a 20% decrease in bounce rate.
La Nature: 0.1S loading page speed on mobile
This is an example which is especially important for us, as the La Nature PWA is built using our product – Vue Storefront.
Vue Storefront is an ultrafast, off-line ready, mobile first Progressive Web App storefront released under the MIT license. You can just take the source code of Vue Storefront, customize it to your needs and connect it to your eCommerce. Just as La Nature did it :)
La Nature is a Russian company offering stylish jewellery. When you visit La Nature’s website, you might be surprised how many colours and images there are on their website.
This was one of the main reasons the company decided to put over 16,800 product images their on PWA. In mCommerce it is challenging.
This number of images can cause poor loading times – the reasonable standard in mobile UX is 4 seconds or less.
The implementation of a PWA shortened the speed for catalog loading to 0.1 second – and it’s much lower than the average.
That’s only a few cases. PWAs inspire brands from many industries. Other companies that have invested in PWAs are Pinterest, Flipkart, OLX, Tinder, and many more.
How much time and money do I need to have a PWA?
Well, I guess you’ve already decided to implement a PWA to your business or at least thinking about it heavily. OK, then this will be the most important question for you.
First, we’ll talk about time of implementation. The standard time of integration is somewhere between 3-4 months depending on the features you want to cover. Just take a look at your eCommerce system, whether it’s Magento or any other eCommerce platform, and consider which of the features are the most important for you business.
Also, you don’t have to start with all your products; you can test a PWA on a group of your best-converting items. This way, you estimate the possible benefits a PWA will bring to your business.
If you are not sure where to start, we can schedule a scoping session with our team. During the workshops, which usually take 1–2 days, a UX designer and software architect from Divante work closely with the Product Owner and the client’s IT team. They will help you decide where to start and what is most important for your business growth.
That can be the effect of typical scoping session. As you can see, we use a lot of paper and stickers to analyze all the features and set priorities.
The second is about money. A usual PWA implementation costs between 40 and 80 thousand Euro. But you need to be aware that it’s not necessary to implement a complete PWA all at once.
If your eCommerce is based on Magento, you can use our Vue Storefront – Magento connector and make a Proof of Concept. That kind of experiment is a great choice if you’re not sure if a PWA is a great choice for you. And it helps you save money and time.
How does the Proof of Concept work?
The minimal scope is a Vue Storefront instance with a changed logo and modified styles. It helps you to understand how smoothly your eCommerce can run with Vue Storefront. The scope of such a PoC can be done in one or two days.
Vue Storefront works great with both Magento 2.x and 1.x — even with the default theme one can test the business parameters of the PWA.
Then you can choose where to go further: you can just import your products – it takes 5-10 days – or spend 4-6 weeks adjusting the design and customizing the UI. At the end, you’ll get the working PoC that can be tested with real people. We’re sure that it will help you make the decision.
To help you better understand the idea of a PoC, watch the video below:
Basic integration with Magento 1 / Magento 2 is just a matter of a few hours spent on configuration.
PWA before replatforming?
This part of the text is dedicated to those of you who considered replatforming. One of the most popular scenarios is migrating from Magento 1 to Magento 2. It’s obvious that each migration processes is different, but usually, the replatforming process consumes a lot of time and even to 100% of the initial implementation budget.
At Divante, we have had projects where most of the implementation budget was spent on integrations with ERP, CRM or WMS. On the other hand, the best results can be achieved with investing in frontend. And this is where PWAs come in.
For some businesses, investing in a PWA before migration is a great choice. To be precise – we don’t want to convince you to not replatform. But improving your results with frontend changes before moving away from a legacy backend can help you secure this operation.
We live in a mobile-first world which encourages companies to take the mobile-first approach. Among the companies that have already benefited from PWAs are: Alibaba, Twitter, Tinder, OLX and Pinterest. Implementing a PWA brings many positive results, including an increase in engagement, speeding up loading time and raising conversion rates.
Implementing a PWA costs around 40-80K Euros and takes 3-4 months, but you can cut on the scope of project, implement a PWA only for a couple of your product categories or try our Proof of Concept approach.
A PWA can also be a recipe for companies thinking about replatforming – starting from the frontend layer reduces the risk and helps to make the migration process safe and sound.