Seamless UX and HMI for Electric Vehicles

What will interaction in electric vehicles of the future look like? This project explores how connected design principles and ecosystems might shape the in-car experience of tomorrow's EV. Through iterative refinement, it delivers a vision of seamless connectivity via consistent design language.

Tools + Info

Miro
Figma
SolidWorks
KeyShot
Adobe Premiere
Adobe Audition
ElevenLabs

Automotive UX
Role: UX Researcher, Product Designer
9 Weeks
October - December 2023
5 Team Members

The Solution

A high-fidelity mockup showing a hypothetical Apple Car, with a gauge cluster, dashboard screen, and mounted iPhone depicting a unified design language with matching colors, shape language, and iconography

The center screen of Ford's Mach-e, showing multiple visual languages clashing with a mix of different colors, spacing, and icon sizes

The Problem

Inconsistent Visual Design & Integration

There isn't a single vehicle on the market with complete ownership of their digital UX, and often the meter design is visually different from the infotainment system, which means drivers may be juggling up to 3 different visual design languages.
Even with advanced infotainment systems, users often face complicated interfaces with inconsistent visual designs that disrupt the mental models from their other digital devices.

The Solution

A Consistent Design Language and Experience

Help drivers feel at home in their vehicle, their "third space". Enable a unified experience through a consistent design language which brings together the meter, infotainment screen, and other personal devices.
Implement a seamless transition system that recognizes when the users enters or exits the vehicle and instantly hands off active apps, preserving continuity and enhancing the overall driving experience.

Disclaimer:

This project is a conceptual design exercise and is not officially affiliated with or endorsed by Apple Inc. Any images used are displayed for illustrative and/or research purposes.

Research Revealed Similar Problems with UI/HMI in Every Vehicle

After thorough analysis of 13 electric vehicles, we kept noticing that drivers experienced a disconnect between their car & personal devices, resulting in inconsistent handoffs and a broken mental model.

New Features Can Worsen the Driving Experience

A photo from the driver's seat of a Tesla sedan, showing the steering wheel and dashboard, which features an astonishing lack of any screens or gauges except for the one touch screen in the center

Drivers have been frustrated by the overabundance of touch screens but Tesla have condensed almost every single aspect of the dashboard into a single touch screen, getting rid of the gauge cluster entirely.

Manufacturers Are Rushing New Technologies

A photo from the driver's seat of VW's ID4, showing a thin LED light strip along the bottom of the windshield

This light strip under the windshield is supposed to provide feedback to the driver but is too limited for any meaningful assistance.

How can we leverage existing tech ecosystems to create a familiar in-car experience?

We Created an Ideal User Journey Map To Compare with the Existing Pain Points

Because the technology already exists to create a unified user experience between multiple devices (such as Apple's suite of "Handoff" features) it actually becomes relatively simple to create a seamless experience as long as there's complete ownership of the systems.

A written out map through one 'ideal' day using an Apple Car, with sections for emotions, thoughts, actions, touchpoints, opportunities, and more

We Began Conceptualizing by Aligning with Apple's Brand

Clarifying Apple's Brand Value Priorities for Future Ecosystem Expansion

From the initial vehicle analysis, and noticing the broken mental model and disconnect between devices, I wanted to prioritize that feeling of using tech in a way that "just works".

An array of 3 circles featuring; on the left is `Accessibility`; in the middle is `Connectedness & Compatibility`; on the right is`Ease of Use`

If a major point of friction is the process of moving into and out of your car then, even with today's technology, we can introduce a seamless handoff when entering or exiting the vehicle.

Wireframing a Quick Proof of Concept

One of the major things that people are averse to is seeing “Settings” pages when talking about a feature. With that in mind, I made a quick proof of concept just to show what a user might encounter during the actual event.

Low-fidelity wireframe of GPS directions

Low-fidelity wireframe of GPS directions with a pop-up notification which says `Handoff: moving your music and navigation to your car.`

From the previous pop-up notification, this low-fidelity screen shows the notification expanded with 2 options to select: cancel or okay

Designing & Iterating a Realistic Visual Language

Figuring out how iOS would translate to an infotainment system

Talking with my team, I realized we would need a “home” for our concepts to work from, and we agreed on an iPad-sized screen for the center console, potentially utilizing MagSafe connections to use whatever sized screens the owner would prefer.

Low-fidelity wireframe of a car`s center screen showing some app icons

Low-fidelity wireframe of a car`s center screen showing some app icons on one side and a preview of the car on the other side

Low-fidelity wireframe of a car`s center screen showing some app icons on one side and a preview of the car on the other side, with some different visuals and bars to resize the sections

Revising Interaction

Familiar interaction

User has agency

Too much friction

Unnecessarily complicated

Easy to read

Expanding takes up too much room

Complex to navigate

Doesn't meet visual standard

Improved visual design

Still too much friction

Too much compartmentalization

Confusing hierarchy

Pivoting the interaction

Up to this point I was too focused on designing to retain user agency. However, when you purposefully introduce friction to a process, by definition, you're not creating a seamless interaction.

Finalizing Seamless Interactions

An Animated Prototype to Illustrate the Seamless Concept

Like many of Apple’s features (such as Apple ID and Continuity) the magic is happening behind the scenes, and adjustments have to be made in Settings and Profiles. Showing a Settings page is a boring way to promote a new concept, especially because it’s not the part that will be most interacted with. This prototype shows how the actual user experience will play out.

Separate Concepts Informing a Combined Vision (Teamwork)

Conceptual 2035 Apple EV

We worked as a team to conceptualize several connected driver experiences under the umbrella of an Apple-branded vehicle. We spent quite a bit of time researching the brand and coming up with a consistent design system, including shape language and colors.

This animated video highlights all of these features in the appropriate context of a driver's day.

Feature Highlights

Seamless Transitions Between Devices

We wanted to continue Apple’s penchant for supporting an interconnected ecosystem within their product line so that your Apple Car would connect with the rest of your Apple products. Your music, phone calls, GPS, and more would seamlessly transition to your Apple Car media screens (and vice versa). You can keep moving without worrying about your tech working together.

Passenger ID (Apple Wallet for Car Settings)

To extend the Apple Wallet and Apple ID, you can now make a Passenger ID which remembers your preferred climate and seating. When entering a new Apple Car or other participating vehicle the car will accommodate your preferences while also allowing different presets to easily adjust for different situations, such as when you need a nap or if it’s colder than usual.

A mockup of the interior of a car while sitting in the driver's seat; the driver is using AR glasses and using an AR menu hovering in the air in front of them.

AR/VR Integration

More than simply adding AR/VR to the driving experience, we wanted to integrate spatial computing so that AR information appears seamlessly within your surroundings in the cockpit. Some menus adhere to physical surfaces for tactile feedback, and other elements intelligently move so they don’t cover necessities like the meter or streetview.

A prototype of a dashboard center screen using an app to order a delivery with the car as the delivery option.

Enforcing the Personal “Third Space”

Your home and workspace are very often personalized to your needs and self expression but even though people spend a lot of time in their car, effectively their “third space”, they don’t often personalize these spaces. To enforce that your car is a personal space, some apps will be integrated into the onboard apps for things like using your car as a delivery option when you’re not at home.

Highlighting Autonomous Driving Features

Apple, like many large technology companies (but not many car companies), uses highlight colors for important information. We continued that trend by using an Autonomous Violet as the indicator of autonomous driving mode and related features.