Turning market noise into structured design direction for automotive HMI

EV Infotainment Research/Design @ Valeo R&D CarLab
Valeo in-vehicle infotainment concept on a panoramic dashboard display, showing vehicle, map, music, weather and clock cards

Project type

  • B2B2C
  • Automotive HMI

Team

  • 1 Product Manager
  • 1 UI/UX Designer
  • 1 Engineer
  • 2 UI/UX Design Interns

Role

UI/UX Design Intern

Timeline

July - Sept 2024

OVERVIEW

Project

Valeo is a Tier 1 automotive supplier exploring its own in-vehicle infotainment operating system (OS). Research & Development (R&D) CarLab Wuhan is built to turn observed driver behaviors into rapid prototypes. Before committing to a direction, the Wuhan team needed to map the current design space: what paradigms exist, how they work and perform, and where the gaps are.

What I Did

As a UI/UX intern, I did competitive analysis on 6 leading EV infotainment systems across performance, framework, and structure, then distilling them into 3 design paradigms. I designed driving tests to evaluate the two mainstream paradigms in real driving contexts, and translated the findings into a requirement map to inform future design.

Result

I delivered the benchmarking findings and requirement map as an internal report to the CarLab team. After the internship, I took those requirements further on my own, building wireframes and high-fidelity concepts to see whether what I'd derived could actually hold up as a product.

MY RESEARCH & DESIGN PROCESS

  • What is out there?
  • How can structure evolve into experience?
  • What do drivers/copilots really need?

  1. Market Competitor Analysis

    Understanding industry patterns & major paradigms

  2. Driving Tests

    Observing real-world behaviors and needs

  3. PRD

    Synthesizing findings into requirements

  4. Wireframing

    Structuring and testing flows

  5. High-Fidelity Optimization

    Delivering driver-centered solutions

PHASE #1: BENCHMARKING - UNDERSTANDING COMPETITORS’ SOLUTIONS

Looking outward: market design trends

To understand the current design space and gap, I analyzed 6 leading EV infotainment solutions from performance (i.e. colors, typography, icons, etc.), framework (i.e. layout), and structure (i.e. using flows upon hierarchy, scroll logic, app switching, etc.).

Layout

IM L6

IM L6 home screen: a vertical stack of cards with music, climate and shortcut controls
IM L6 driving view: a wide strip showing the road ahead with a speed readout and a voice assistant prompt

Vertical card stack

  • Top status bar
  • Dock
  • Main display: A/C, ADAS, apps, music

Customization

  • Add, delete, & change position of cards

XPeng G6

XPeng G6 main display: a full-screen map with a dock along the bottom
XPeng G6 split screen: navigation view on the left, vehicle view on the right

Triple stack

  • Top status bar
  • Main display: Map / Body control via 3D model
  • Dock

Split-screen display

  • Swipe to adjust layout ratio (100% / 30%+70%)

AITO M7

AITO M7 home screen: a desktop-style landscape background with a row of function cards above the dock
AITO M7 card view: a horizontal arrangement of function cards above the dock

Triple stack

  • Top status bar
  • Main display: Desktop background + horizontal function car stack
  • Dock

Customization

  • Add, delete, & change position of cards

Split-screen display (50%+50%)

Xiaomi SU7

Xiaomi SU7 home screen: a car render on a gradient background with a dock below
Xiaomi SU7 split screen: a map card, a vehicle card and a music card side by side

Triple stack

  • Top status bar
  • Main display: 3-card stack
  • Dock

Customization

  • Add, delete, & change position of cards

Split-screen display

Jiyue 01

Jiyue 01 35.6-inch integrated display: one panoramic screen spanning instrument cluster and center, with a green car render and the clock

35.6” integrated display

  • Instrument cluster
  • Central control screen
    • Top status bar
    • SR / Body control
    • Segmented Dock
  • Front passenger entertainment

Coherent gesture control

  • 3-finger swipe to move content across screen sections

