Enabling Augmented reality on an eCommerce Store

Roles & Responsibilities

Introduction

Scapic was founded to evangelize XR content on the internet. And when I joined Scapic, we were a consumer-facing company trying to build a no-code tool to create Virtual Reality & Augmented Reality Experience. We were supposed to be a Canva for Virtual Reality and Augmented Reality.
We successfully built a No Code, drag, and drop editor to design Virtual Reality experiences on the web.
‍
As the industry moved forward, VR for general consumers saw a dip. There were two significant reasons - Number one, virtual reality headsets were clunky & big, and number two, the headsets were expensive.
‍
After this, we focused our efforts on building a No Code, drag, and drop editor to create Augmented reality experiences on the web. People can access AR via smartphone camera; therefore, it was easy for people to adopt and use Augmented Reality. AR Creator was out in the open; now, it was time to observe the user behaviour. Our hypothesis was people would use this editor for storytelling, education, presentation to delight the general audience; therefore, our feature set also catered to that.
‍
But our user data-informed us, enabling AR and 3D on the web is something e-commerce folks are most interested in showcasing the products on their online stores, which meant we had to make another pivot.
‍
Through this case study, I'll show you how we made the transition from a B2C product to a B2B2C product.

Problem

From groceries to furniture, it's almost natural for us to purchase some or all of these items on an online shopping platform, no matter what the item. We say goodbye to the bygone era of the yesteryears when purchasing an item required to go to a physical store. With new technologies changing the digital shopping experience, consumer purchase behaviour has also undergone extensive modification.
‍
Since 1995 when Jeff Bezos launched Amazon, people have always purchased things from the internet via an image or a video. But with the advent of new categories like home decor, furniture, and home electronics, it is imperative that when a user is about to purchase something, they want to know if the furniture will fit in their home or how it will look in their home.
‍
‍Augmented Reality is a perfect use case here as it gives the user information of size & context before the user completes the purchase.I have covered this topic extensively in this article.
‍
We had two significant problems to solve:
‍
• Way for eCommerce customer to experience the product in 3D and in Augmented Reality.
• A new no code editor so that e-commerce store owner can easily make an experience and quickly embed it on their website

In this case study, I will be exploring the second problem.

Metrics to achieve

1) If the user understands WebGL, it ideally takes a day or two to make an AR experience. With the help of the editor, the AR experience should be live in under 10 minutes.

2) 30 Paying SaaS Customers by the end of a quarter (Year End aim was 1 Million ARR)

3) Positive Net Promoter Score (30-50)

4) Gathering statistics to understand the value of AR and 3D and if it is leading to more conversions and reducing product returns.

Process

01.
Research

We started gathering the user data on the existing editor(AR Creator) to understand what is working for the user and what new additions are required.

02.
Specification

After gathering the user data, we defined features granularly for the new AR editor catering to eCommerce store needs.

03.
User Flow

We worked on the user journey and wireframes to decide on the user flow and get feedback earlier.

04.
High Fidelity

After a solid understanding of what we are going to build, we designed an aesthetically pleasing editor to receive final-design approval from stakeholders.

Specification & User flow stages were happening synchronously as the team was running on tight deadlines.

Index

Insights

Old User Journey

Ideal Customer Persona

Market Research Analysis

Customer interviews

Most of the users don't have 3D models

We knew that most people would not have 3D models; that's why we had put a plethora of 3D models and templates on the editor so that the user can design a meaningful experience. But people who were mainly sharing the experience with large audiences were the ones with their 3D model.

Users facing problems manipulating objects in the 3D environment

When there were multiple objects in the scene, users were facing problems moving around objects in the 3D environment. They were especially confused with the depth and size as moving an object in the z-direction looked like size was reduced, but in reality, only the object was moving in the z-direction.

Low completion Rate: Users weren't sharing the experiences after logging in

People experienced in using 3D tools were finding it easy to use the tool

People who had experience working in 3D environments found it easy to navigate and customize 3D objects and ultimately share the AR link with their friends.

Most interests for the AR & 3D were shown by Homedecor, furniture & home electronics online stores.

