About the Customer:
Embitel’s Adobe Experience Manager (AEM) experts have developed a unique digital experience solution that can be used by automotive marketing teams on their websites.
The solution enables website admins to render 3D vehicle models on webpages, without coding. The components in the rendered vehicle models can be configured easily by website users. This improves user experience on webpages, and enables users to see a customised view of vehicles based on their preferences, before purchase.
The solution can be readily used by automotive website admins/marketing teams. It can also be customised for other industries.
Business Challenges:
Our solution is capable of addressing the following business challenges that automotive marketing teams may face:
- Creating an Immersive Online Experience: Automotive marketing teams may struggle to provide an engaging, interactive product experience on their websites, beyond static images and 2D configurations.
- Reducing Customer Ambiguity: Customers/dealers may find it hard to visualize vehicle options and configurations, leading to confusion and potential lost sales.
- Slow Loading Times of 3D Models: If the website uses large 3D model files, it can slow down the website, affecting user experience and engagement.
- Lack of Customization Options for Website Admins: Website admins may need an easier way to manage and update vehicle/product 3D models and configurations without requiring coding expertise.
Embitel’s Solution:
We developed a comprehensive solution using Adobe Experience Manager (AEM), enabling automotive marketing teams to create, render, and display 3D models of vehicles with real-time configurators. Our solution focuses on these key areas:
- Two-Part Web Page Solution:
- Home Page: The home page showcases basic vehicle information, with options to customize the vehicle model (e.g., body colour, accessories) presented in the sidebar.
- Configurator Page: This page offers an interactive 3D model of the vehicle, allowing users to rotate the bus in 360 degrees and explore various customisation options.
- 3D Model Optimisation: We optimised the 3D models to ensure they load quickly and display smoothly on the website. By reducing file sizes while maintaining high-quality resolution, we ensured that the 3D models were web-ready, providing a seamless user experience.
- Component Configurator Integration: We integrated AEM’s Component Configurator feature to allow users to interact with the 3D models dynamically. The configurator allows users to customize different parts of the vehicle, such as:
- Exterior Customisations: Users can easily change changing the vehicle’s body colour, add/remove side mirrors, and customise accessories like mud flaps and front cameras.
- Interior Customisations: Users get a view of the vehicle interiors as well. They can adjust seat fabric, change vehicle interior colours, and other internal features. This interaction provides users with a detailed and personalized view of the vehicle, reducing ambiguity before purchase and enhancing their online experience.
- Flexible and Customisable Platform for Admins: Using the Component Configurator, the website admin can modify the vehicle’s options without needing to edit code. This allows the automotive marketing team to quickly adapt to new vehicle features and ensure the website stays up-to-date.
Here is a quick demo of our AEM solution, showcasing the 3D vehicle model with component configurator:
Embitel Impact:
By modernizing its digital storefront, integrating AI-powered personalization, and optimizing backend operations, the brand successfully transformed its ecommerce ecosystem, along with:
- Enhanced Customer Engagement: Customer interaction with 3D models, can increase website engagement and boost conversion rates.
- Increased Clarity: Real-time customisation reduces confusion and leads to more informed decisions and higher customer satisfaction.
- Time and Cost Savings: Marketing teams/website admins can manage updates easily without a developer’s help, saving time and resources.
- Competitive Edge: Interactive 3D experiences set the brand apart, building customer loyalty and market differentiation.
- Faster Website Performance: Optimised 3D models in AEM can improve page load times (when compared to traditional 3D models), ensuring a smooth user experience across devices.
Tools and Technologies:
- ReactJS
- three.js
- GLTFLoader
- React-three/drei
- AEM for UI customisation & DAM
