Why Retailers Should Jump on WebAR
Browser-based AR takes the fuss and friction out of shopping in 3D
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.
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
- 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.
- This could easily be extended to show comparable product sizes in the same scene all using very simple 3D assets.
Personalized email marketing campaign
- 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
- 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.
- This example attempts to show how an experience could be created with fairly simple assets i.e. one model textured in multiple ways. It’s silly and fun but relatively low-cost and low-barrier to engagement for the customer.
Personal styling and ‘key looks’
- For brands with more 3D expertise the possibilities are endless and WebAR offers an opportunity to quickly create and test ideas.
- This demo explores the scenario where brands require customers to take multiple different apparel products and imagine what they would look like as an outfit — ie how to wear them together. More often than not the customer’s imagination differs from reality, but with AR brands can create and send photo-realistic true-to-scale complete looks directly to their customer, ready for 3D browsing.
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.
