Why Retailers Should Jump on WebAR

Gwan Yip
Gwan Yip
Sep 26 · 6 min read

Browser-based AR takes the fuss and friction out of shopping in 3D

Image courtesy Daniel Beauchamp.

Thus far Augmented Reality (AR) adoption within the retail industry has been somewhat slow, apart from a handful of examples like IKEA Place. According to a Gartner survey, 46% of retailers plan to deploy either AR or VR solutions by 2020. Yet a report released by WBR Insights finds that 52% of retailers admit they’re not prepared to support the next wave of technologies like AI, Chatbots and AR — the main reasons being budget (64%), lack of internal resources (55%) and lack of executive buy-in (42%).

These numbers paint a picture of widespread intent — nearly half of retailers by 2020 — combined with a broad awareness of the obstacles to implementing these new technologies. Having personally pitched and worked on AR projects with retailers for the past two years, I can confirm that the above concerns are all real challenges that need to be overcome.

And yet for AR there’s a great solution that very few are taking advantage of at this point — it’s called WebAR.

Why WebAR?

Let’s first define WebAR. Simply put, it’s the ability to create AR experiences that run in the browser on a modern smartphone without the need to download an app — thus removing a major obstacle to user adoption.

I know from firsthand experience that merely uttering the word “app” to many retailers will send them running out the door. It wasn’t this way a few years ago; during the app gold rush, there was a prevailing sentiment that every brand had to have an app. Unfortunately these apps often ended up costing hundreds of thousands of dollars and taking many months to develop. And after launch, retailers had to spend money on marketing to drive downloads of an app that was used once and never again. As a result, the tide shifted and brands are now much more reluctant to pursue developing apps.

Now let’s talk about budget and lack of resources. There is a widely held — and somewhat accurate — perception that AR projects require a team of highly skilled professionals that aren’t cheap. Because there are still only a small number of industry use cases that demonstrate clear ROI, it’s understandable that getting executive buy-in can be challenging. Part of the problem is that most AR projects depend on building an app, in order to access lower level technology on the device. And app development is generally complex and resource-intensive.

Which brings us to WebAR. Since WebAR content and experiences are delivered via the web, no app download is required — and a lot of the cost of both creating and marketing these experiences is removed as well. Assuming a retailer has the capability to create 3D models of their products (more on this below), deploying AR content can be as easy as creating a web page.

How to get up and running

There are several options for getting up and running with WebAR. In our experience, Apple’s AR Quick Look is the most straightforward and turnkey solution today. AR Quick Look was announced during WWDC 2018 and is an encapsulated WebAR feature built into Safari for iPhone 6s (and above) running iOS12 and higher. The one limitation of AR Quick Look is that it requires 3D content conforming with Apple’s file standard, USDZ, which is only fully supported in the Apple ecosystem.

A number of retailers are already using AR Quick Look, and many of them are on Shopify. My favorite is from Pure Cycles.

Implementation of AR Quick Look requires one line of HTML code and a 3D model in USDZ format. Here is an example of an AR Quick Look integration on a website:

<a rel="ar" href="/model.usdz">
<img src="/img.jpg" alt="Web AR Image" />
</a>

Once you’ve added that to your web page, Safari takes care of the rest.

Here’s an example of Shopify’s implementation — they cover it in detail here.

A Shopify store enabled with AR Quick Look, a form of WebAR

Outside of the Apple ecosystem, the industry uses the glTF file format. Google’s <model-viewer> web component is the best way to get started using glTF for AR product display. At the time of writing, <model-viewer>’s status is “In Development”, albeit on a fast track release schedule. Here is the example markup for including <model-viewer> on a website.

<model-viewer
alt="A 3D model of an astronaut."
src="Astronaut.gltf"
ios-src="Astronaut.usdz"
ar
>
<!-- Make sure to include links to model-viewer.js and model-viewer-legacy.js on the HTML page -->

Examples of other use cases

Here are some concepts my company put together that show other possible use cases:

Real world size demonstration

Made with AR Quick Look
  • This example shows how using a simple cube that is the same dimension as a product can quickly give the customer a sense of real world size.

Personalized email marketing campaign

Made with AR Quick Look
  • This example shows how retailers can offer targeted AR experiences and conversions based on customer purchasing history, directing them to ‘add on’ products.

Content campaigns

Made with AR Quick Look
  • To understand how we ‘engage and delight’ customers we need to just start creating content. As we head into the holiday season there are endless ways for retailers to play and test ideas through Web AR that also give them the opportunity to stand out from the crowd.

Personal styling and ‘key looks’

Made with Google’s <model-viewer>
  • For brands with more 3D expertise the possibilities are endless and WebAR offers an opportunity to quickly create and test ideas.

The Near Future of WebAR

WebAR is an extremely powerful technology that will continue to play an important role in the XR landscape, especially with 5G on the horizon to enable fast delivery of highly complex 3D models. The above examples are just the beginning of what’s possible.

But there are challenges to deploying retail AR at scale, even with WebAR. One of the biggest ones is that products need to be represented by 3D assets — which means an entirely new production process for most retailers. This is covered in two previous NFR posts: The Virtual Product Catalog and 3D Transformation of Your Digital Product Catalog. As both pieces articulate, many retailers have already started the process of digitizing their product catalogs — and this points to AR becoming an expected element of the shopping experience in the near future.

There is also the reality of competing standards (USDZ and glTF), which at a minimum could lead to developer confusion and worse, fragmentation of content, where some websites work on one platform and not others. But such hurdles are nothing new to web developers, and these will likely shake out over time.

On the consumer side, some education is required in order for customers to understand how to use AR shopping experiences. IKEA, Amazon and others have been paving the way, making consumers more comfortable with using the camera and interacting with 3D objects to explore products.

All of this will continue to evolve rapidly, and the opportunity WebAR gives to the retail industry to test, play and explore in a low-risk low-cost manner is why we recommend retailers get started with this technology today.

Near Future of Retail

Exploring the leading edge of retail as the digital-physical convergence unfolds: AI/ML, VR/AR, voice, IoT, digital spaces. Sharing what we see and why it matters, and channelling our collective wisdom into practical guidance for those with a vested interest in this near future.

Thanks to Tony Parisi and Neil Redding

Gwan Yip

Written by

Gwan Yip

CEO and Co-Founder at Code & Craft

Near Future of Retail

Exploring the leading edge of retail as the digital-physical convergence unfolds: AI/ML, VR/AR, voice, IoT, digital spaces. Sharing what we see and why it matters, and channelling our collective wisdom into practical guidance for those with a vested interest in this near future.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade