The business values of Spartacus frontend implementation

Spartacus is a revolutionary solution for SAP Commerce Cloud. A Spartacus frontend implementation allows you to quickly create your own branded JavaScript-based storefront and share your products with the world in a way that suits your business. 

As a replacement for Accelerator templates, Spartacus is a strategic way forward for maintaining a customizable storefront with SAP Commerce Cloud. In this article, we’re going to focus on the business benefits of a Spartacus frontend implementation. Most importantly, we’ll be showing how the world has gone mobile, how and why PWA is changing the way websites are built, how a SAP Spartacus frontend implementation taps into both trends to deliver the best possible frontend experiences to clients.

Changes in mobile commerce

A few years ago, we were talking about desktop and mobile Internet. Websites had their versions for desktop and mobile devices. The events of recent years have changed the attitude of technical and business people to the issue of mobile. In fact, companies that are not taking a mobile-first approach are already behind the curve.

SAP Spartacus comes with a mobile-friendly theme that is easily customizable. It connects with SAP Commerce (formerly known as Hybris) via Omni Commerce Connect (OCC) REST API which makes it truly omnichannel. 

Mobile Commerce is a fact

2014 was the year when the number of global users using mobile devices eclipsed those on desktop.

In 2015, Chinese consumers made more purchases through mobile phones than on computers—this number is now above 70% and the same goes for Indonesia, South Korea, and Thailand.

Globally, in the last months of 2017, more than 40% of all online retail sales happened on mobile phones and that number has seen steady and sustained growth. 45% of total eCommerce spending will be mobile commerce in 2020.

Mobile is a growth driver

Mobile is also the first source of growth for traditional retail. 72% of in-store shoppers also use mobile. People augmenting their in-store experiences with online shopping are always doing so with the telephone in their hand, not the desktop in their house. Mobile is the most effective channel for driving growth through enhanced customer experiences.

Mobile traffic is more powerful than before

This field has changed dramatically. Google is now a mobile-first company. In 2018, they released Google Mobile-First Indexing which promotes mobile-friendly and fast websites.  

Mobile content is prioritized in indexing, meaning that Google will index the mobile version of a site before the same desktop content.

Social Media is now a sales channel

The fastest-growing Social Media destinations are mobile-first. WeChat, Instagram, Facebook, and Messenger are all traffic sources that can bring mobile-first users to your website. For some eCommerce companies, 70-80% of their traffic comes from Instagram and, what is more, they converted! These apps are extremely eCommerce friendly; for example, 30% of Instagram users bought something that they had seen first on the platform. Social Media platforms are not only a mobile-friendly way to drive people to stores where they can make purchases, Social Commerce embeds the buying journey straight into the Social Media platform, so users can purchase from your store without even leaving Facebook.

Mobile is closing the gap between online and offline

The “mobile gap” has been described at length in other articles but, for those who don’t know what it is, the dilemma is a simple one: people have always spent more time looking at stores on mobile devices than on desktops but conversion rates are much lower. This is driven by concerns about security, the difficulty of completing checkouts on a mobile keypad, and low usage of mobile banking apps.

But things are changing. People still “window shop” on mobile but they are starting to convert. In Australia, for example, two-thirds of people browse online and 77% of these users have made an impulse purchase in the process. The mobile gap still exists, as people using desktop devices have stronger purchase intent, but it is closing. 

Omnichannel experiences drive loyalty

Mobile commerce lies at the heart of an omnichannel retail strategy. Shoppers have integrated smartphones into their product research at every phase of the customer life cycle, from discovery to price checking in-store. And the value is tangible; the more channels customers use, the more valuable they are to the retailer. In addition to having bigger shopping baskets, omnichannel shoppers are also more loyal to brands.

Physical shops benefit from mobile

48% of U.S. adults look online for product availability before they buy in a store. 80% of shoppers use their mobile phones to either compare prices, look up product reviews, or find store locations.

Find out everything you need to know about how to increase mobile conversion rates and why SAP Spartacus is designed with multiple devices in mind.

Read our in-depth guide: Mobile Conversion Rate Optimization

SAP Spartacus frontend implementation utilizes the full potential of the mobile channel

When thinking about mobile, you might automatically think about building native mobile apps. Most eCommerce sites have dealt with mobile this way—at least until recently. Native apps provide an excellent user experience but they have some huge drawbacks that can be deal-breakers for eCommerce decision-makers.

Users don’t want to install apps

