Back
ROLE
Research, Product Design, UX/UI Design,
EXPERTISE
Research
Product Design
UX/UI Design
Interaction Design
YEAR
A case study outlining my personal project to redesign the BMW vehicle's screens, aiming to improve the user experience while maintaining their minimalist aesthetic.
Overview
In this personal project, I overhauled the screens in a BMW equipped with iDrive 8, inspired by my admiration for BMW and a keen interest in vehicle screen design. The journey started with thorough research and sketches of the BMW's exterior, leading to the development of wireframes for the interior screens. The final redesign prioritizes clarity and functionality, ensuring an enhanced user experience.
Why redesign the screens in a BMW?
My fascination with BMW predates even their initial vehicle deliveries, making me a devoted fan of the brand. I've long been eager to embark on a personal project focused on redesigning vehicle screens. Given my affinity for BMW, it seemed like the ideal chance to merge my enthusiasm for the brand with my exploration of this creative endeavor, particularly with the advent of the iDrive 8 system.
User Research
Exterior Sketches
Interior Sketches
Screens with content blocks
I began by crafting frames for each of the screens within the BMW iDrive 8 system using Figma. I opted not to redesign the small climate control screen located in the back seat, deeming it unnecessary for this project due to its simplicity. This decision was more intuitive than based on specific rationale; it felt unnecessary to alter something so straightforward.
Once the frames were set up, I began placing labeled content blocks within them to outline a potential layout. These placements weren't final but served as a preliminary step to visualize potential design directions. This phase was crucial for generating initial ideas and exploring how to approach the overall redesign.
Wireframes
In the final stage of this redesign process, I developed wireframes focusing on BMW's iDrive 8 system. I began by crafting the default or idle screens for the four main interfaces. Subsequently, I expanded upon these by incorporating additional pages for both the head unit and subunits. For features such as vehicle controls and the driver display, I aimed for a single-page layout, where elements like the speedometer dynamically update during operation.
Deliberately opting for a black and white design approach, I prioritized layout and user interaction within the wireframes. By avoiding the complexity of color incorporation, I could streamline the wireframe creation process. This strategy, particularly pertinent for a personal project, maintains flexibility for potential future enhancements. It allows for the addition of color at a later stage, facilitating further refinement or expansion as desired.
Default / Resting Screens
During the redesign process, I developed default pages for each of the four primary screens in the BMW iDrive 8 system: vehicle controls, driver display, main unit, and sub-unit. These pages were carefully crafted to reflect an active driving scenario, such as displaying current speed on the driver display and indicating active defrosters in the vehicle controls, to provide a sense of being in the midst of a journey.
The vehicle controls and driver display were set to showcase a single, dynamic page where real-time updates occur, including changes in speed on the speedometer and vehicle alerts on the main unit. This design choice ensures that essential information is readily accessible to the driver at all times.
Meanwhile, the main unit and sub-unit were configured to display their default pages either at the start of a drive or if they haven't been interacted with since the drive began. The main unit's default page is optimized for efficiency, providing instant access to critical functions like navigation and audio playback. Similarly, the sub-unit automatically opens to the HVAC screen, enabling immediate adjustments to climate control settings. This screen layout prioritizes accessibility and ease of use, enhancing the overall driving experience for both drivers and passengers in the BMW iDrive 8 system.
Head Unit Screens
To showcase the functionality of the head unit's design, I focused on three primary pages within the BMW iDrive 8 system: the main navigation landing page, the navigation display while on an active route, and the layout for the audio page, using Spotify as the featured example due to its widespread popularity for music streaming.
Acknowledging the significance of music in the in-vehicle screen experience, my design ensures that users can engage with audio playback even while navigating. However, it's worth noting that the navigational pages offer limited music control compared to the comprehensive functionalities available on the dedicated audio page. Furthermore, I integrated a feature in the bottom right corner of the screen, enabling the front-seated passenger to adjust the volume or mute the audio. This decision recognizes that the driver already has access to these controls via the steering wheel, thus optimizing the interface for both driver and passenger convenience.
Navigation Panel
Audio (Spotify) Panel
Vehicle Controls Panel
