Website Use Case Demonstrator

Needing an online solution to showcase new use cases and how the future vehicle interior might look, we came up with a great new experience for our website visitors.

 

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 a perfect UX for us.

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.

With a Vision in place, we 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 demonstrator.

 

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.

 

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.

Each use-case has its own unique UI showing the experience that the driver or passenger will encounter.

To accompany this, there is detail about the domain of the use case and the technical enablers for the feature.

 

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.

You can view the finished results here:

www.cloudmade.com/vision