When a user is about to purchase something, they want to know if the furniture will look good in their home or fit in their home. Augmented Reality solves the problem of size and context, which directly ties to increasing conversions and reduced returns.
The global online shopping market size is predicted to hit 4 trillion in 2020 (53% of the world population). In the US alone, it is predicted 300 million online shoppers in 2023 (91% of the entire country's population). AR will be a necessity for people to buy products online.

AR & 3D embed was our main product. Not the no-code tool.

This was a hard pill to swallow as we aimed to become Canva for AR & VR creation. But the early signs of Product-Market Fit we received were from eCommerce folks, which meant we were a B2B2C company now concentrating on helping online stores convert more customers with AR ready product visualizations.

We had identified three pressing problems to tackle

• How to make the 3D product creation process easier and accessible for online store stakeholders?
• How will a customer of the online store experience the product in 3D and ultimately in AR?
• How e-commerce stores can easily add, monitor & manage the 3D & AR embed.
In this case study, I will be covering how did we solve the third problem. The other two problems I will cover in separate case studies.

Focus on the user and all else will follow.

Old Vs New Editor

Problem Statement: How e-commerce stores can easily add, monitor & manage the 3D & AR embed.

Uploading the 3D model became the main focus

To ease the user in the tool, fun themes for storytelling replaced generic eCommerce objects.
We gave users a way to contact us if they did not have a 3D model.

Fitt’s Law

Fitts' law states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target.

We removed the addition of text, media, extra 3d objects, and effects. Online stores were first and foremost interested in showcasing the product as realistic as possible rather than customizing or enhancing the 3D model.

Online stores required only one 3D model per experience; therefore, we removed the manipulation of 3D objects in the 360 space. We only allowed the rotation of the scene. (Insight 2: Users facing problems manipulating objects in the 3D environment)

New Features

Many new features were added to improve the editor after analyzing the user insights.

We identified three ways for online stores to showcase their products in AR and 3D.

360 Player for Product Display Page (Included AR too)

Increase average cart values and aid customer confidence on your PDP

Widget/Button for the Landing Page (Included AR too)

The perfect place to show the star product

Augmented Reality Link

We offered AR Link to compliment the products image if the online store wasn't looking for a significant change on the landing page but still wanted its user to check their products in AR

In a different case study, I will go deeper into the design decisions which were taken to improve all of these offerings for the end-user.

Principles of building an editor

While cooking we have ingredients like Spices, Condiments, Sauces, Vegetable, Cooking Oil to cook on the Pan, after food is cooked it is served.

Here, Ingredients are the tools to cook the food, Pan is the workspace to put all the ingredients together and the act of serving food is the act of sharing.

Any Editor/maker/builder in this world in real life or on your computer will have a toolbar, workspace and a way to share.

There is a method to choosing what goes in the toolbar to deciding where to put the toolbar. I have covered the method in this case study

Basic Editing Flow for the new Editor

1. Customize

2. Add Hotspot

3. Add Animation

Customising 360° Player

HDR background is generally used to change the lighting in the 3D scenes, and these backgrounds give realistic lightings to the 3D model.

Product dimensions are helpful to tell the size of the product.

Button colour of view in your space button

Customising Widget

All the customizations present on 360° Player will stay

Theme: User could toggle between Light Mode & Dark Mode

Scape Description: User can input the Description of the showcased product

CTA Button & Link: User can change text of the button and redirect user to a desired link

Product Video: User can add a Product Video link

Customising Button

User can customize the colour of the button.

User can change the HDR as it also affects how the object looks in Augmented Reality.

Autoplaying the 3D Model

This feature acts like play feature on the youtube video. If turned on, the 3D model will start loading as soon as the target Product Page URL is hit. If turned off button will start showing up on the thumbnail of the product.
The user can choose the starting thumbnail from the 3D model or upload a thumbnail.

Insight: Compared to an image 3D model takes time to load; therefore, we allowed the online stores to choose a thumbnail on the 3D viewer to show their product in the best light.

Easy Embedding

We made embedding as easy as embedding a YouTube Video. We also gave a preview of how the embeds will look.

Essentials for Customer Retention: Brand Management, Analytics, Embed Management, Pricing

I am not covering the flows for essentials for customer Retention. Are you curious to know the full flow of the Editor?

Schedule Call

Outcomes & Results

The highlight for me was discovering the user. We created a UX Research wing which led to us shifting our focus from Consumer VR and AR Creation Editor to an AR and 3D creation specifically for eCommerce.

We had more than 50+ clients using the editor to manage their 3D embeds. The use case and product turned out to be strong enough that we were acquired by Flipkart (Part of Walmart)

NPS score of the product was 64

Team

As a lead User Experience designer, I was in charge of User Researching, designing the User Flow, and Information Architecture.

I worked with two very talented designers who were there to analyze each and every design decision.

This was a very robust project UI was taken up by all the designers. We had a Design System in place to keep the design language cohesive

Next Case Study

3D Technology, Augmented Reality, 3D Technology, No Code

A Website Builder for WebGL based websites

Coding a simple website is hard but coding a website with interactive 3D elements is harder. We wanted to build a drag and drop editor to build these powerful experiences easily.

Read Case Study

Click