Seamless UX and HMI for Electric Vehicles —

Info

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

Tools

  • Miro
  • Figma
  • SolidWorks
  • KeyShot
  • Adobe Premiere
  • Adobe Audition
  • ElevenLabs

Overview

I reimagined how apps and activities on personal devices can seamlessly transition into the vehicle environment. By removing the need for manual prompts and creating a singular, unified visual language, the design delivers a frictionless handoff that feels both natural and effortless.

Problem

  • Drivers experience a disconnect when moving from personal devices to their car. Ongoing activities (calls, navigation, etc.) must often be manually reconfigured.
  • Even with advanced infotainment systems, users often face complicated interfaces with inconsistent visual designs that disrupt the mental models that come with using other digital devices.

Goals

  • Streamline in-car onboarding by leveraging familiar experiences utilized in other tech ecosystems.
  • Automatically detect and continue whatever the user is doing on their device, with no extra steps.

Solution

  • A consistent visual language to ensure that users feel at home with the car’s interface.
  • A seamless transition system that recognizes when the user 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.

1/6

Industry Research & Insights

Vehicle Analysis Insights

We analyzed, in-depth, 12 vehicles (plus 1 more deeper analysis) to get a sense for the ways car manufacturers are solving problems and crafting experiences.

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

Poor Feature Implementation

Trendy features can be integrated in a way that impacts safety and the driving experience. For instance, drivers have been growing frustrated by the prevalence of touch screens but Tesla have condensed almost every single aspect of the dashboard into a single touch screen.

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

Inconsistent Visual Design & App Integration

None of the vehicles we reviewed had complete ownership over their digital UX, instead contracting services like CarPlay and Android Auto. Since each service has their own guidelines and requirements, the result is a clash of multiple visual design languages.

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

New Tech Overshadowing the Core Experience

Manufacturers exploring new technologies will rush to bring them to market without working to incorporate them into the driving experience. For instance, this interior strip of lights is supposed to provide feedback but is too limited for any meaningful assistance.

We noticed that drivers experienced a disconnect between their car & personal devices, resulting in inconsistent handoffs and a broken mental model.

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

Apple's Continuity Features

We looked at how Apple handles transitioning between devices with a series of features under the umbrella of Continuity. One feature, called Handoff, allows eligible apps to be moved, mid-process, to another Apple device. If you're using Safari on your iPhone and open up your MacBook, an icon will appear on your desktop asking if you want to open up a browser to continue reading that website.

Takeaway —

Personal devices are fully capable of being interconnected to create a continuous, personal experience. Is your car not a personal device?

A photo of an Apple iPhone next to an Apple iMac computer, with the same website open on both, under a headline reading, `Use Handoff to continue tasks on your other devices: With Handoff, you can start work on one device, then switch to another nearby device and pick up where you left off.`

Ideal User Journey

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

2/6

Conceptualization

Concept Priorities

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`

Concepts from Problems

My team and I took our user journey map through a series of brainstorming exercises and ended up writing out a variety of text-based concept flows. After several discussions, and refining some of these scenarios, this is where my concept proposal started to take shape.

A descriptive alternative text for the image

A major point of friction is moving into and out of your car. As proven by Apple’s well-defined ecosystem, we can introduce a seamless handoff when entering or exiting the vehicle.

Quick Proof

One of the major things that people are averse to is seeing “Settings” pages when talking about a new feature or concept. With that in mind, I made a quick proof of concept just to show what a user might actually 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

3/6

Designing

Home Screen Exploration

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

By 2035 it will be easier for our devices to recognize processes that need to be handed over. In a refined concept, a lot of my hang-up with 'user agency' can actually be moved to a Settings page which you'll rarely have to interact with.

4/6

Making it Seamless

Revised Process

This new “prototype” shows a seamless interaction where the user doesn’t actually have to do anything. The devices realize they’re nearing each other and, at an optimal time, the active process (in this case, a FaceTime call) is automatically transferred over without the user needing to manually do anything.

Reducing Interface Overload

With a revised concept of how the transition should actually occur, it quickly became apparent that the active process should take precedence over other tasks, i.e. a FaceTime call should become, hierarchically, the most important active app on the screen.

Since the phone can be placed on the MagSafe dock and used as an additional screen, we can move the clock off of the main screen’s Tab Bar. This gives us space to use the Tab Bar to form the equivalent of the Dock, which is in familiar use on many other Apple devices. This change means that the active process can now utilize the entirety of the screen.

A descriptive alternative text for the image

With the clock moved to the phone, we have space to move and rearrange app icons and shortcuts into the equivalent of a Dock within the existing Tab Bar.

A descriptive alternative text for the image

5/6

Finalizing

Final Prototype

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.

6/6

Overall Vision (Teamwork)

Conceptual 2035 Apple EV

We actually 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 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) so you can keep moving.

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 seat position. When entering a new Apple Car or other participating vehicle you can connect your Passenger ID and the car will accommodate your preferences.

You can also create 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.

Team —

Together:

  • Persona
  • Empathy Map
  • Ideation
  • Journey Map
  • Concept Development
  • Rough Storyboard
  • Story Refinement
  • Design System (Rough)
  • Concept Refinement

Max Wright (Me):

  • Animatic Script
  • Dialogue
  • Sound Effects
  • Concept: Transitioning into the car
  • Slide Deck

Yifan Ding:

  • Animatic Scene 1
  • 3D Modeling
  • 3D Rendering
  • Figma Prototype
  • Concept: Autonomous Driving Mode

Mario Santanilla:

  • Visual Storyboarding
  • Animatic Scene 3
  • Video Editing
  • Sound Effects
  • Third Space App Integration
  • Music

Shiya Wu:

  • Animatic Scene 4
  • Design System (Refinement)
  • Design System Consistency
  • Concept: Passenger ID
  • Music
  • Slide Deck

Yue Xi:

  • Animatic Scene 2
  • Sound Effects
  • Figma Prototype
  • Concept: AR/MR Experience
  • Integrating Prototypes Together

Copyright © 2016-2025

Designed in Figma & Built with Vue.js by Max Wright