Attacking Pixels - Adam Robinson

H&B Space & Range Planning Tech

React Three Fiber VR WebXR

Background

Retail space planning is an important aspect of the retail industry that involves designing and organizing the physical space of a retail store to optimize customer experience and sales. With the advancements in Virtual Reality (VR) technology, retailers can now leverage its potential to enhance the retail space planning process and more. Over the last few years I’ve been building software for space and range management at Holland & Barrett, a UK based, international health and wellness retailer. My primary focus has been leading the developement on a microspace planning tool codenamed Ziggy built with React Three Fiber. I’ve carried out experiments at Holland & Barrett around VR intergration using WebXR in both the microspace and macrospace planning domains and I’ll give some of my insights here…

Holland & Barrett Tech Conference 2021

Christmas Tech Conference 2021 - Demonstrating handtracking and placing SKUs on shelves using a Quest 2

Micro & Macro Space Explained

Within retail space planning there are primarily two space scales to consider micro & macro. Microspace planning refers to the detailed planning and optimization of the smaller areas within a retail store, such as the aisles, bays, shelves, and displays. The goal of microspace planning is to ensure that the layout and placement of products are optimized to maximize sales and customer satisfaction. Microspace planning takes into account factors such as performance, size, shape and placement of the products, the placement of signage and promotions. These generated plans are refered to as planograms.

Holland & Barrett Tech Conference 2021

Example Microspace Block - Built in Ziggy Tool

On the other hand, macrospace planning refers to the broader planning and optimization of the overall physical space of a retail store. The goal of macrospace planning is to create an effective and efficient layout comprised of the microspace elements (planograms), that maximizes sales. Macrospace planning takes into account factors such as the size and shape of the store, region, customer traffic through the store, the placement of aisles and catagories, and the location of entrances and exits.

In commercially available, macrospace planning software packages, the primary means of assigning planograms to a specific area of a store is accheived by assiging key ID’s of planograms to a birds eye view view of a store, where the shelving units sit. A UX problem exists here in tools which lack a 3D represetation of the store as while assigning a key to a rectangle on a floorplan you can quickly lose context of what the features of that planogram are, as these planograms may have been designed weeks or months in advance. You could have you’re microspace planogramming tool open and flick through planogram ID’s one by one but you still lack the context of how that planogram will look against other planograms in the store… without some mental gymnastics. This is why I belive it makes sence to have your microspace and macrospace tools coupled and for them to have been built with a shared 3D first approach.

Holland & Barrett Tech Conference 2021

Micro in Macro - Microspace (Yellow), Macrospace (Green)

Both microspace and macrospace planning are critical to the success of a retail operation. By optimizing the placement and layout of products, retailers can create an attractive and efficient shopping experience for customers, which can lead to increased sales and customer loyalty. Effective microspace planning can also help retailers to reduce costs by minimizing waste and optimizing inventory levels.

Virtual Reality in Microspace Retail Planning

TLDR; It looks cool, but it’s exhausting (Macro is far more compelling!)

In December 2021 I carried out my first foray into VR for a demonstration at Holland & Barrett’s christmas tech conference, while Ziggy was at it’s early stages of development. This made for a pretty exciting demo for future Human-computer interaction (HCI) however for the practical reality of being used in a micro space planning tool I was less convinced.

With VR you have the benifits of 1:1 scale but for this application that’s a major drawback. As to pick and place a product from one bay to the next you have to physically walk or lean to it, or when moving a SKU from a higher shelf to a lower one you have to duck and crouch. To go through the process of designing an entire bay layout you would feel like you’ve completed an aerobics class… this may be desirable for the standing desk & treadmill crowd 😃 but it’s slow and inefficient from a business standpoint.

Handtracking on the Oculus Quest 2 in Dec 2021 was also flakey! (this has likely improved with software updates in the last year and a half but I’ve not revisisted it yet) In order to trigger an interaction event with handtracking you need to perform a pinch gesture for the Quest headset to interpret, while creating a claw shape with your hand however this reduces the outward facing cameras points of reference for your hand and could result in loss of orientation or the selection itself.

Using the controllers as inputs was more consistent and felt overall more precise.

The last point I’d like to mention on for this use case is, when in a VR setting and you’re holding an item at arms length, with your feet planted and you move the item left or right it’s rotation in 3D space is going to follow your center point (imagine the hour hand on a clock going from 12 to 2). If you’re intention is to move items along a shelf edge this can’t be a 1:1 translation. You can can get aroud this by locking the objects rotation and fixing its Z axis positioning but then you’ve broken the immersion as that object will now get further away from your gripping hand as you turn, while sticking within its space confines.

Holland & Barrett Tech Conference 2021

For comparison here’s the speed in Ziggy of doing similar tasks with a mouse and keyboard, much faster and more precise.

So far I may be sounding rather critical towards VR but that’s not my intention. I think this technology is amazing, but you should always critically evaluate whether a technology is suitable for a particular task, and in a macro setting I belive that’s where VR really shines… so let’s get into it!

Virtual Reality in Macrospace Retail Planning

With a 3D environment adapted to VR, you can create a 1:1 scale, realistic representation of the store, allowing you to visualise it from all angles, walk through it, and explore it in real-time. This level of immersion is fantastic for retailers as it enables them to make truly informed decisions with full context, about the placement of products, catagories, signage and marketing material, resulting in optimal customer flow and engagement. Additionally, this provides a valuable communication tool for stakeholders to visualise and evaluate the store design, resulting in improved collaboration and decision-making. Imagine having the ability to see the current or future state of any retail location without having to put boots on the ground.

Intrersting Use Cases for VR

The Digital Twinning Concept

Digital twinning refers to the process of creating a virtual replica of a physical object, system, or process using data and digital technologies such as sensors, cloud computing, and machine learning. This digital twin can be used for various purposes such as testing, simulation, monitoring, and optimization.

A 1:1 represetation of a physical location, which you can stand in and interact with is this concept realised and then some!

  • Intergrated with sensor data for customer traffic flow you could walk the flow of your customers.
  • Intergrated with sales and inventory data you could in theory visualise the live state of on floor inventory and account for shelf gaps

Benifits of Building VR Macrospace Software for the Web

Building software for the web with VR in mind, opposed to traditional desktop software packages allows for the leverage of modern browser API’s such as WebXR. WebXR is the standard for accessing virtual reality and augmented reality (AR) software via a web browser, in a way which is agnostic of the device used, such as the HTC Vive, Oculus Rift, Oculus Quest, Google Cardboard, HoloLens, Magic Leap or Open Source Virtual Reality headsets. This is important in a landscape where the hardware is evolving rapidly. It’s also nice to have piece of mind that the WebXR interface will keep parity with developments in AR, as it’s only a matter of time when consumer grade AR hits the market (with rumours Apple are going to release their own device in later in 2023).

Web-based applications also offer several advantages over traditional desktop software packages. Firstly, web-based applications are much easier to access, as they can be accessed through a web browser on any device with an internet connection, and run nativly, eliminating the need to install software and have it licenced to individual machines, increasing the usefulness of the software cross domain within the buisiness.

Conclusion

In conclusion, VR technology has the potential to greatly enhance the retail space planning process. By providing a realistic and immersive experience, retailers can optimize the store layout, enhance the shopping experience for customers, and increase sales. As VR technology continues to advance, we can expect to see more and more retailers incorporate it into their retail space planning and store design strategies.