Progressive Web App Primer for Early Adopting Merchants

pg.2

Table of Contents

Progressive Web App Primer for Early Adopting Merchants 3

The Current Limitations of Mobile 4Responsive Web Design 5Native Apps 5

Progressive Web Apps Enable Must Haves of Mobile Experience 7

PWAs are the Future of Mobile Commerce 8Experience Enhancing Power 8Benefits to Merchants 9

Industry is Embracing the Mobile Moment 10

Magento PWA Studio 11

Mobile Sites Reimagined 12The Financial Times Invests in Mobile-First 12Sephora’s Mobile Makeover 13Wyndham Hotels Checks In 13

Consideration for Early Adopters of PWAs 14

Web traffic is rapidly shifting to mobile, expanding to 52 percent worldwide in 2019 according to Forrester Consulting. As mobile influence over digital commerce continues to grow, so have expectations of on-the-go consumers who demand lighting fast, app-like browsing experiences.

While existing technologies have long supported mobile interactions, Progressive Web Apps are poised to radically evolve how consumers utilize their mobile devices. Promising a powerful, app-like browsing experience, this emergent technology is set to blow away the experiential demands of todays’ tech-savvy shopper.

We’ve put together this educational primer to provide an overview of Progressive Web App technology and how it’s being positioned to transform the way consumers – and merchants – conduct business through mobile.

Progressive Web App Primer for Early Adopting Merchants

pg.3

The Current Limitations of MobileThe majority of mobile experiences are enabled by Responsive Web Design (RWD) via your mobile browser or by downloading and installing native app. Both technologies were developed in response to the impracticality of replicating the desktop experience on mobile.

pg.5

Responsive Web DesignResponsive Web Design (RWD) is based on a fluid “one size fits all” grid system. RWD scales itself to the user’s screen, resizing site elements in relation to one another, which allows smoother, contextual browsing.

Experience Limitations of RWD

It’s Just Not DesktopRWD is essentially folding down a desktop site into a condensed form factor for mobile and navigated with the infamous “shrink and squeeze” method. This reliance on maintain a connection to desktop is out of synch with mobile users who have differing expectations, interactions, and intents.

Functionality Without the FrillsThe web-based orientation of RWD is unable to tap smartphone features which enhance the customer experience, such as the camera, microphone, and GPS-based location services.

Same Code, Different PlatformsRWD downloads the same code to display a site on mobile as it would via desktop. This code weight increases mobile load times and can quickly drain data if a dedicated internet connection isn’t available.

Native AppsNative apps are purpose-built smartphone applications installed on a user’s device through an application store such as Apple’s App Store. Their simplified visual orientation and navigation motivate user engagement and they can tap mobile features like the camera, microphone, and GPS, to offer immersive user experiences. Experience Limitations of Native Apps:

Downloads are a DragA main detractor of native apps is their initial time investment to load onto a device. Login into the app store, find the app, download and install the app, login to the app, register to use the app, then finally start using said app. Is it any wonder why most mobile users see native apps as a hassle?

Data DrainsMost native apps require a significant investment of cellular data for download if a dedicated WIFI connection isn’t available. Many apps also consume cellular data when they’re running in the background. For example, Gmail, the calendar, and contacts are synced in background and need “background data” = on, weather apps need background data to update the forecast, etc.

The Current Limitations of Mobile

pg.6

Costly DevelopmentDevelopment and maintenance of a native app can be costly, especially if compatibility across multiple platforms and mobile device types is required. For a smaller start-up the cost is estimated at $50-100k and rise upwards of $500k+ for larger enterprises.

No Guarantee of AcceptanceGetting listed in an app store can be a long process with no assurance your app will be accepted for listing. Even if your app does clear the rigorous review process, there’s no guarantee it will catch on with users or drive traffic to your brand.

Despite improving the consumer mobile experience, Forrester Consulting revealed only 4% of mobile commerce transactions in 2018 came from mobile apps.

Comscore also reports 49% of US smartphone users download zero apps per month, while Quettra reveals 90 days after apps are downloaded they’re almost never used.

Scott Wilson, VP of eCommerce merchandising at United summarizes the native app experience best by saying “Apps are a temporary necessity in the development of better mobile experiences.”

The Current Limitations of Mobile

Progressive Web Apps Enable Must Haves of Mobile ExperienceConsumers are turning to mobile in undeniable numbers, but conversions and revenue are lagging. Mobile web – which accounts for 49% of online traffic – is converting poorly at just 1.7%.

While native apps are expensive to develop and make up for just 5% of online traffic, they’re converting at 2.8%, debunking the theory that screen size is the reason consumers will never transact as much on mobile.