Native apps provide an excellent user experience but with some major limitations. Apps need to be downloaded which creates the first obstacle to engaging customers. When they are downloaded, many are never used. 70-80% of people never use the app again 72 hours after installation and most native apps are uninstalled within a week. 

There is also an essential paradox about having a mobile app for your e-store: it is only attractive to frequent buyers and loyal customers… and they would shop at your store even without an application. Essentially, an app takes time, money, and resources to build for a very marginal net gain.

Responsive Web Design is not enough

Responsive Web Design means that sites automatically calibrate to the device on which they are being used. The content will look different on mobile to a desktop. This is important for viewing but does not take into account that the user has totally different behavior depending on the device they are using. It is not enough to resize the content, sites need to reimagine the content to fit specific experiences.

Going beyond Responsive Web Design, Spartacus supports something called Adaptive Design. This allows the Storefront not only to look better on mobile devices but also to behave better. Our demo Spartacus frontend implementation is a good example of Adaptive Design. Spartacus Capybara (source code) adapts to the device which is being used, so you can see a major difference between desktop and mobile versions. Crucially, in the mobile design, the navigation is at the bottom so that it is reachable with the thumb (you can read more about this concept here). 

New standard for mobile commerce – Spartacus PWA

As these challenges of creating effective mobile experience began to become more pressing concerns for eCommerce, a new technology appeared in 2015 that provides many of the answers. Progressive Web Apps (PWA) is a new standard for building mobile websites and apps. 

What exactly is a PWA?

If we are going to start with a definition, we may as well choose the one from Google, the originators of PWAs.

Progressive Web Apps (PWAs) are user experiences that have the reach of the web, and are:

- Reliable – Load instantly and never show the downasaur (the dinosaur you see in Chrome when your Internet connection is down), even in uncertain network conditions.
- Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging – Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

So, a PWA is a web application based on standard web technologies with the addition of the newest Javascript features that make you feel as though you’re using a native Android or iOS app. Now, let’s have a closer look at how they work.

PWA applications save downloaded files and data on the user’s device in a cache. Thanks to this, the data is delivered immediately from the user’s device after next queries no matter how fast is your Internet connection (or even whether you have it). It’s possible thanks to a service worker, which is a kind of gate between our application and the server. When it detects the page or data is already saved in the device’s cache, it delivers the data to the user directly from the cache and, in the meantime, synchronizes it with the server data.

PWA engages as native apps – they are installable, attract users with push notifications and offer an immersive full-screen experience. This last feature is possible thanks to the so-called Web App Manifest – a simple JSON file that tells the browser about your web application and how it should behave when it is ‘installed’ on the user’s mobile device or desktop.

From a technical point of view, PWA is not a single thing that you can turn on and off. It’s rather a checklist with aspects that enhance the user experience. SAP Spartacus frontent implementation supports most of these and clearly states in the documentation that there is a plan in place to add more and more PWA support:

“Spartacus is on a journey to be fully compliant with the Progressive Web Application (PWA) checklist. We aim to add support for all major features of a PWA-enabled storefront, to offer the best possible customer experience regardless of device or location.”

Spartacus documentation

The most important features of PWA compared to native apps:

Business benefits of Progressive Web Apps 

Progressive Web Apps has clear and measurable business results. It’s unrealistic to say that the age of native apps is over, as games and applications still work well in native form. However, it is clear that eCommerce has found native apps to be limiting and has mostly moved on to something that covers more bases for both businesses and end users. There are a number of positive outcomes:

Decrease Cost of User Acquisition (CAC)

Mobile apps created with the PWA standard can be installed directly from the website, without forcing the user to visit the App Store or Google Play. With the PWA, you don’t have to pay any middleman to distribute your app.

Progressive Web Apps are much lighter than classic native apps, thus the app installation process is much faster. Users appreciate this, as a smartphone’s storage and speed are some of the most important factors for them. 

Increase marketing ROI

With the use of PWA technology, you create only one website that is presented to the user across multiple touchpoints: on desktop and mobile browsers, as well as a multiplatform mobile app. So instead of building a desktop website with RWD, an Android app, and then an iOS app, you build only one app for all devices. This decreases the cost of development and future maintenance.

Recover control over the app’s new releases

Synchronizing native mobile apps with marketing efforts is extremely difficult e for marketers. The publishing process in the app marketplace is entirely dependent on Apple and Google. Marketers aren’t aware when, or even if, the app will be published. The same problem occurs with app updates.

Apart from marketplace restrictions, marketers are also dependent on users’ actions. Users can refuse or simply forget to update your app and keep using the outdated version.

