The first step was to create a concept of how the feature of the virtual axle lock of the electric Mercedes-Benz G-Class could look like. In this specific use case it is about the current distribution of the current pressure on each side of the car. Therefore I came up with the two bargraph design mapped on the road.
/// User Interface Design
Next I created a visual prototype of how the element could look like in Adobe Photoshop. After some evaluation I exported the necessary assets for the implementation into the style guide.
/// Design Implementation
The biggest challenge was to integrate the design via QML-code into the style guide. I needed to rotate the assets in 3D to place them in the right position and right perspective and also needed to make the bargraphs adjustable for an easy handover to software.
Result
Here you see the design result in two different drive modes: Sport+ and Off-road. This example showcases the challenge of readability with different backgrounds. That’s why I aimed for a smooth yet strong shadow on the ground. Also I needed to take the limited space in consideration with the tabs on top and the compass between the car and the new graphic.