How to Successfully Add Scanning to your Retail Website

As retailers and shoppers alike adjust to a rapidly changing landscape, new restrictions and shifting priorities, the already blurred lines between physical and digital retail are merging with even greater speed.

Consumers just want an intuitive, engaging and effective experience, whatever channel they are using. For retailers, this means delivering a differentiated and consistent omni-channel experience is more critical than ever – especially with customer loyalty so low.

Barcode scanning-enabled mobile shopping apps are a proven and popular way to blend the physical and digital worlds together. They can power self-scanning experiences in stores, enable people to simply scan loyalty cards with their smartphone or even rapidly re-order something you’ve run out of at home by adding it to an online shopping cart with a quick scan.

But developing and maintaining mobile apps can be expensive and time-consuming – before you even consider the cost of marketing them to drive downloads and repeat usage. This is where web-based scanning becomes an attractive option.

In this guide, we highlight how adding high performance scanning to any web app or e-commerce site is now easy, including:

  • How you can avoid app fatigue, while optimizing your development resources
  • The key considerations of native apps versus web apps
  • Tips for successfully deploying web-based scanning
  • Best practice implementation insights from Scandit

1. App fatigue and the impact on IT

According to a recent McKinsey & Company Report, we have vaulted five years forward in consumer and business digital adoption in a matter of around eight weeks during 2020. Retailers need to ensure their digital capabilities keep pace with customers’ needs – and a key part of this is creating a consistent experience between online channels and physical stores.

To succeed, retailers must offer the right mix of channels and apps to suit customers’ latest shopping preferences, engage with the broadest potential audience and deliver a superior, truly joined up omni-channel experience.

For IT teams, this means balancing practical considerations when considering your channel mix. For example, you must weigh up the time and cost of supporting different functionalities across various mobile apps and e-commerce sites.

Experience versus expense

Customer-facing mobile apps have long been an important element in creating an optimized omni-channel experience. Adding barcode scanning to these retail apps underpins increasingly popular Self-Scanning shopping experiences – especially today where minimizing interactions and going contactless is key.

Developing and maintaining them is essential, but is a serious drain on IT development resources and budget. However, according to research by PYMNTS 77% of consumers keep just five or fewer merchant apps on their mobile phones at any given time, making app fatigue a serious challenge.

But advancements in technology mean you can now add high quality scanning to your website, engaging customers at home, in store and on the move – all without the need for a native app. Powerful web-based scanning helps retailers strike a balance between experience, expense and effort.

So, no app, no problem! Watch enterprise-grade we scanning in action:

2. Native versus Web Apps

Mobile apps and mobile or desktop websites can be used on smartphones and tablets as part of a digital engagement strategy, yet they all offer different experiences. Accurately aligning your engagement strategy, time and resources to how customers really want to interact with your brand is crucial.

Your choice and mix of app types naturally affects how customers engage with you and the features available, including scanning.

Native mobile apps

Since mobile apps are natively developed for a specific operating system (OS), they are totally compatible with the hardware and offer a finer degree of control of a device’s features, e.g. camera, microphone or accelerometer. This means there are more options for functionality, notably:

  • Barcode scanning
  • Augmented reality (AR)
  • Optical Character Recognition (OCR.)

Generally, it’s a more slick and responsive user experience than browsing a mobile website or web app. They also work offline, although some functionalities will require an internet connection and users must update the app when new releases become available.

Websites and web apps

The web app displays a mobile-optimized version of your web or e-commerce site to deliver the best user experience on different devices. Because web apps are accessed over the internet, through a web browser, they aren’t limited to a particular device or OS.

By integrating scanning functionality into your web app, with no app download needed, users simply browse to your website on any camera-enabled smart device and can start scanning.

Previously, there haven’t been solutions available to implement truly enterprise-grade barcode scanning within a web app, but that’s no longer the case. Now you can confidently add high performance scanning to your web app with Scandit – so where do you get started?

3. Five reasons to deploy web-based scanning

1. Reach more customers, with fewer barriers

When deciding your app strategy, do you prioritize reach or engagement? Because web apps don’t need to be downloaded, they are more accessible to a wider customer base. And as they can be easily found via search engines, it encourages customers to use and return to this channel, so increased organic website traffic is another bonus.

As web apps are accessed through a browser, it is hard to store and record customer data. Native apps though, can collect and provide detailed data insight into shopper behaviour, enabling more tailored promotions and offers to be created.

The subsequent loss of customized data insights, versus the data native apps can collect, makes it tougher to implement one-to-one marketing campaigns. Where targeted communications to a focused group of customers are key to your strategy, developing a native app is a smart move. But where reaching the widest group of customers with fewer barriers is the aim, web apps are a good option.

2. Overcome app fatigue
Gift Registration

When considering whether to focus your resources on web apps versus native apps, weigh up the app fatigue factor amongst your customers. Bear in mind that many people are unwilling to install another app every time they shop with a retailer. Key questions to consider when optimizing your time and resources to your customers’ preferences are:

  1. What’s in it for our customers if they download our app?
  2. Will the volume of data collected be valuable enough to offset the smaller pool of customers using it?
  3. Do we have sufficient marketing budget and plans in place to drive up app awareness and adoption?

Ultimately, you have to assess, based on how your customers prefer to interact, whether directing your efforts into a native app is the right option or whether an enhanced experience with scanning on your familiar website might work better for them. With either choice (or in fact using both), a robust barcode scanning engine will prevent mis-scans or errors and avoid an overload of support tickets post-launch.

3. Avoid app update issues