A PWA solves both issues. Users download it directly from your website where you’re in charge of the publishing process, and then they update automatically as a background process, so the app is always up to date.

Build loyalty among website clients

With a PWA, you can add native-app functionalities to your website. The crucial features are dedicated to mobile users and include an “install the app” pop-up, a home screen icon for the app, and push notifications. These tools help to engage your clients, make them more aware of the brand, and build loyalty.

Collect more relevant data

After enabling a PWA, you can analyze the installation and usage of your mobile-sites just as you can with native apps.

Improve Google rankings

Google is pushing the PWA standard and with Mobile-First Indexing. This actually means that your PWA website will be ranked higher even if the end user is using the desktop version of the search engine.

Decrease bounce rate

The average mobile website loads in 19 seconds. A significant percentage of visitors actually get frustrated and leave the site before they ever see the content. Long loading times damage many business KPIs.

Websites implemented as PWAs usually load in 2-3 seconds, which is much faster than traditional websites and keeps users engaged. All the statistics show that any company that switches to PWA immediately sees a drop in bounce rate.

Improve mobile campaigns

Mobile ads may be an important part of your brand or product campaigns. They can generate huge website traffic to your website, especially on social media, but are ineffective if they are not optimized for mobile devices. By building the website with the PWA standard, you can be sure that mobile ad traffic will be seamlessly transferred to your website and converted.

Help users discover and share content

The content from the PWA can be indexed by Google. Users browsing for your brand will be able to find not only the PWA app itself in the browser but also specific content from the app.

What’s more, that content can be bookmarked and shared directly from the app.

SAP is fully aware of these benefits, which is why they started developing Spartacus in 2017 and recently released version 2.0. There is an increasing number of SAP Commerce implementations already in use and more businesses are starting to turn to a Spartacus frontend implementation instead of the Accelerator templates.

The ROI of PWA

Global shoppers struggle with a huge discrepancy between time spent on mobile devices and mobile conversion rates. Despite the higher engagement on mobile, users more often buy on the desktop. The so-called “mobile gap” can be as high as 49%. To fill in this gap, retailers should run conversion rate optimization in their eCommerce; this includes improvement of TTI and overall speed of the webpage, providing consistent UX on all touchpoints, and taking full advantage of smartphone features. Many of these can be easily improved with Progressive Web Apps.

From all the PWA case studies we’ve seen, the average conversion rate increase for mobile users was 36%. For a retailer making $5m from mobile annually, the revenue from a PWA will bring an additional $1.8m a year. Even with a conservative margin of 25%, this means $450K of additional pure profit after a year.

Is it more effective to buy or build a PWA?

With every new tech, there is always the question: should we build it or buy it? There are factors to take into account for both scenarios.

Time and cost of PWA implementation

Building a PWA from scratch will take between about 3,400 working hours (for a small app) and 9,000 work hours (based upon a dedicated project we’ve done). This can be converted to an estimated cost between $400K and $1m. A Spartacus frontend implementation will, therefore, be at least 50% cheaper and time-to-market will also be halved. 

The economic comparison is important but PWA implementation can bring unexpected design challenges that must also be taken into account:

• A PWA requires front-end developers with experience in building a complex app
• A PWA requires designers who understand native apps but can design for web-apps as well
• The frontend app is a fully independent app which means you need to address issues like security, payment integrations, push notifications, service workers, etc.
• Caching strategies for a PWA are quite complex and some know-how will probably be needed to figure out the best strategy
• If there is no one team in the organization that can handle this; you need to find the right people, train them, and teach them how to work together. You will probably need to mix some team members from the native-apps team with some other people from the web-app team
• Backwards compatibility (i.e. having a PWA up and running with all the browsers down to IE10) can be hard and requires a lot of QA
• eCommerce features aren’t as basic as they might seem. Taxes, prices, promotion rules, stock info sync, etc can be time-consuming and always require domain knowledge

Conclusion

Progressive Web Apps are the new standard that is replacing native apps, improving search engine ranking, and creating multi-device user experiences. More generally, end users—who once only completed transactions on desktops or in physical stores—are starting to trust mobile commerce and make the most of omnichannel, multi-device shopping. These are trends that are moving fast and are not going to change. The future will only see more mobile shopping and more PWA. 

A Spartacus frontend implementation taps into the significant changes to the way people interact with online stores. If you want to find out more, you can join our OpenSAP course, ‘An Introduction to Spartacus’, which starts on 30 September and has already attracted over 2,500 enrollments. If your business is already interested in Spartacus frontend implementation, you can find out more about our range of services at https://divante.com/spartacus