eCommerce UX: responsive websites, native apps and PWA

Article topics

1. What is responsive web design?
2. What is a native app?
3. What is a progressive web application?
4. PWA vs. responsive website
5. Native app vs. PWA
6. Native app or PWA?
7. Native app vs. PWA at a glance
8. Final thought

Is your eCommerce business making the most of mobile? Outstanding mobile shopping UX starts with continuity of experience between point-and-click and touchscreen.

Mobile devices have revolutionised the way we shop, from the beginning of online shopping in the late 1990s, to the mobile phone becoming the preferred means of shopping and the rise of omnichannel shopping experiences.

This article will explore three methods that developers use to offer consumers satisfying shopping experiences on their mobile devices: responsive websites, native apps and progressive web applications (PWA).

Each of these three solutions for rendering webstores to mobile devices offers consumers different user experiences (UX) and each has its positive and negative elements. But before we delve into that, let’s define in more detail what we mean by: responsive website, native app and PWA.

What is responsive web design?

Responsive websites are created using a cascading style sheet (CSS) approach for the separation of presentation and content. This means that they are optimised for a variety of devices in terms of page size and layout. A responsive website will look different when used on either a desktop or laptop, or a tablet or phone.

Responsive design adapts the page for the device on which it is rendered. In terms of UX, there are two main reasons why responsive design is desirable.

Firstly, the screen size. The difference in size between a desktop computer screen and phone screen is obvious and presents challenges for developers to create page elements that function well on both large and small screens—UIs such as buttons, carousels, forms etc. A larger screen allows more UI elements on a page and with more detail. A mobile screen must render the same functionality in a much simpler way.

The second reason is the way in which consumers interact with your webstore: point-and-click or touchscreen. For outstanding UX on either type of device, these two very different UIs must be taken into account, offering larger and simpler page elements on mobile.

Responsive webstores offer consumers optimum UX regardless of the device that they are using to shop. And this in turn reduces potential friction in shopping journeys caused by webstores rendering poorly on smaller touchscreens.

What is a native app?

A native app is a software application that is installed onto a mobile device to give consumers mobile-specific shopping experiences. Unlike a responsive website, native apps must be downloaded onto a mobile device from app stores such as Google Play and the Apple App Store. Native apps are platform specific, meaning that they are developed for either: iOS or Android devices.

Because native apps are developed exclusively for mobile devices and for specific OS, they can offer consumers high performance and higher value UX, making shopping journeys easier to navigate and reducing friction on the path to purchase.

For example, native apps can use a device’s functionality to enhance UX, such as camera, GPS for geolocation personalisation, Bluetooth for additional connectivity, and push notifications for marketing and customer service communications, even when the app isn’t open. A responsive webstore cannot perform any of these useful operations because native apps are integrated with a consumer’s phone or tablet.

What is a progressive web application?

PWAs look and feel similar to native apps, offering a higher level of UX than responsive webstores that are not designed for ‘mobile first’. When a PWA renders on a desktop or laptop, it looks and behaves like a desktop website. When it renders on a phone or tablet the PWA looks and behaves, from a UX perspective, just like a native app. PWAs run in-browser, so unlike native apps consumers do not need to download anything to their device.

One of the reasons that PWAs are being developed by eCommerce brands and businesses is the dominance of mobile shopping. 59% of online shopping in the UK is done using phones and tablets, with that figure set to rise to more than 70% by 2023.

Rather than potentially forcing consumers to download a native app for every webstore that they want to use, which creates friction, lowers engagement and reduces consumer choice, PWA offers UX experiences of native apps without those restrictions.

PWAs are attractive to eCommerce brands and businesses because they are cheaper to develop, with faster time to market. PWAs are built and enhanced with APIs for native-like reliability, while being optimised for any device by using a single codebase.

PWA vs. responsive website

The truth is, while a responsive webstore approach offers brands and businesses a way to ensure that their existing webstore renders well enough on mobile devices for consumers to use, it’s not an ideal solution.

Today webstores are developed with a mobile first ethos. That means instead of designing a webstore for desktop and laptop and then adapting it for mobile, webstores are designed for mobile first and then adapted for desktop and laptop, negating the need for them to be responsive.

Native app vs. PWA

Native app features

Faster

