Honda India 3d Configurator Website Redesign
Published on September 28, 2025
Summary
Artificial Reality had built a platform using Unreal Engine and Pixel Streaming to deliver a photorealistic, real-time 3D car model directly to a user's web browser. The level of detail, from the paint's reflection to the dynamic light simulation, is better than any visualizer in India Market.
The frontend was built with Angular and Bootstrap, communicating with the Unreal Engine instance via WebRTC. While technologically impressive, the user interface (UI) needed a fresh perspective.
Strategy
We also researched competing configurators and found that most relied on a strict, linear user flow. However, we wanted to avoid this rigid "checklist" approach, as we felt it would detract from the immersive quality of the visualizer.
Our design philosophy was to maintain a free-flowing and exploratory experience. This meant empowering the user to interact with any part of the car, in any order they wished, fostering a genuine sense of discovery and personal connection with the vehicle.
-
Simplifing User Interface - The existing interface had many options, but they weren't presented in the most intuitive way.
-
Mobile Responsive - The experience needed to be seamless and enjoyable on a smartphone, not just a scaled-down version of the desktop site.
-
User Engagement - We wanted to transform the experience from a passive viewing to an active, exciting exploration of the car.
1. Simplifing User Interface
My first goal was to declutter the interface by creating a clear hierarchy between major and minor interactions.
Through observation, I noticed a distinct user pattern: people almost always changed the Car Variant and Color before exploring smaller features.
Based on this insight, I redesigned the layout to give these high-frequency actions prominence, making them immediately visible when the visualizer loads.
Furthermore, changing the variant directly impacts the price.
To make this relationship intuitive, the Variant selector and the price summary were redesigned to be closely associated.
Now, when a user selects a different model, the price updates instantly right beside it, providing clear, immediate feedbac
The old color button was getting lost with other icons.
I gave it a unique design and moved all the other options like 'open doors' and 'turn on lights' into one simple dropdown menu.
2. Mobile Responsive
To achieve this, we designed a completely new layout just for mobile. During our research, we noticed a common problem on other configurator websites. The UI menus and buttons took up most of the screen, leaving the car itself in a small box.
Our old design had a similar issue with a large top menu. We decided to flip that idea. Our new mobile layout dedicates the maximum amount of space to the car, with a clean, minimal UI that doesn't get in the way. This makes the experience feel immersive and impressive, even on a small screen.
We designed a completely new layout just for mobile. All the main interactions, including the variant selector and price were moved to a slim header at the top, neatly tucked into dropdowns to save space.
For the customization options, we introduced a horizontally scrolling menu at the bottom of the screen. This allows users to easily swipe through colors and features without the menu ever blocking the view of the car, keeping the vehicle as the unobstructed centerpiece.
Conclusion
This project was a comprehensive experience, covering everything from high-level client presentations and rapid prototyping to hands-on frontend development.
I was responsible for much of the HTML templating in Angular and CSS, which rapidly accelerated my learning of the framework. It was a rewarding challenge that allowed me to wear both the designer and developer hats, confirming my passion for building intuitive interfaces on top of powerful technology.
Further working on this platform we developed Honda Direct Connect