Designing Connected Experiences
bmw-i3-concept-coupe-2012-widescreen-07.jpg

BMWi3 UI

 

BMW i3

2016 BMW i3

2016 BMW i3

At Designworks in Thousand Oaks, CA I worked on a team of 6 designers to provide in-car digital experience for brands in the BMW group. Our team was asked to work on the Central Infotainment Display (CID) and Digital Instrument Cluster for the BMW i3 and i8 electric vehicles. These screens house the instrument cluster, battery information, diagnostics, infotainment, navigation, and other features. Our team worked collaboratively on all aspects of the visual design, but specifically, I was responsible for the 3d transitions and menu elements. 

Digital Instrument Cluster and Infotainment Display

Digital Instrument Cluster and Infotainment Display

A Sense of space

This UI was to be built on iD4++ framework common to all current model BMWs, but this time it would render with a real-time '3d' render environment. This would be the first in-car UI from BMW to feature menu elements that animate in virtual 3d space, giving the user a true sense of space an depth throughout the experience. 

Original 3d Mockup

Original 3d Mockup

This provided many design opportunities , but the introduction of visual perspective did not come without major challenges.  While many components would be rendered in 3d, the menus themselves would render in 2d orthogonal planes so as to keep content in consistent locations. Seeing the same UI through two different 'lenses' imultaneously (perspective and orthogonal) would prove to be the greatest design challenge in the project.

 

 
'2d' View (Orthagonal)

'2d' View (Orthagonal)

'3d' View - Perspectival

'3d' View - Perspectival

 

 

Working with our development team, I produced the 3d content in 3d Studio Max which was then translated into Unreal real-time render environment. To align the 3d content with the 2d content visually, many 'tweaks' were added into the construction of the 3d file in order to erase the effects of perspective where appropriate. As shown below, without these tweaks in place, 3d elements would appear drastically different at different parts of the screen. 

 

 
i3 screens-03.png
 

 

Once a method was established, these tweaks were applied to dozens of unique screens.  Beyond the 3d menu states, I also worked on content like the charging screens, turn-by-turn navigation, charging screen, and the instrument cluster.  Almost all of this content found its way into the final UI in production currently.

Split Screen

Split Screen

Digital Instrument Cluster

Digital Instrument Cluster

Navigation / Turn-by-Turn

Navigation / Turn-by-Turn

Charging Menu

Charging Menu