A How-to Guide: 3 Approaches to Delivering a Commerce Progressive Web App

Google is driving the development of modern web technologies like Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP) to help retailers gain a competitive advantage through better, faster online experiences. However, implementing a successful commerce PWA is easier said than done. You probably already know what a PWA is and why you need one, so we put together the Enterprise Guide to Delivering Commerce PWAs to cover HOW to deliver a high-performing, enterprise PWA and unlock agility at the same time.

There are 3 different approaches to delivering front-end experiences, as outlined by Gartner Research below. As retailers and brands plan to build commerce PWAs, they should evaluate which approach aligns best with their strategic business objectives.

The Three Approaches to Commerce Architecture

The Three Approaches to Commerce Architecture

Source: Gartner (Refreshed 14 May 2018, Published 28 September 2017) The Three Approaches to Digital Commerce Platform Architecture and How to Choose Among Them, Refreshed 14 May 2018, Published 28 September 2017. Figure 1. The Three Approaches to Commerce Architecture https://www.gartner.com/document/3809365

Commerce-led: The ecommerce platform is the front-end experience.

Experience-led: The web content management system (CMS) is the front-end experience.

API-led: A custom front-end, vertically integrated reference storefront, or a Front-end as a Service integrate with APIs to equally expose both the ecommerce platform and CMS.

The Current State: Commerce-Led & Experience-Led Approaches

Most retailers today manage their digital experiences with a commerce-led or experience-led approach. In other words, the front-end experience is built within either the CMS or ecommerce platform, so it’s tightly coupled to the backend.

The Perks of Delivering a Mobile PWA in this Environment

Delivering a PWA in this environment would mean focusing on the mobile and tablet experience, and continuing to deliver the desktop experience from the CMS or ecommerce platform. A PWA would use existing APIs or convert HTML into an API to pull content from the underlying CMS or ecommerce platform into a PWA experience on mobile and tablet. The advantage with this approach is that you can get a PWA to market very quickly on your highest traffic channel.

Commerce-Led and Experience-Led

Both these approaches are a good fit for retailers who want to create a better mobile experience and generate a quick revenue boost. However, there are two things to be conscious of: future-proofing and agility.

Front-End Investments Aren’t Future-Proofed

Most retailers replatform every 3-5 years, and with a tightly coupled approach, they will lose any previous front-end investments. The desktop experience wouldn’t be future-proofed with a commerce-led or experience-led approach, however the mobile and tablet PWA experience could be with the right API strategy.

Teams Can’t be Agile

The fast rate at which new web technology emerges and customer expectations change demands retailers focus on agility. Unfortunately, a coupled architecture inhibits frequent testing and deployments at scale because a user experience change requires a heavy redeploy of the CMS or ecommerce platform.

Some may perceive an experience-led approach as more agile because it enables fast changes to certain parts of the experience – copy, images, video – but retailers still can’t make UX changes quickly or easily. The goal should be to unlock the entire team to make larger experience changes beyond just copy and content.

When to Choose a Commerce-Led or Experience-Led Approach to Delivering PWAs

If your organization’s goal is to quickly deliver a better mobile experience and the associated revenue boost, then delivering a PWA in a commerce or experience-led environment might be the right fit for you. This can also be a great first step to moving towards an API-led approach down the road.

AdvantagesDisadvantages
  • Fast time to market
  • Quick mobile revenue boost
  • Better experience on highest traffic channel
  • Good first step towards API-led approach
  • Doesn’t fully unlock agility
  • Front-end investments not future-proofed
  • Duplicate front-end codebases to manage

If agility and future-proofing are important to your organization, then you should evaluate an API-led approach. This would unlock agility across your organization and ensure you don’t need to start from scratch when the next-generation of web technology emerges or business needs dictate the replacement of a backend system.

The Future: API-Led Approach

Retailers have complicated IT ecosystems – layers of systems from different vendors with legacies spanning years. To provide that customer-first experience, retailers must connect all of these systems to a new API-driven front-end that equally exposes both the ecommerce platform and the CMS. An API-led approach enables a customer-first strategy.

API-Led

Unlock Agility and Future-Proof Investments

Using an API-led approach provides a clean separation between the customer-facing experience and all the backend business logic to unlock agility across the organization.

The separation between the front-end and backend:

  • Future-proofs front-end investments: You won’t have to throw out the front-end when when it comes time to replatform because it won’t be coupled to the backend.
  • Enables frequent UX testing and deployments: The deployments are smaller and less risky, which allows you to experiment often and drive incremental value quickly.
  • Facilitates a mature agile organization: Front-end teams are empowered to make UX changes without having to go back to a central IT team.

“Retailers and brands shouldn’t be delivering PWAs the same way they’ve delivered front-end experiences in the past.”

Daniel An

Daniel An, Global Product Lead of Mobile Web at Google

APIs Lead to High-Performing PWAs

The cornerstone of PWAs is speed. They significantly lower the time it takes for a shopper to complete critical tasks like finding an item or completing a purchase – and the faster a shopper can complete a purchase, the more likely they are to buy. Google research found that as page load time goes from 1 second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.

Not all PWAs are created equal when it comes to speed. An API-led approach defers and reduces the total amount of data being sent to the device to ensure the PWA is as fast as possible. For example, a Product Listing Page may load only the first 10 products, and load the remainder as you scroll down – this is the same experience you would expect out of a native app (think of Facebook or Instagram). APIs are critical to supporting this level of granularity.

“When it comes to the user experience, performance is king. If the experience isn’t fast, no other user experience features will matter. This is why, in a few years’ time, no one will build commerce sites without using PWA technology.”

Andrew Mottaz

Andrew Mottaz, Sr. Director of Interactive Strategy, Astound Commerce

Get a Complete Front-End PWA

An API-led approach allows retailers to deliver a complete front-end PWA across mobile, tablet, and desktop. This means retailers only have to maintain one front-end codebase, shoppers will get a fast and engaging experience no matter the channel they shop on, and there will be a corresponding revenue boost across all channels.

When to Choose an API-Led Approach to Delivering PWAs

If your priority is creating a better, faster customer experience, becoming more agile, and future-proofing front-end investments, then an API-led approach is probably the ideal approach for your business.

AdvantagesDisadvantages
  • Unlocks agility across the organization
  • Future-proofs front-end investments
  • Single front-end codebase to maintain
  • Revenue boost across all ecommerce channels
  • Fastest PWA experience
    • Slower time to market (ranges depending on the solution)

The time to market with this approach would vary significantly depending on which API-led solution you decide to go with: building a custom front-end from scratch, utilizing a vertically integrated reference storefront, or leveraging a Front-end as a Service. Get the Enterprise Guide to Delivering Commerce PWAs to dive into what to consider with respect to the shopper experience, integrations management, and development and operations for each API-led solution.

Get the Report

Leave a Reply

avatar
  Subscribe  
Notify of
Resource ad

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.

Related Articles