Native app code is within the app itself on consumers’ devices. Therefore, native apps can offer faster and smoother UX compared to PWA, which must render from your webstore’s server. And native apps can function without internet connectivity using application caching, meaning consumers can access information about your products and services offline.

NFC capability

NFC, or Near Field Communications, is a native app feature that lets consumers make contactless payments using their device. Apple Pay and Google Pay are popular NFC payment methods. PWAs do not have NFC capability.

Bluetooth

Native apps give omnichannel retailers the opportunity to use ‘beacons’, such as Google Beacons, to leverage proximity marketing: instore mapping, user guides, cross-selling and more.

Wake lock

Mobile devices will, after a specified time period, go to sleep to conserve battery power. Because native apps have access to a mobile device’s functionality, they are able to override this so that a device can remain active for as long as the native app is open.

Security

Native apps have an added layer of security because they must adhere to app store data security standards. This can reassure consumers who have security concerns. If an app doesn’t meet the app store’s guidelines, it will not be allowed in the store.

PWA features

Installation

Native apps require consumers to find and download the app from the App Store or Google Play. This takes time and effort, potentially causing friction in shopping journeys. PWAs behave as websites, so no downloading required. In fact, most consumers won’t realise (or care) that they are using a PWA—they will just experience improved mobile UX.

Findability

Because PWAs operate in-browser, they are as easy to find as any other website via its URL. This also means that links can be shared, with product or personalised landing pages improving engagement and UX.

Development time

PWA development is faster than native app development. PWAs only need one version, whereas native apps require a different version for each OS and must be submitted to and accepted by an app store. This not only means longer time to market—it also requires more developers and greater cost.

Conversion

PWAs have higher conversion rates compared to native apps. One study revealed that PWAs have up to 36% higher conversion. PWAs provide the UX of native apps without having to find and download, without taking up device storage space, and giving consumers website browsing experiences, such as opening multiple pages for product comparisons and sharing content.

Updates

PWAs are kept up to date for maintenance, security and latest features without the consumer having to do anything—updates load from the server. Native apps must be updated manually after consumers have been informed that an update is available, risking the chance that the update will be missed.

Native app or PWA?

This is the billion-dollar question. The answer is, it depends on what your business goals are. If you do not have a webstore and security is paramount to your business, then a native app could be the better option because of easier mobile device verification. If you’re offering consumers a service that requires the use of a mobile device’s functionality (camera, Bluetooth etc.), then a native app will likely be a better fit.

If you are an eCommerce business with a webstore, you will be particularly concerned with super-low friction UX, combined with findability and SEO, consumer engagement and customer acquisition, so PWA would be better.

To decide whether native app or PWA is best for your brand and business it pays to do some research into consumer preferences. Take the example of AliExpress, from a study conducted by Divante:

AliExpress is a marketplace that offers products to international online buyers, with upwards of 665 million in monthly traffic. Their mobile sales were growing faster than their desktop webstore. But they couldn’t create engaging consumer experiences on the web that was as fast as their native app. They wanted to use the mobile web as a platform to transition non-app users to app users. The problem was that not everyone downloaded their app, and getting users to install and re-engage with it was costly. So AliExpress decided to build a cross-browser PWA to combine the best of their native app with the reach of the web.

The results was:

• 104% more new users across all browsers
• 82% increase in iOS conversion rate
• 2x more pages visited per session per user across all browsers
• 74% increase in time spent per session across all browsers

50% of smartphone users are more likely to use a company’s mobile site when browsing or shopping because they don’t want to download an app.

Here are some examples of companies that use PWA:

• Twitter
• Uber
• Instagram
• Financial Times
• Forbes
• Lancôme
• Debenhams

Native app vs. PWA at a glance:

Final thought

It’s unlikely that PWAs will ever completely replace native apps. But for eCommerce PWA offers consumers a higher level of UX. PWAs do not require the consumer to do anything while shopping on their mobile device that they would not usually do on a desktop or laptop. This gives continuity of experience, which is what omnichannel eCommerce is all about. Compared with native apps, PWAs give eCommerce brands and businesses more options in terms of reach, agility and flexibility.

Is your webstore making the most of mobile? If you would like to know more about how we can help your business offer consumers improved mobile UX then get in touch with one of our eCommerce development experts today for a chat.