From Search to Checkout without annoying your customers
How Accelerated Mobile Pages and Progressive Web Apps can boost online sales
In the world of e-commerce, customers are becoming increasingly mobile. In The Netherlands, 50% of consumers is shopping on their mobile phone. Among those under 35 years of age mobile purchases is at 65%. Numbers for searching and browsing for a potential purchase is over 70% overall.
Converting these visitors into customers is a delicate task. Consumers are still hesitant to make mobile purchases. The challenge lies in optimizing the mobile user experience. Some shops have tried to improve user experience using a native mobile app. These apps are installed through the Apple or Google app store. However, installation rates for mobile apps are decreasing. The app boom is over. Most smartphone users download zero apps per month. Unless you’re a major player and consumers use your app on a weekly basis, chances are your expensively built app is never installed.
Alibaba.com increased mobile conversions by 76% with a Progressive Web App.
So how can you get those smartphone users to make purchases? Luckily the web has evolved a lot in recent years. Features such as push notifications, real-time updates, seamless screen transitions and geolocation are all available on the web platform. Advances in front-end development make it possible to achieve a highly interactive, high-performance user experience that matches a native app. The web also offers some advantages over native apps such as discoverability through search and social media and not having to install anything. Key to a successful web app is user experience. Reduce friction in your sales funnel and more customers will make it to the end.
The mobile web experience
Two major breakthroughs in high-performance web experiences came from Google in 2015 as it introduced Accelerated Mobile Pages (AMP) and Progressive Web Apps (PWA). Two very different techniques trying to solve the same problem: how to make the web fast and reliable. Accelerated Mobile Pages is a way to build a lightweight version of your webpage that Google (and others) will make instantly available right from its search results, at least on mobile. AMP pages are very limited in functionality, but blazingly fast. They are also more likely to be at the top of the search results.
One e-commerce company recently deployed an immersive AMP experience and saw a 20–30% conversion uplift.
Progressive Web App is a broader concept meant to describe a web app that offers certain features that make it fast, reliable and engaging. A PWA is a state-of-the-art web application that uses all of the power of the web platform, and does so responsibly. It’s generally a single-page application, meaning page transitions are fast and smooth and we can offer a high-end user experience. A Progressive Web App is accessible from the web like any other website, but can also be “installed” by adding an icon for it on the homescreen. Opening the app from the homescreen will render it in full-screen mode, essentially mimicking a native mobile app. We can also implement push notifications so customers can actively be engaged with.
Accelerated Mobile Pages and a Progressive Web App together make for a very potent combination. Because an AMP page is instantly available from Google and AMP allows us to pre-cache our PWA in the background, we can achieve a sales funnel that goes from Google search to checkout without ever showing a loading indicator or staring at a blank screen. Couple it with a user-friendly PWA and you’ve got a sales funnel as smooth as silk.
Driven by modern web technologies
The technology required to achieve this seamless shopping flow is about to become mainstream. Google introduced Accelerated Mobile Pages in 2015 but has only recently started to encourage it for e-commerce. Progressive Web Apps are made possible by new browser features such as Service Workers and the Push API.
Building a stellar e-commerce experience
Following the previous paragraphs it should come as no surprise that the two primary ingredients for our e-commerce front-end are a PWA and AMP. Here’s what it takes to build these and hook them up.
A high performance front-end framework with SSR capability
To get started, we need a tool to help us build the user interface and deal with client-side logic such as keeping state and handling transitions. In order to serve AMP documents without a lot of additional work, it will need to support Server-Side Rendering. Because a large part of our audience will be on mobile, performance is an important aspect. Luckily there’s tools such as Lighthouse to measure performance and plenty of benchmark apps. Although React is the most popular choice in this space, Preact and Vue are very solid alternatives worth considering. Setting up universal server-side rendering is still very complex. Luckily there’s several frameworks which provide universal server-side rendering out of the box: Next.js for React projects and Nuxt.js for Vue. Both offer significant benefits over a plain React or Vue setup.
Back-end for Front-end (BFF pattern)
A Service Worker to install from AMP
A Service Worker is what allows our app to work offline and enable push notifications. It’s a script that can be installed in the browser and run in the background to cache resources and act on events. To make the transition from Google to our app appear instantly, we can use amp-install-serviceworker to install our Service Worker in the background while the customer is browsing our AMP page. This way we can pre-cache necessary resources for our app in the background so it will load instantly when the customer clicks through to the product detail page. Because the PDP is part of our single-page app, any subsequent page transitions can be instant too.
Attention to detail
Perhaps the most import aspect in building a high quality web experience is attention to detail. There are many aspects to web development which are easily overlooked or discarded because they are “too much work”. These include performance, user experience design and overall look & feel. They are the first casualties of deadlines, budget restrictions and developer laziness. It’s very sad to see a great concept be poorly executed, but in reality that’s what happens. The key is to not settle for a sub-par user experience. It’s better to build half a product with only a few well built features than to build a half-assed one with many poorly executed features. Setting a performance budget is a good way to keep an eye on performance. There’s a whole list of things that we can do to improve it. Of course, performance alone isn’t going to cut it. Consumers expect a polished product, especially on mobile. That means hiring UX designers and performing usability tests. Because we’re targeting many devices, taking a mobile-first approach to interface design and development is highly recommended.
The web is evolving at a rapid pace. Google continues to push the web as a platform. Targeting the web as the primary platform makes a lot of sense for e-commerce, as smartphone users are unlikely to install a native app. New browser capabilities allow us to provide a high-end mobile user experience, while reaping the benefits of the web platform. Luckily, tools have evolved to make adoption of current best practices much easier than it used to be. Nowadays we can offer our customers an e-commerce experience that will not alienate or drive them away, but one that they will love.