From Search to Checkout without annoying your customers

Gert Hengeveld
Jul 14, 2017 · 7 min read

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.

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.

A Progressive Web App can offer rich user interactions. source

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.

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!