Li L7

Li L7 home screen: an app grid card beside a vehicle status card
Li L7 map screen: driving assistance card, navigation map and a media card

Triple stack

  • Top status bar
  • Main display: 3-card stack
  • Dock: Driving-related features / In-cabin control

Split-screen display

HierarchyArrangement

IM L6

Depth

  • Driving-related features: L0-L2
  • Entertainment features: L0-L3

Spatial arrangement

  • L0 displayL1 display
    • Top status bar and L1 menu: stay fixed
  • L1 displayL2 display
    • L2 display: full screen

XPeng G6

Depth

  • Driving-related features: L0-L3
  • Entertainment features: L0-L3

Spatial arrangement

  • L0L1: Top bar + L1 menu fixed
  • L1L2: Top bar + L1 + vertical L2 menu fixed
  • L2L3: Top bar + L1 + L2 menus fixed

AITO M7

Depth

  • Driving-related features: L0-L3
  • Entertainment features: L0-L3

Spatial arrangement

  • L0L1: Top bar, L1 menu fixed
  • L1L2: Top bar, L1, L2 menus fixed; apps = full screen
  • L2L3: Top bar, menus fixed
    • ADAS: display = pop-up
    • Apps: display = full screen

Xiaomi SU7

Depth

  • Driving-related features: L0-L4
  • Entertainment features: L0-L2

Spatial arrangement

  • L0L1: Top bar, L1 menu fixed; some core L1 embedded in L0
  • Apps: translucent blur bg

Jiyue 01

Depth

  • Driving-related features: L0-L2
  • Entertainment features: L0-L5

Spatial arrangement

  • L0L1: Top bar, L1 menu fixed
  • L1L2: Top bar, L1/2 menus fixed
  • L2L3: Lounge: Full screen; Other apps: Top bar, L1 fixed; full in other screens
  • L4–L5: Lounge full screen

Li L7

Depth

  • Driving-related features: L0-L3
  • Entertainment features: L0-L3

Spatial arrangement

  • L0L1/L2: Top bar + Dock fixed
  • Main sectionspecific app

Scroll Logic

IM L6

Gesture direction

  • Vertical scrolling

Edge feedback

  • Rubber banding

Swipe

  • Single-finger swipe

XPeng G6

Gesture direction

  • Horizontal scrolling

Swipe

  • Single-finger swipe
  • 3-finger swipeswaps panel positions

AITO M7

Gesture direction

  • Vertical scrolling

Edge feedback

  • Rubber banding

Swipe

  • Single-finger swipe
  • 3-finger swipe/ 1-finger click the control bar in the middle of split-screenswaps screen positions

Xiaomi SU7

Gesture direction

  • Horizontal & Vertical scrolling

Edge feedback

  • Rubber banding

Swipe

  • 1-finger drag divider bar (horizontal)Adjust card ratio
  • 1-finger tap overflow icon (top-center of card)Full screen
  • 1-finger long press + drag overflow iconReorder cards

Jiyue 01

Gesture direction

  • Mainly vertical scrolling

Swipe

  • 3-finger swipeRearrange layout areas
    • e.g., Swipe media left from central screenmove to passenger entertainment screen

Li L7

Gesture direction

  • Horizontal & Vertical scrolling

Swipe

1-finger

  • Long press + dragReposition
  • Horizontal swipeScroll between cards
  • Tap/drag cardSwap cards

3-finger

  • Downward swipeReturn to home screen

App Switching

IM L6

  • Dock access
  • Apps access
  • Core cards access
  • Safety-focused feedback

XPeng G6

  • Dock access
  • Apps access
  • Safety-focused feedback

AITO M7

  • Dock + widgets access
  • Apps access
  • Safety-focused feedback

Xiaomi SU7

  • Dock + card dual access
  • Smart contextual suggestion
  • Efficiency-focused

Jiyue 01

  • Dock access
  • Apps access
  • Smart contextual suggestion
  • Efficiency-and-safety-focused

