An interactive use-case asset for CloudMade website
Project challenge
In order to sell-in use cases and show how the future vehicle interior might look, we needed a great new experience for our website visitors.
We began by looking at HMI layouts and trends for vehicle interiors.
Interaction model technology
Inspiration came from a great source. Lamborghini had created a 3d vehicle demonstrator on their site for the Huracan. Investigation showed it used three.js, an open-source 3d web environment.
The user can spin the model and, using a hotspot, interact with the vehicle interior.
It was the perfect UX for us to use for our customers.
Choosing the use-cases
We already had a selection of new use-cases that we wanted to show to our potential customers.
These were reduced and prioritized according to our view of technology and sensor advances in the next few years.
UX/UI design
With a Vision in place, the team wireframed each use-case UX for the relevant occupant, which could be one or multiple screens.
After selecting a UI style and generating a UI kit, each screen was designed to fit into the virtual demonstrator.
3d CAD interior/exterior
A 3d model was generated to show the use-cases in a real vehicle environment. First modelling experiments were in Rhino, then final surfacing in Cinema 4D, for mesh optimization.
The exterior was reduced as much as possible to focus the UX on the interior use-cases.
Interaction via hotspots
The use-case hotspots are dynamic and move with the 3d model, maintaining their relationship to the occupant position. We put ghosted 3d mannequins into the interior, to maintain a sense of scale and realism.
When the hotspot is rolled-over, more information appears and the user can click to go to the UI of the use-case.
Use-case details
Each use-case has its own unique UI showing the experience that the driver or passenger will encounter.
To add more content, an expanding box contains more detail about the domain of the use case and the technical enablers for the feature.
Final asset on corporate website
To accompany the new vision, the website was updated with supporting content to explain our vision of connected car interiors and guide the visitor to the self-explorable 3d asset.
The experience is responsive so that desktop or mobile visitors can explore the asset without compromise.
Finally, the new content was marketed through social channels and email outreach to potential customers, with analytics to see how the experience resonated.