Overview

Following the BMW i3 and i8 concept showing at Geneva Motor Show in 2009, the series production i3 and i8 were introduced in 2013. Between my work on the concept vehicle HMIs, our Designworks team continued the design work for the production version of the vehicles. I worked on the design for the i8 instrument cluster and the center display screen for both vehicles.

i8 Driver Display

The i8 concept's driver display featured graphic dials that morphed based on driving modes, a 3D navigation map and other features, not available with traditional analog instrumentation. A major challenge, however, was needing to create a functional design that communicated  variable nature of the hybrid powertrain. The car could be driven in several drive modes which included pure electric, a hybrid mode with electric and combustion combined, or in sport driving mode, where the internal combustion engine power was boosted by electric motors for added power.

DRIVE MODE TRANSITION

To remain true to BMW brand language and support the transitional positioning of analog to digital, we opted for a 2.5D solution to the instrument graphics. Due to regulations at the time and hardware limitations, we were not able to create drastic morphing of the instrument graphics. The compromise allowed us to retain a three dimensional stacking of graphical elements that would still morph when toggling drive modes between Eco-Sport, Comfort and Sport.

ANIMATIONS

We deconstructed the instrument cluster gauge into graphic components in order to create animations from its kit of parts. The stylized linear elements animated in 3D space to form startup sequences, show change during drive mode transitions and  indicate charging processes.

Center Display

The center display UI also needed to evolve from the concept stage to series production. The i3 and the i8 would share this center display UX and UI and it's primary input would come from the iDrive controller. The information architecture was centered around a 2D mental model and function on the X and Y axis. Like the driver display, we introduced three dimensional elements into the UI as a forward step from simple 2D visuals.

MAIN MENU LIST

CONTENT WITH PREVIEW SECTION

EV RANGE

An additional feature that we developed was showing the user the range possible on electric charge based on the drive mode. The feature used dynamic animation  superimposed on the map that was calculated by data provided by the vehicle. It indicated how far the vehicle would travel and provided assurance to the range available beyond simple numbers.

Output

Before the series production began, BMW showcased the close to production iDrive UX/UI in the i3 Concept Coupe. We created a narrated trip that illustrated typical driver use of the i3. Some features we highlighted were phone connectivity, media, trip planning, navigation including POI searches and EV range. 

FINAL INSTRUMENT CLUSTER

CENTRAL DISPLAY UI

© 2024 jyoteen + respective holders

Email:  jyoteen@gmail.com