ENHANCING ONLINE SHOPPING EXPERIENCE
A B2B Solution for E-Commerce
3D & AR PLATFORM
BACKGROUND
Harman always had a big issue regarding the product return specially with JBL brand. To solve the issue and elevate customers' online shopping experience, Harman marketing team decided to integrate 3D models of their products on their website to help visitors inspect them from different angles in hope of reducing the number of returns. Marketing team used a 3rd party platform and service to achieve this goal. However, the results were not satisfying. Not only the service did not have expected impact, but also raised some serious questions among customers and stakeholders:
-
Customers usually skip the 3D catalog after a couple tries. We realized this could be related to the long loading time of the model by observing our users.
-
The quality and precision of the models were so low that it created confusion among customers and hurt brand image.
-
Current platform misses some important features such as annotations, dimensions, etc. Dimension are specially very important for portable speakers since it impact user's decision makings.
-
Current platform is very costly
ASK
We have been reached out with the following asks:
Improve quality of 3d assets without increasing the loading time
A platform to upload and manage the assets and check the analytics
Integrating assets on all Harman websites
UNDERSTANDING THE NEED
Collaborating with the marketing team to understand the current process and their real need.
A GAME CHANGER INSIGHT
Based on our internal research, 59% of the customers return their product because either they don't understand the scale of them, or they think the products don't fit well with their set and space.
OUR SOLUTION
What if we could integrate an AR mode to the 3D catalog of the products to help users visualize them better in their space.
CHECKING HOW OTHERS ARE DOING IT
We did a complete research on leaders in this section, scheduling meetings and going through process to gather information regarding, process, pricing, terminology, etc.
INTERACTIVE ASSET CREATION
STEP 1. Research and Analysis
Analysis scalable methods of asset production:
STEP 2. Choosing the Right Platform
Analyzing different platforms (Google Model Viewer has been chosen) to load the assets on and get familiar with the limits:
STEP 3. Asset Creation Test Run
We chose JBL Flip 5 to do an asset creation test run to make sure our process works and we can meet the expectations. The main goal was to achieve better quality with the same 3d file size, considering interactive models and Google model viewer limitations:
Produced by us
(Screenshot from Model Viewer)
Produced by Competitor
(Screenshot from Old JBL Website)
Produced by us
(Screenshot from Model Viewer)
Product Photos
(Screenshot Old JBL Website)
STEP 4. Creating the Model and File Structure
Working with lead developer to make assets compatible with our platform in the best possible way:
-
Defining a compatible structure between platform and asset features such as parts and materials
-
Creating a guideline for naming
-
Creating a folder structure that makes it easier for user to upload the products
-
Creating and developing "code based" and "texture based" concepts:
-
Code based assets: all the textures UVs are the same and only colors are different
-
Texture based assets: There are some differences in texture UVs among SKUs
-
Dividing "Code Based" and "Texture Based" models gave us a huge advantage in loading speed and saved us a lot of costs. For "Code based" assets, as customer changes the SKU of the product on website (e.g. changing red JBL Flip 5 to Blue JBL Flip) , platform only calls for the codes and textures and does not reload whole model.
Considering that more than 95% of Harman products are categorized as "Code Based". The impact on loading speed and cost was massive.
STEP 5. Scaling Up
Creating Style-guide and instruct a group of designers to scale asset creation:
CREATING THE PLATFORM
STEP 1. Information Architecture
STEP 2. Wireframe
STEP 3. A/B Testing
Testing different flows and variations to find the most suitable solution:
Automatically recognizing model textures
VS
Manually adding textures
STEP 4. Design System and UI Components
Creating a design system based on Harman visual brand langauge.
STEP 5. Final UI
Final screens based on design system.
WEBSITE INTEGRATION
STEP 1. Analysis
We started with analyzing current JBL website and the flow user should go through interact with model and view it in AR mode:
STEP 2. Wireframe
Creating wireframe for both desktop and mobile versions:
RESULT
The platform made a splash among marketing team and was very well received by all regions. Not only we have received more orders by different regions from Harman, but also we have been reached by external clients as well. Our sales team have been asked to market and sell the platform as a Harman service to external clients.