Li L7

  • Dock + card dual access
  • Smart contextual suggestion
  • Efficiency-focused

Space-integrated

Car cockpit with a panoramic display spanning the dashboard, showing a map and widgets

Personalization

Intelligence

Immersion

Strengths

  • Strong immersive experience
  • Multi-screen linkage with expansive visual flow
  • Scenario-based customization

Weaknesses

  • Risk of information overload
  • Longer interaction paths, higher misoperation risk
  • Complex gestures with higher learning cost

Scenario-based

Car cockpit with a card-based center display showing a map and widgets

Customization

ContextAwareness

Strengths

  • Card-based layout with flexible arrangement
  • Dual entry (dock + cards) for efficient access
  • Strong adaptability across driving contexts

Weaknesses

  • Higher information density
  • Gesture-based interactions may cause distraction
  • Inconsistent rules can lead to confusion

Mobile-like

Car cockpit with a tablet-style center screen showing an app grid

Familiarity

Stability

DigitalEcosystem

Strengths

  • Card-based layout with flexible arrangement
  • Dual entry (dock + cards) for efficient access
  • Strong adaptability across driving contexts

Weaknesses

  • Higher information density
  • Gesture-based interactions may cause distraction
  • Inconsistent rules can lead to confusion
Although the 6 individual brands vary, I learned that their design approaches converge into three major paradigms. These paradigms show how original equipment manufacturers (OEMs) differently balance trade-offs between information clarity, task efficiency, immersive experiences, etc.

PHASE #1: BENCHMARKING - DRIVING TESTS

Stepping beyond desk research into real contexts

To see how these paradigms perform in actual driving situations, our team conducted 4 tests per paradigm in both city and highway scenarios, focusing on drivers’ experiences with information access, navigation, gestures, and app switching.

I designed the test protocol end to end.

  • a screening survey to recruit participants
  • routes covering city and highway
  • observation on how drivers interact with each system
  • interview guide
  • 5 one-on-one interviews (to capture reactions without group influence)
  • a focus group with the other 3 participants (to see how drivers inspire and challenge each other)
View from the back seat of a car on a forest road, with the wide dashboard screens showing vehicle and media informationA participant in the driver’s seat reaching to touch the central touchscreen during a driving testA participant at the steering wheel with a hand raised toward the central touchscreen during a driving test

PHASE #1: BENCHMARKING - INSIGHTS

Clarity and predictability build confidence

User efficiency and confidence are closely tied to clear visual hierarchy, consistent interaction patterns, and easy access for key tasks.

Context changes what matters

Drivers’ needs are not fixed. Charging status, communication, route changes, etc. bring different functions to the front.

Both driver and passenger want more entertainment

With automation handling more of driving, both driver and passenger expect the cabin to offer more entertainment and comfort.

Card-based layout for clarity & simplicity

Three overlapping translucent cards: a street map, a music player, and a weather card showing 32 degrees

Context-aware suggestions for predictability

Three context-aware notification cards: Low Battery offering to find a charging station, Declined call offering an auto reply or reminder, and an Incoming Call with Answer and Decline

Integrated screen for balanced safety & fun

Two staggered panoramic screens of the integrated display, one above the other, filled with cards and a dock
Adaptive Panoramic Display: The home screen adopts a card-based layout to ensure clarity, recognizability, and ease of interaction. During driving, the interface automatically shifts to a seamless, full-width layout that highlights critical information, ensures real-time feedback, and minimizes driver distraction. The system dynamically adapts to different contexts, balancing operational efficiency, safety, and user comfort.

PHASE #1: BENCHMARKING - PRODUCT REQUIREMENTS

Making the findings actionable

I mapped insights to the requirements it implies, then to concrete features — so every feature traces back to something we saw on the road.

Integrated driving assistance for driving efficiency and safety

Integrated central control and infotainment screen
  • 4032×756 Resolution
  • Central-to-passenger display
  • Primary cockpit information/functions on driver’s side and secondary controls on passenger’s side

