Redesigning BMW's Digital Interface (iDrive)
Redesigning BMW's Digital Interface (iDrive)
A case study outlining my personal project as a part of my UofM curriculum to redesign the BMW vehicle's screens, aiming to improve the user experience while maintaining their minimalist aesthetic.
A case study outlining my personal project as a part of my UofM curriculum to redesign the BMW vehicle's screens, aiming to improve the user experience while maintaining their minimalist aesthetic.
Back
Speed Read In a rush?
Here's the gist.
Process
I conducted extensive research on BMW’s design philosophy, user expectations, and competitive automotive interfaces. The design process followed three key phases:
User Research & Sketching: Studied iDrive 8, conducted competitor analysis, and created sketches of the vehicle’s exterior and interior.
Wireframing & Content Structuring: Developed black-and-white wireframes to define the interface’s layout and functionality.
Prototyping & Iteration: Designed interactive screens for the head unit, navigation, vehicle controls, and sub-unit, refining interactions based on usability insights.
Impact
The redesign offered a more user-friendly experience by improving content organization, simplifying interactions, and ensuring seamless accessibility to core functions. The refined layout prioritized real-time driving needs while enhancing BMW’s signature minimalist design language.
Tools
Figma, Miro, Adobe Creative Suite
EXPERTISE
Research
Product Design
UX/UI Design
Interaction Design
Timeline
2024
1 Month
Project description
Project description
Project description
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.
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.
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.
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.
Redesigning BMW's Digital Interface (iDrive)
A case study outlining my personal project as a part of my UofM curriculum to redesign the BMW vehicle's screens, aiming to improve the user experience while maintaining their minimalist aesthetic.
Speed Read In a rush?
Here's the gist.
Process
I led design workshops and ideation sessions, collaborating with stakeholders to refine the product vision. I worked extensively with Figma, developing user flows and wireframes that focused on user-centric navigation and data visualization. The design process was broken down into three phases: initial wireframes, high-fidelity prototypes, and thorough usability testing.
Impact
The final product received excellent feedback for its intuitive design and ease of use. It significantly improved user engagement and satisfaction, positioning Raseet Health as a leading digital solution in the health management space. The platform is now live, supporting thousands of users in managing their health seamlessly.
Tools
Figma, Miro, Adobe Creative Suite
EXPERTISE
UX Research
End to end Product Design
Interaction Design
Timeline
1 Month
User Research
Before embarking on the redesign of the BMW iDrive 8 screens, I conducted initial research to gain a deeper understanding of the vehicle. This included studying BMW's brand styling guide and reviewing various articles on the car's development and target audience. Two particularly informative resources were:
Exploring iDrive 8: Part One
This exploration highlighted BMW's dedication to a sophisticated and minimalist aesthetic. This design ethos not only resonates with the preferences of BMW's customer base but also reflects the company's desired image. Personally, I am drawn to this minimalist approach and aim to integrate it into my redesign efforts.
Before embarking on the redesign of the BMW iDrive 8 screens, I conducted initial research to gain a deeper understanding of the vehicle. This included studying BMW's brand styling guide and reviewing various articles on the car's development and target audience. Two particularly informative resources were:
Exploring iDrive 8: Part One
This exploration highlighted BMW's dedication to a sophisticated and minimalist aesthetic. This design ethos not only resonates with the preferences of BMW's customer base but also reflects the company's desired image. Personally, I am drawn to this minimalist approach and aim to integrate it into my redesign efforts.
01
2022, BMW i7
BMW i7's Adaptive Cruise Control (ACC) interface, showcases a clear, user-friendly and intuitive interface. It allows users to customize following distances, following distance and enabling/disabling ACC and intervention thresholds making it more user-centric user-friendly for ease of interaction during driving.
02
2020, Mercedes-Benz S-Class
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
2019, Porche Taycan
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
Takeaways & Considerations
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
01
2022, BMW i7
BMW i7's Adaptive Cruise Control (ACC) interface, showcases a clear, user-friendly and intuitive interface. It allows users to customize following distances, following distance and enabling/disabling ACC and intervention thresholds making it more user-centric user-friendly for ease of interaction during driving.
02
2020, Mercedes-Benz S-Class
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
2019, Porche Taycan
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
Takeaways & Considerations
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
01
2022, BMW i7
BMW i7's Adaptive Cruise Control (ACC) interface, showcases a clear, user-friendly and intuitive interface. It allows users to customize following distances, following distance and enabling/disabling ACC and intervention thresholds making it more user-centric user-friendly for ease of interaction during driving.
02
2020, Mercedes-Benz
S-Class
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
2019, Porche Tycan
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
Takeaways & Considerations
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
01
2022, BMW i7
BMW i7's Adaptive Cruise Control (ACC) interface, showcases a clear, user-friendly and intuitive interface. It allows users to customize following distances, following distance and enabling/disabling ACC and intervention thresholds making it more user-centric user-friendly for ease of interaction during driving.
02
2020, Mercedes-Benz
S-Class
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
03
2019, Porche Tycan
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
04
Takeaways & Considerations
We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights
User Research
Before embarking on the redesign of the BMW iDrive 8 screens, I conducted initial research to gain a deeper understanding of the vehicle. This included studying BMW's brand styling guide and reviewing various articles on the car's development and target audience. Two particularly informative resources were:
Exploring iDrive 8: Part One
This exploration highlighted BMW's dedication to a sophisticated and minimalist aesthetic. This design ethos not only resonates with the preferences of BMW's customer base but also reflects the company's desired image. Personally, I am drawn to this minimalist approach and aim to integrate it into my redesign efforts.
Exterior Sketches
At the beginning of the redesign process, I opted to craft intricate sketches of the BMW's exterior. This approach afforded me the flexibility to seamlessly incorporate these aspects into my redesign as required. I focused on two particular viewpoints: a lateral view and an aerial perspective of the vehicle, constructed using Figma.
At the beginning of the redesign process, I opted to craft intricate sketches of the BMW's exterior. This approach afforded me the flexibility to seamlessly incorporate these aspects into my redesign as required. I focused on two particular viewpoints: a lateral view and an aerial perspective of the vehicle, constructed using Figma.
Interior Sketches
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
Exterior Sketches
Interior Sketches
At the beginning of the redesign process, I opted to craft intricate sketches of the BMW's exterior. This approach afforded me the flexibility to seamlessly incorporate these aspects into my redesign as required. I focused on two particular viewpoints: a lateral view and an aerial perspective of the vehicle, constructed using Figma.
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
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.
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.
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.
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
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
Sub Unit Screens
For the sub unit's design, my focus was on crafting the vehicle settings pages for BMW's iDrive 8 system. I developed wireframes for the landing page of vehicle settings and specific pages for tire pressure and drive mode. To maintain easy access to HVAC controls, I implemented a dedicated control bar at the top of the sub unit for these functions, regardless of the current screen. Additionally, navigation controls for the sub unit are positioned at the bottom.
On the vehicle settings landing page, different setting options are arranged on the left side. To optimize space and add a visual element, I placed BMW's logo in the empty area. This strategic logo placement deviates from its usual location in the head unit, contributing to a unified brand experience within the vehicle's interface.
For the individual settings pages, the tire pressure page presents immediate information, such as tire pressure in psi for each tire, accompanied by a bird's eye view sketch. Meanwhile, the drive mode page offers straightforward options for adjustment, showcasing three different drive modes. This ensures that users can easily access important vehicle information or make adjustments with minimal effort, enhancing the user experience with BMW's iDrive 8 system.
Sub Unit Screens
For the sub unit's design, my focus was on crafting the vehicle settings pages for BMW's iDrive 8 system. I developed wireframes for the landing page of vehicle settings and specific pages for tire pressure and drive mode. To maintain easy access to HVAC controls, I implemented a dedicated control bar at the top of the sub unit for these functions, regardless of the current screen. Additionally, navigation controls for the sub unit are positioned at the bottom.
On the vehicle settings landing page, different setting options are arranged on the left side. To optimize space and add a visual element, I placed BMW's logo in the empty area. This strategic logo placement deviates from its usual location in the head unit, contributing to a unified brand experience within the vehicle's interface.
For the individual settings pages, the tire pressure page presents immediate information, such as tire pressure in psi for each tire, accompanied by a bird's eye view sketch. Meanwhile, the drive mode page offers straightforward options for adjustment, showcasing three different drive modes. This ensures that users can easily access important vehicle information or make adjustments with minimal effort, enhancing the user experience with BMW's iDrive 8 system.
Next Steps?
Commencing the redesign of BMW's iDrive 8 screens, I was prompted to navigate the delicate equilibrium between aesthetic simplicity and functional clarity.
This project underscored the significance of commencing with comprehensive research and adhering to a minimalist design ethos that aligns with BMW's brand identity. Sketching and wireframing emerged as pivotal steps in visualizing the user interface, highlighting the imperative for an intuitive design that enhances the driving experience. By initially opting for a black and white palette, the focus was on scrutinizing layout and usability, establishing a versatile foundation for future enhancements.
This endeavor reaffirmed the importance of adaptability in design, the value of user-centric perspectives, and the potential for personal projects to drive creativity and innovation within the realm of design.
Next Steps?
Commencing the redesign of BMW's iDrive 8 screens, I was prompted to navigate the delicate equilibrium between aesthetic simplicity and functional clarity.
This project underscored the significance of commencing with comprehensive research and adhering to a minimalist design ethos that aligns with BMW's brand identity. Sketching and wireframing emerged as pivotal steps in visualizing the user interface, highlighting the imperative for an intuitive design that enhances the driving experience. By initially opting for a black and white palette, the focus was on scrutinizing layout and usability, establishing a versatile foundation for future enhancements.
This endeavor reaffirmed the importance of adaptability in design, the value of user-centric perspectives, and the potential for personal projects to drive creativity and innovation within the realm of design.
Thank you for reading my case study!
Get in touch!
If you are in pursuit of a designer committed to turning challenges into delightful experiences, let's talk!
iamhtk@umich.edu
EXPLORE
© 2025 • Handmade with Figma, Framer, and love ❤️
Get in touch!
If you are in pursuit of a designer committed to turning challenges into delightful experiences, let's talk!
iamhtk@umich.edu
EXPLORE
© 2025 • Handmade with Figma, Framer, and love ❤️
Get in touch!
If you are in pursuit of a designer committed to turning challenges into delightful experiences, let's talk!
iamhtk@umich.edu
EXPLORE
© 2025 • Handmade with Figma, Framer, and love ❤️