Native apps are generally faster and more convenient to use than web apps, as settings are easily stored and apps are tailored to their specific device platform. However, because customers need to install updates themselves, performance may be impacted if users don’t regularly update the app. This may result in more time spent by employees and IT responding to these perceived issues.

of customers will leave a mobile site if it takes more than three seconds to load. – Think With Google

This is where Progressive Web Apps (hybrids of web and native apps), are being explored by retailers as a way to bridge any experience gap.

But web apps are a great option as an alternative or when users don’t need to interact with you on a regular basis, as they will always access the latest version simply by selecting the web app on your website.

4. An easy way to add scanning to enhance infrequent interactions

Native apps clearly have an important role to play in customer engagement. If your users need complex functionality such as frequent, high volume scanning (e.g. self-scanning for large weekly grocery shops), native apps are a better choice both for usability and availability of advanced features that can deliver enhanced experiences.

For example, in a native app, Scandit’s Augmented Reality (AR) overlays can be used to display real-time information after the scan, such as product details and reviews, on the customer device screen.

Shelf Management

However for a more occasional task or less scan intensive, such as scanning a loyalty card when ordering a product online, enabling customers to scan in the same browser window, with no need to type in the card details for a simpler and speedier experience. In this case, web apps are a good option which helps deliver a more seamless user experience.

5. Speedier and cheaper to develop

Web apps are easy to integrate into any environment, and are generally faster and cheaper to develop and maintain than native apps. Because many retail businesses will have websites in place today, they are a cost-effective way to drive more traffic to the site. Adding web-based barcode scanning functionality enhances the web experience instantly and bumps up sales.

In fact with Scandit, you can add enterprise-grade barcode scanning to your website in just three minutes. Watch how it’s done:

Scandit’s Barcode Scanner SDK for the Web can easily be integrated into any website, web app or eCommerce platform, such as SAP Hybris and Salesforce Commerce Cloud, and configured with just 30 lines of code. As soon as the update goes live, any user, regardless of device or browser type, will be able to scan items the next time they go to your site.

4. Best Practice Implementation insights

Implementing web-based scanning is a simple and cost-effective way to reach more customers and drive up sales. Our local teams of technical engineers and solutions consultants will be happy to guide you through all phases – but in the meantime, here are some best practice implementation insights to consider.

Consider what’s in it for your customers:
A great user experience is everything
SDK for the Web Registration Card

Creating the best user experience is key. Adoption and usage suffers if something goes wrong or the process is difficult. Here are some helpful tips:

  • Add scanning to an existing website or web app at the right point of the customer journey to enhance the experience; it must help shoppers browse, shop and purchase products intuitively and easily.
  • Focus on implementing a website scanning app where it can simplify and speed up customer interactions, like looking-up products, scanning loyalty cards, setting up a gift registry or online product registration.
  • For shopping trips where customers only want a few items or will visit your store infrequently and won’t want to download an app, you can also consider web apps to enable customers to self-scan items in-store and pay via your website, with no need to wait for a cashier or use a mobile app.
Forrester reports that 3 out of 4 customers use smartphones to research products from stores
Test scan performance in real-life conditions

Reliable scanning is paramount. If it doesn’t work on all items, first time, every time, your customers will feel let down and won’t use it again. Your staff will waste time handling queries and complaints and your app will not meet business targets or deliver on the investment of building and maintaining it.

of customers will leave a brand they love after just one negative interaction, SentiSum

Frustrated customers may decide not to purchase those items (smaller average basket size for you), choose to use another retailer (lost sales) or decide not to register their purchased product (loss of customer information). To mitigate these situations:

  • Test any scanning software to ensure it’s fast and accurate in a variety of real-life conditions, such as in bad light, with glare on packaging, with damaged labels, and at challenging angles and distances.
  • Ensure your scanning software supports all barcode symbologies (such as UPC or EAN) on the products in your stores.

Scanning errors also cost retailers time and money to rectify. Scandit’s high-performance browser-based scanning solution provides unmatched speed and accuracy, under any conditions.

Don’t take our word for it, you can check it out for yourself with our demo app.

Also, Scandit’s scanning engine works on any smart device, works on more than 20,000 smart device models including low-end models that lack autofocus, so customers will always have a positive experience. We issue regular software updates, for example when a device manufacturer makes a software change that affects scanning functionality.

Poor quality scanning can cause frustration across the board

If a customer can’t scan a product in store, e.g. while accessing information to make a decision on whether to buy it or not, they’ll put it back on the shelf. If they can’t scan something when trying to reorder online, they might delay or subsequently abandon the purchase entirely.

This will cause major headaches for your IT team, handling support tickets. At the same time, your company will lose revenue through lost sales.

For example, for a retail outlet offering web-based customer self-scanning for occasional shoppers who don’t want to download an app, with 300-500 stores and a basket size of just two items (self-scanned), even a 5% deterioration in scan performance can put >$20M at risk if per store revenue is touching $1M per month.

The scanning engine is, therefore, a critical success factor for any scanning-powered shopping experience. So when it comes to your web app, scanning needs to work perfectly every time, and if it doesn’t the benefits to customers and retailers will not be felt, causing frustration across the board.

See How Easy It Is – Try Out Our SDK for the Web Demos

We built a couple of powerful demos to showcase our javascript library capabilities and give you some ideas on how to add barcode scanning to your website.

web sdk startpage

Starting page for the Web SDK demos.

View Demo

web sdk custom label

Simple and configurable demo that shows how easy it is to capture any label with the Web SDK.

View Demo

web sdk data

Product lookup demo, displaying sample data when scanning a barcode.

View Demo

web sdk settings

Settings demo, letting you choose the UI and symbologies you want.

View Demo