Access to key driving related information and functions with minimal cognitive load

Card-style layout of information and functions
  • Vehicle body controls in high visibility area
  • Key driving information (i.e. battery, ADAS status, simplified navigation, etc) widgets in high visibility area
  • Key driving functions (i.e. map, media, etc.) cards in medium visibility area
Optimal touch access to driver’s Dock
  • Vertical Dock in leftmost area with highest clickability
  • Cards with secondary information in area with medium clickability
Self-explanatory visuals and icons
  • Highly readable and understandable linear icons
  • ADAS icons that align with industrial standards
Display based on user preferences and usage patterns
  • Customization of card orders via single-finger pressing and dragging
  • Editable widget and card content

Effortless orientation without distraction or misoperations

Shallow, modular information architecture
  • Core function reachable within 1-3 steps
  • Flat, single-layer displays with reasonable chunking
Consistent transition patterns
  • Same pop-up, page-closing effects, etc. across modules
  • Predictable “back” behavior: always return to last screen in the same hierarchy level
Error prevention and shortcuts
  • Large tap targets for driving context
  • “One-step back to home” button
  • “Undo” button for key driving-related actions

Consistent and intuitive ways of interactions across functions

Low learning curve with in-context assistance
  • Mobile-like gestures that users are familiar with
  • Gesture guide accessible in vehicle infotainment system user manual in settings
Instant feedback on users’ actions
  • “Snap-to-grid” animated transitions when dragging cards
  • Cards shrinking when selected to rearrange positions
Standard, minimal gesture set
  • Single-finger tapprimary actions such as open apps, play/pause, toggle functions, etc
  • Long press and dragrearrange card on home screen
  • Long press (Dock icon)enter edit mode to call out “delete” button
  • Downward edge swipecall out quick setting panel

Efficient switching between high-frequency functions

Personalization to match individual preferences
  • Customizable function icon placement in the driver-side Dock for quick access
Mini floating widgets to maintain quick access to on going tasks
  • Compact mini widgets for global accessibility such as navigation panel showing next turn and ETA
  • Movable floating windows
Context-aware smart recommendations
  • Highway detectedprioritize navigation card on home screen
  • Quick pop-up with answer/ignore
  • Low battery levelone-tap shortcut to nearby charging station

PHASE #2: EARLY DESIGN CONCEPT

From requirements to a working concept

My internship ended after the benchmarking phase. I kept going on my own to see how my findings could lead to something concrete.

Access to key driving related information and functions with minimal cognitive load

Home screen on the panoramic display: a vertical Dock on the left, then vehicle status, map, music and weather cards, with a clock on the right

Optimal touch access to driver’s Dock

Tap vertically arranged Dock icons placed in the most accessible zone, evenly spaced for easy reach.

Self-explanatory visuals and icons

Understand visuals that are intuitive and align with industry standards.

Card-style layout of information

View information and functions in modular units with quick recognition on the road.

Display based on usage patterns

Customize horizontal card flow and card based on personal preference.

Lower the risk of mis-taps with segmented Dock that isolate each touch zone.

Effortless orientation without distraction or misoperations

Settings screen on the body-control menu: a top-down car view with door and trunk controls beside a 3D car with its trunk open

Access detailed body control options.

Instantly see the result of your action.

Settings screen on the Driver Assistance tab: lane and traffic-sign toggles beside a road view with a speed-limit sign

Shallow, modular information architecture

  • Control core driving-related settings within 1-3 steps (i.e. SettingsDriver Assistancespecific control)
  • See secondary menu, corresponding secondary display, and tertiary menu displayed with clear hierarchy.

Error prevention and shortcuts

Locate and tap large-surface buttons for easy adjustment while driving.

App launcher screen with apps grouped as Most used, Driving and Media, and the Dock on the left

Shallow, modular information architecture

Access apps with reasonable chunking, including apps used most frequently, driving related systems, and media.

