EV Infotainment
EV Infotainment
EV Infotainment
Infotainment screen UI for first-time EV drivers
Infotainment screen UI for first-time EV drivers
Role
Role
UXUI Designer
UXUI Designer
Timeline
Timeline
Jan - Feb 2024
Jan - Feb 2024
Team
Team
Personal Project
Personal Project
Overview
Infotainment screens in automobiles were once a secondary feature, but in electric vehicles (EVs), they have become central, integrating all the functions of the infotainment system. However, for drivers encountering an EV’s infotainment screen for the first time—where every physical button has been replaced by a touchscreen interface—it may not feel intuitive.
Most people associate touchscreen interfaces with smartphone UIs. To address this, I redesigned the infotainment UI for EVs, creating an experience that feels familiar to smartphone users while enhancing driver usability.
Infotainment screens in automobiles were once a secondary feature, but in electric vehicles (EVs), they have become central, integrating all the functions of the infotainment system. However, for drivers encountering an EV’s infotainment screen for the first time—where every physical button has been replaced by a touchscreen interface—it may not feel intuitive.
Most people associate touchscreen interfaces with smartphone UIs. To address this, I redesigned the infotainment UI for EVs, creating an experience that feels familiar to smartphone users while enhancing driver usability.
Design systems
Design systems
Home screen app icon
Home screen app icon
Menu bar icon
Menu bar icon
Small icon
Small icon
Full-height widget
Full-height widget
Mid-height widget
Mid-height widget
Min-height widget
Min-height widget
Designs for smartphone users
Electric vehicles have become mainstream in the automotive industry, yet many drivers still feel unfamiliar when transitioning to EVs. To bridge the gap between traditional car drivers and EV users, I focused on a common element: the smartphone, the most familiar touchscreen device for most people. The layouts are optimized for smartphone users while maintaining a consistent and cohesive design system.
Electric vehicles have become mainstream in the automotive industry, yet many drivers still feel unfamiliar when transitioning to EVs. To bridge the gap between traditional car drivers and EV users, I focused on a common element: the smartphone, the most familiar touchscreen device for most people. The layouts are optimized for smartphone users while maintaining a consistent and cohesive design system.
Home screen
Home screen
Infotainment of Tesla
Infotainment of Tesla
Problem
Vague home screen and small icons
Tesla, one of the most well-known EV manufacturers, uses a drawer-style interface for accessing apps, functioning as the home screen. However, the home screen is often perceived as a navigation path to access apps.
The size of the app icons is not large enough for drivers to touch comfortably while driving, despite having sufficient space to accommodate larger icons.
Tesla, one of the most well-known EV manufacturers, uses a drawer-style interface for accessing apps, functioning as the home screen. However, the home screen is often perceived as a navigation path to access apps.
The size of the app icons is not large enough for drivers to touch comfortably while driving, despite having sufficient space to accommodate larger icons.
Accessing the home screen
Accessing the home screen
Solution
Home screen, home button, and larger app icons
Similar to a regular smartphone interface, the app page and home screen are separated, allowing drivers and passengers to easily access the home screen by tapping the home button placed on the side of the menu bar.
Larger app icons on the home screen allow operators to easily select an icon without requiring much attention.
Similar to a regular smartphone interface, the app page and home screen are separated, allowing drivers and passengers to easily access the home screen by tapping the home button placed on the side of the menu bar.
Larger app icons on the home screen allow operators to easily select an icon without requiring much attention.
Infotainment of Hyundai
Infotainment of Hyundai
Problem
Blurry interface
Many car makers use monotone design systems for a consistent interface. However, this makes it difficult for drivers to quickly identify each icon because they all appear similar, especially when they cannot fully focus on the screen while driving.
Many car makers use monotone design systems for a consistent interface. However, this makes it difficult for drivers to quickly identify each icon because they all appear similar, especially when they cannot fully focus on the screen while driving.
Solution
Colorful icons
Each icon features a distinct color background that reflects its identity, allowing drivers to recognize and tap the icon at a glance. For instance, a green icon might signify the battery, while a white icon with red could represent the calendar.
Each icon features a distinct color background that reflects its identity, allowing drivers to recognize and tap the icon at a glance. For instance, a green icon might signify the battery, while a white icon with red could represent the calendar.
Quick bar
Quick bar
Traditional center console with physical buttons
Traditional center console with physical buttons
Quick bar to access the desired function directly
Quick bar to access the desired function directly
Problem
Lack of physical buttons
Drivers new to electric vehicles often struggle to access features directly due to the lack of physical buttons, frequently needing to navigate through several steps to reach their desired function.
Drivers new to electric vehicles often struggle to access features directly due to the lack of physical buttons, frequently needing to navigate through several steps to reach their desired function.
Solution
Quick bar
The menu bar can hold several frequently used function buttons and apps, and with a sliding motion, users can access additional functions like a traditional center console with multiple buttons.
The menu bar can hold several frequently used function buttons and apps, and with a sliding motion, users can access additional functions like a traditional center console with multiple buttons.
