Motivation
The BMW i3 was one of the first electric cars, and even today, it still looks modern and futuristic. However, when you sit inside and the screen turns on, it immediately feels outdated. The user interface (UI) looks old, and it does not meet today’s standards for car technology.
The current UI does not show enough important information on the main screen. If you want to find details, you have to go through multiple menus. This is not only inconvenient but also dangerous in a car because it takes the driver’s attention away from the road.
This was my motivation to update the UI so that it matches the car’s modern look and makes the driving experience safer and more user-friendly.
Process
1. Wireframing and layout planning
I started with wireframes to define which parts of the UI are most visible and important for the driver. I numbered the elements from left to right based on visibility, with the far-left element being number 1 because it is closest to the driver’s seat.
The most important elements were:
- Navigation (always visible and easy to access)
- Car status (battery level, range, speed, etc.)
- Media, climate, and weather information
2. Visual hierarchy and interaction design
Since i3 doesn’t have touch screen the iDrive Controller is used for navigation, that’s why it’s very important that selected elements stand out clearly. To achieve this, I used a high-contrast focus ring, which highlights the selected item. This makes it easier for the driver to know where they are in the menu without looking for too long.
3. Reducing menu navigation
A big issue with the current UI is that too much information is hidden inside menus. This means drivers have to go through multiple steps to find what they need, which is unsafe while driving. In my redesign, I kept key functions on the main screen so that drivers can access them quickly. Instead of deep menus, I used expandable cards that show more details when needed and a single layered side menu that is permanent on every screen for easy navigation.
4. Smooth animations for better usability
I used smooth transitions to help users follow changes on the screen and make it more natural. The animations are subtle and fast, so they guide the user without distracting them.
5. Light and dark mode for day & night use
I designed both light mode and dark mode so that the UI is easy to see in different lighting conditions and don’t disturb drivers at night. I used my shadcn/ui component library that already has light/dark modes built-in that accelerated the design process. The focus ring is also has a high contrast in both modes, ensuring that users can always clearly see which option is selected.
Final design
The updated UI makes the BMW i3 feel more modern while improving safety and usability. Drivers can now access the most important features faster and with fewer distractions. This redesign brings the UI in line with the car’s futuristic design, making the overall experience much better.