Consistent transition patterns

Consistent display pattern with other secondary screens such as Settings

Consistent and intuitive ways of interactions across functions

Home screen with a card pressed and shrunk, and a notification banner above itHome screen while the pressed card is dragged between positionsHome screen after the card is dropped into its new position, with a green banner above

Instant feedback on users’ actions

  • When an user tries to customize the card flow by pressing a card, the card shrinks to show that it is selected.
  • A blue notification banner written “Navigation Card Selected” also shows that the user’s action is active.
  • When the user starts to drag the card while pressing, the “snap-to-grid” animated transition appears.

1Customize Card Flow

Card customization panel listing Active cards and Available cards, with Done and Dismiss buttons

2Customize Card Content

Home screen with a card’s overflow menu open

Low learning curve with in-context assistance

  • To change card content, the user taps the overflow menu and selects “Customize Card” to open the customization menu.
  • They can add or remove cards with ‘+’/‘–’ and use the standard press-and-drag gesture to adjust positions.

Consistent pop-up patterns.

3Customize Dock Access

Available Functions panel for the Dock, grouped into Driving and Media, with Done and Dismiss buttonsHome screen with the Dock in edit mode

Standard, minimal gesture set

  • After the user 1-finger tap “+” icon, available function window pops up.
  • With clear categorization, users can simply tap a function with one finger to add it to the Dock.
Dock edit mode with one function selectedSmaller view of the function picker with the YouTube icon highlighted

Efficient switching between high-frequency functions

Navigation screen with a Low Battery pop-up offering to find a charging station or dismiss

Context-aware smart recommendations

  • When the system detects low battery during driving, it automatically prompts the user to add a charging stop along the current route.
  • The user can decide whether to find a charging station or dismiss the suggestion.

Easily learn about current battery level, specific percentage, and quick-access options to solve the issue.

Navigation screen listing nearby charging stations along the route, with the route drawn on the map

Review and confirm the suggested charging station with one tap. Distance, availability, and price are shown for more efficient decision.

Instantly view all charging stations along the entire route.

Navigation screen with the charging stop added: turn instruction, arrival time, range and the updated route

Check estimated arrival time, remaining range, and battery level upon arrival.

View the updated route along with real-time traffic conditions.

Navigation screen with an Incoming Call pop-up offering Answer or Decline

Context-aware smart recommendations

  • When there is an incoming call, the user can quickly respond with clear options to answer or decline, without leaving the main driving interface. This minimizes distraction while driving and following the route.
Navigation screen with an in-call pop-up showing call status, a mute button and End Call

Call status

Mute

End call anytime

Navigation screen with a Declined call pop-up offering Send Auto Reply, Set Reminder or Dismiss

Customize Dock icon placement for efficient switching.

After declining a call, the user can choose to send an auto-reply message or set a reminder to call back after parking.

REFLECTION

Be aware of my biases when I can be one of the users

Being a driver myself helps me understand what users are trying to say, but it can also be a blind spot that makes me gravitate towards what I already believed. So before analyzing our interview data, I defined a coding structure to strengthen objectivity.

Coding Structure

Layer 1 - type of statement
  • Observed behaviorswhat they actually did
  • Reported behaviorswhat they say they do
  • Facts & constraintsverifiable conditions
  • Evaluationspositive/negative feedback
  • Requeststheir solutions, not their problems
Layer 2 - functional domain
  • Navigation
  • Media
  • Calls
  • Entertainment
  • Advanced driver-assistance systems
  • Charging

If I had more time for testing the design concept...

  • Discoverability & reachtask-based testing

    Self-reported ease doesn’t show where people looked or how long they searched. I need to observe the search itself.

  • Learnability & recoverycold-start sessions

    A first encounter happens once. Explain the system and that person can no longer tell you what they'd try on their own.

  • Timing & attention costsimulator runs

    A prompt can be useful and still disruptive at the wrong moment. That cost only appears in a driving context.