building a virtual reality shopping experience in 1 day
Every 3rd Friday of a month at Sitewards we host the improvement day (aka “Open Friday”) which allows us to work on anything we love to work and explore new technologies.
You might want to read the blog post about why we do this day and why it matters to us or have a look at the official improvement day page.
Today one of the teams decided to experiment with ways to show products in a virtual 3D space aka VR / virtual reality and enable a user to buy these products through an ecommerce system, in this case: Spryker.
VR Shopping: but….why?
Think of a couch. Brick and mortar stores don’t just place couch next to couch. They carefully craft an environment where the object to be sold (couch) is placed before a nice wall, a beautiful table, decorations to let the whole scenery appear as attractive as it could be to increase the conversion and finally sell one (or more) items of this scene. People can walk through the scene, sit down, explore decorations (cross-selling!), see which products go well together.
Exactly this can be done via crafting a virtual scenery everyone can browse with his mobile, desktop or a VR headset. Creating a proof of concept is exactly what we want to achieve during this day. Let’s see how far we get.
Shopping Pins/360° Pictures
A “shopping pin” is an icon which highlights or indicates that you can buy a specific product that you see in the 3D VR space (because not all products you might see in the 3D VR space might be buyable). Shopping pins give the user orientation what they can click on (in better VR apps, you can “click” or interact with products or items just by looking at them or blinking with your eye while looking at them).
For example, electronic market chain “Saturn” was a first mover here, providing a VR experience.
Shopping pins in pictures bring back a feeling we know from classical commerce, going through the streets, looking in the big windows of retailers for inspiration and possibly new pants. Especially 360° pictures are fostering that sensation. Shopping through pictures also breaks with the classical structure of ecommerce shops and opens vast possibilities for design and UX. It is easier to tell a captivating story when we can include the shopping experience into pictures which also are part of the story.
Shopping pins in pictures are an upcoming way of purchasing.
Technical Approach
First we are trying to create a scenery of one of the rooms of our Sitewards office by building it using react 360.
In a second stage we want to add shopping pins and product info in VR.
Third, we connect it to an #ecommerce system like #Spryker.
Let’s see how far we get in 1 day.
To create the scene in VR we needed to take pictures of the scene. We decided to hop into the next electronic market and get a Samsung Gear 360 as a start, which you can do amazing things with.
The process
Basicall we followed the process to init a new project via https://github.com/facebook/react-360 and then copy the example files in it. Afterwards start it with npm start and a local server will spin up.
We used our camera to create a 360 jpg, put it in the demo, added shopping pins and descriptions and linked to the matching products in a fresh Spryker installation.
First Results
We were able to create a VR experience that runs flawlessly on desktop and mobile devices. That means you can discover any part of the room as if you were standing in this room by using a normal browser on a desktop or mobile (no additional plug-ins or apps required).
Here you can explore the room (still without “shopping pins”) as we “just” put our 3D picture from our camera to kuula.co and integrated it below for your convenience to be able to show it here in this article. Welcome to our meeting room!
A mobile device is nowadays usually equipped with sensors that tell itself how and in which direction you are holding and moving the phone, so the experience especially on a mobile devices is pretty impressive. See the following video to get an idea. This time, with one shopping pin (the TV) and with proper redirect to the matching product in a fresh Spryker ecommerce installation.
Credits
Go to the folks at @sitewards and DAVE42 especially Patrick Kubica, Zeno Pensky, Svetlin Kalendzhiev, Nils Woye, Tobias Hartmann
Disclaimer
Please note that this experiment and all results, from buying the camera, to programming, including writing this article, have been done in 1 day. So please excuse brevity, any typos and authentic, no-filter videos or other errors.
Über Sitewards
Sitewards ist ein führendes Dienstleistungsunternehmen für die Konzeption und Umsetzung innovativer E-Commerce-Plattformen und marktbezogener Digitalisierungsaktivitäten. Das Portfolio umfasst die Bereiche Strategieberatung, User Experience Design sowie Softwareentwicklung und -betrieb.
1997 gegründet verfügt Sitewards über umfangreiche Erfahrungen aus über 200 Kundenprojekten. An den Standorten Frankfurt am Main, Leipzig und Karlsruhe verfolgen erfahrene Teams aus Beratern, UX Designern und Entwicklern täglich das Ziel, den digitalen Wandel unserer Kunden zu beschleunigen und langfristige Partnerschaften aufzubauen.
Als zertifizierter Umsetzungspartner von Magento und Spryker erfüllen wir die höchsten Qualitätsstandards bei der Realisierung zukunftsweisender E-Commerce-Projekte. Dabei binden wir Magento und Spryker auch nahtlos an komplexe Backendsysteme, wie z.B. SAP ERP und SAP S/4 HANA an.
Mit der Marke DAVE42 ist Sitewards Firstmover und ausgewiesener Spezialist im Bereich „Conversational Interfaces“ und führender Sprachtechnologien wie z.B. Amazon Alexa, Google Assistant & Co.
Weitere Details zu Sitewards & DAVE42 und Referenzprojekte finden Sie auf www.sitewards.com und www.dave42.com.
