BMW i3/i8

Vehicle HMI

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.

production-highlight
bmw-i3-gallery
i8press-image

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

DCC038_KOMBI_v37_4-1
1
DCC038_KOMBI_v37_5
2
DCC038_KOMBI_v37_6
3
DCC038_KOMBI_v37_7
4
DCC038_KOMBI_v37_9
5
DCC038_KOMBI_v37_8
6

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.

bmwi8_prod6
i8-inst-eco
Eco-Pro Mode
i8-inst-comfort
Comfort Mode
i8-inst-sport
Sport Mode

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.

i8-cluster-animatic
bmw-i-002

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

bmwi-concept-mainmenu
i3-conceptcoupe-center21

CONTENT WITH PREVIEW SECTION

DCC038_CID_v37.2519
i3-conceptcoupe-center8

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.

P90080177
batteryrange
CID-COMFORT-Mode

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

i3-conceptcoupe-inst4
i3-conceptcoupe-inst12
i3-conceptcoupe-inst7
i3-conceptcoupe-inst11

CENTRAL DISPLAY UI

i3-conceptcoupe-center2
i3-conceptcoupe-center23
i3-conceptcoupe-center13
i3-conceptcoupe-center14
i3-conceptcoupe-center16
i3-conceptcoupe-center20
bmw-i-003
bmw-i-005

© 2024 jyoteen + respective holders

Connect with me on these other services:

View