The public is hungry for an app-like experience transcending the limitations of native apps but when will a solution present itself? The good news is a fresh alternative has been quietly making its way into the mainstream the last few years.

pg.8

PWAs are the Future of Mobile Commerce PWAs pair the best of website and mobile app functionality, resolving the major pain points which have harried mobile commerce for so long.

PWAs provide a reliable, fast, and engaging experience proven to boost user engagement, increases conversion rates, and electrify revenue growth.

Experience Enhancing PowerCombining the fluid experience of RWD with an app-like interface, Progressive Web Apps are here to revolutionize mobile commerce:

Inviting InterfacePWA’s deliver only the most essential content to the user, supplemented by smooth animations, fluid scrolling, and intuitive navigation experiences. This “mobile first” visual environment encourages active user engagement and expansive site exploration.

Fast, Responsive BrowsingIf your mobile pages are taking longer than two seconds to load, shoppers are likely taking their business elsewhere. PWAs are engineered so pages load quickly with fast transitions with no funky rendering or page reflows.

The Magic of Service WorkersPWA’s are enabled by Service Workers, a script your browser runs in the background to intercept and handle network requests and store data locally. This allows secure, offline browsing during momentary lapses in network connectivity, lowering dependence on consistent internet connections.

Respectful to Emerging MarketsPWAs are beneficial to individuals living in emerging mobile markets where data is often at a premium. PWAs respect low bandwidth and limited data plans, they avoid heavy upfront data usage associated with an app download, and their functionality is resilient on unreliable networks.

Low Data CommitmentPWA’s use a fraction of mobile data compared to native apps, benefitting individuals with limited data plans. PWA’s also have minimal storage requirements, ensuring you won’t undercut performance on your customers mobile devices.

Ditch the DownloadPWAs are right at the user’s fingertips via any web browser without the need to download or install a separate app before use. Web install banners allow users to seamlessly add your web app to their home screen.

PWAs Enable Must Haves of Mobile Experience

pg.9

No Updates, No ProblemPWAs actively update themselves in real time like a website, eliminating the need for periodic updates from an application store.

PWAs Welcome HereNearly all modern web browsers for iOS and Android support PWAs including Firefox, Chrome, and Safari.

Benefits to MerchantsFrom boosted customer engagement and higher conversions to lowered development costs, early adopting merchants are enjoying the contributions PWAs are making to their bottom line.

Enhanced Customer ExperienceThe app-like layout of PWAs minimizes required touch points, allowing faster browsing and checkout. By streamlining the purchasing process in this way, PWAs can boost shopper engagement, leading to higher conversions and revenue growth.

Increase Average Order ValuePWA layouts and navigation encourage increases in average order value since shoppers can quickly browse products and related merchandise categories. Merchants can thus provide more opportunities for shoppers to add additional items to their cart prior to checkout.

Single Web Codebase for Mobile and Desktop With PWAs a separate desktop solution isn’t required while eliminating the substantial investments of time and resources associated with native app development. This lowers the total cost of ownership and a shorter time to market once development standards are established.

Ability to Attract Top Front-end TalentPWAs are a new frontier in technological innovation which is attracting the talents of qualified developers. UX and front-end developers want to work at the forefront of emerging web technologies and PWAs offer an exciting new avenue for skills acquisition and career development.

Freedom to DeployPWAs enjoy unrestricted, flexible distribution since they don’t need to be listed in an app store. This means freedom from the terms of service and revenue share agreements imposed by these entities.

PWAs Enable Must Haves of Mobile Experience

pg.10

The biggest names in technology are implementing initiatives to transition PWAs into a new mainstream standard for mobile:

• The Microsoft Store is making a growing number of PWA apps available and has defined a set of submission guidelines for developers.• As of July 2018, Google is now prioritizing page speed as a ranking factor in its mobile searches. With their fast performance, PWA-driven sites obviously stand to benefit.• With their release of iOS 11.3, Apple has quietly included support for PWA, expanding opportunities for merchants looking to tap engagement and revenue opportunities with the iOS crowd.

Across the board, globally recognized brands are updating their mobile experiences to meet modern expectations for engagement and performance. The list of mobile commerce innovators is a who’s-who of multinational enterprises, all of whom either have PWAs deployed or currently in development:

Industry is Embracing the Mobile Moment

pg.11

The Magento PWA studio is a dynamic, developer-centric platform allowing Magento Commerce solution partners and UX developers to deliver fast and fluid front-end experiences on mobile devices.

The core features of Magento’s PWA Studio include:• Tools to personalize content and add local preferences.• Build and manage all channels and experiences via one code base, one deployment and app.• Intuitive user experience with innovative commerce and CMS theming.• Purpose-built developer tools for fast prototyping, helpful debugging, rich feedback, and increased productivity.

