From Search to Checkout without annoying your customers

Gert Hengeveld
Jul 14, 2017 · 7 min read

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

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

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

A high performance front-end framework with SSR capability

Back-end for Front-end (BFF pattern)

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

Attention to detail

Final thoughts

Xebia

Xebia helps organizations getting fit for Digital transformation: Continuous Integration, Agile, speed, quality and customer delight!

Gert Hengeveld

Written by

Enabling Component-Driven Development with @ChromaUI and @Storybookjs.

Xebia

Xebia

Xebia helps organizations getting fit for Digital transformation: Continuous Integration, Agile, speed, quality and customer delight!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade