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.

From Search to Checkout can be done without loading delays.

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.

Google shows the AMP tag for search results that support it.

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.

It’s a common misunderstanding that a Progressive Web App must be powered by a modern client-side UI rendering library. In fact you can still render webpages on the server. All you really need to get a baseline PWA is an app manifest file and a service worker, which is just a tiny bit of JavaScript that can be bolted onto any webpage. However, this will not get anywhere close to offering that app-like feeling that we would like to achieve.

A Progressive Web App can offer rich user interactions. source

In practice, most companies that have deployed a PWA are indeed using a modern UI library such as React. These tools help us build high performance user experiences, including fluent transitions and animations. As a bonus, we can usually run the same code to render HTML on the server. Server-Side Rendering makes sure that search engines and social media sites are able to crawl and access your content. Accelerated Mobile Pages must always be rendered on the server. This simplifies caching and avoids running heavy JavaScript code on a slow device. In effect this means that to combine a PWA with AMP, we have to render our pages both client-side and server-side. To do this efficiently, it makes a lot of sense to run the same code on both sides using Node.js.

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)

AMP documents must be rendered on the server. We could of course do this in any back-end technology, but to be able to reuse interface components between AMP and our PWA, we should be using the same technology. As such we’ll need Node.js to render our React or Preact components on the server. JavaScript on the server has the added benefit that your front-end developers can take ownership and responsibility for their whole product. In addition, many innovations in front-end optimizations are adopted by the Node.js community first, and generally very easy to apply. On top of Node.js, we’ll need a server framework such as Express. We can still use our existing microservices as backing for the Node.js services, so we won’t be moving any important business logic.

You may want to split up your back-end for front-end to create verticals and avoid a monolithic front-end.

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.

Final thoughts

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.