The Magento approach with PWA Studio through open source on Github will allow development teams to familiarize themselves with additional resources and technology required. Frontend development – often 25% of effort – will be easier with the introduction of real-time updates and guided development from Webpack in PWA Studio.

“PWA Studio will provide developers and merchants with the tools they need to compete and deliver the convenience and utility of a mobile app combined with the searchability and buying experiences they get from their desktop experiences.” Jason Woosley, SVP of Product & Technology at Magento, an Adobe company

Magento PWA Studio

pg.12

Mobile Sites Reimagined

In their July 2017 report “Our Favorite Websites, And How They Did It”, Forrester Consulting profiled several business organizations who reinvented their mobile sites to deliver a more app-like experience.

In each instance, these businesses sawsignificant gains in user engagement and revenue:

The Financial Times Invests in Mobile-FirstWith slow page loads and a visually impaired site layout affecting readership, the Financial Times needed to rework their mobile platform to keep pace with surging web traffic.

The Results: A cleaner site interface reworked into an app-like layout lets users locate their preferred news items faster, with articles now much easier to read. Coupled with faster page load times, user engagement has risen sharply, dramatically boosting ad revenue in the process.

“One of our key metrics was speed. We determined if we made the site just one second faster, it increases engagement by 5%, and would ultimately add millions of dollars to our bottom line due to increased ad views.”Cait O’ Riordan, Chief Product and Information Officer

pg.13

Sephora’s Mobile MakeoverAs the latest Sephora beauty products debut on social media, each release triggers significant spikes in web traffic, straining the capabilities of the beauty chains mobile site.

The Results: Sephora’s mobile experience has transformed into a clean client entry point configured to accommodate unpredictable web traffic. With a focus on product-specific presentation, the app-like interface encourages discovery of new products and enhanced exploration of in-store services.

“The benefit to customers is having better discovery through lightweight engagement.” Lisa Kueffel, VP of Client Experiences

Mobile Sites Reimagined

pg.14

Wyndham Hotels Checks InWith a mobile site defined by a crowded layout and poor navigation, Wyndham hotels initiated a usability overhaul so travelers can quickly and conveniently find accommodations from their mobile devices.

The Results: By reducing site clutter and nonessential elements, travelers can now quickly conduct location-based searches to book hotel accommodations. The introduction of enhanced design elements ensures the mobile experience remains responsive and consistent for users across desktop, mobile, and tablet formats.

“Our mobile website visits have gone from 37% to 58% of all web traffic in the past few years, and it’s 70% on weekends. We’ve done all this work just to get to a level playing field. Now we can start to have some fun with it.” – Barry Goldstein, Executive VP and Chief Marketing Officer

Mobile Sites Reimagined

pg.15

The benefits of PWAS will see early adopters outpacing their competitors as this technology continues its march into the mainstream.

If you’re considering deploying your own PWA, it’s important to assess your business needs and how reinventing your mobile experience with satisfy them.

Is Your Site Due for a Refresh?Walk through your site to see whether it’s ready for a front-end refresh. Does your site readily communicate its purpose? How does the site view across various platforms and browsers? Is your site easy to navigate? Is content presented in a clean, straightforward manner?

Is Traffic Dictating Demand?Your mobile sales and traffic numbers are a key barometer for gauging whether or not to push towards a mobile makeover. If >50% of your web traffic is from mobile or >25% of your online orders already from mobile, you might be ready to graduate to PWA.

Is PWA Development in Your Budget?Does your budget make allowances for you to move forward with development? Overall cost for a PWA with Magento will vary based on time and complexity of your current commerce platform. Over time as more Magento storefronts are created using PWA including Marketplace-ready extensions, the overall cost of development will be significantly reduced.

Can I divert app development budget and/or resources to PWA?If initiating PWA development is a stretch for your budget, take a look at what you’ve got cooking on the stove. If you have a native app currently in development, consider offsetting a portion of its budget and resources towards your PWA instead.

Consideration for Early Adopters of PWAs

About Magento Commerce

Magento, an Adobe company, is a leading provider of cloud commerce innovation to merchants and brands across B2C and B2B industries and was recently named a leader in the 2018 Gartner Magic Quadrant for Digital Commerce. In addition to its flagship digital commerce platform, Magento boasts a strong portfolio of cloud-based omnichannel solutions that empower merchants to successfully integrate digital and physical shopping experiences. Magento is the #1 provider to the Internet Retailer Top 1000, the B2B 300 and the Top 500 Guides for Europe and Latin America. Magento is supported by a vast global network of solution and technology partners, a highly active global developer community and the largest eCommerce marketplace for extensions available for download on the Magento

Marketplace. More information can be found at www.magento.com.