Seamless UX and HMI for the Apple Car —

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

The 2035 Vulcan is an Apple-branded EV concept, encompassing the dashboard and front seats, incorporating forward-thinking, seamless user experiences that maintain support for Apple's existing product/software ecosystem.

Problem

  • Drivers experience a disconnect when moving from their personal devices into their car. Preferences and ongoing activities (calls, media, navigation) must often be manually reconfigured.
  • Even with advanced infotainment systems, users often face complicated interfaces that disrupt ease of use.
  • While Apple products are renowned for their intuitive integration, the car space remains largely untapped for seamless Apple ecosystem transitions, limiting the brand’s promise of connectedness and accessibility.

Goals

  • Create a user interface that requires minimal learning curve, aligning with Apple’s brand values of accessibility and intuitiveness, so that anyone can quickly understand and interact with the system.
  • Strengthen the feeling of a unified Apple ecosystem by making the transition from phone to car as effortless and integrated as moving from an iPhone to a MacBook.

Solution

  • Develop a consistent visual and interaction design language to ensure that users feel at home with the car’s interface.
  • Integrate the car’s IVI and AR features with Apple’s suite of apps so that ongoing calls, music, and navigation instantly resume in the car’s environment.
  • Implement a profile system like Apple Wallet but for cars. When detected by the car’s system, it automatically configures seating, climate, dashboard preferences, and entertainment options.

Disclaimer —

This project is a conceptual design exercise and is not officially affiliated with or endorsed by Apple Inc. In addition, myself and my team are not employed by, or affiliated with, Apple Inc. All trademarks and copyrights are the property of their respective owners. Any images used are displayed for illustrative and/or research purposes.

The problem with new cars today

As cars and technology evolve, integrating personal devices and experiences into the driving environment often feels clunky, especially as the divide between car manufacturers and technology companies continues to grow.

A photo of the interior of an upcoming 2025 Mercedes Benz EQS, showing the entire dashboard. The entire dashboard has been consolidated into 3 touchscreens connected by glossy plastic trying to make it appear like one, large touchscreen.

©HotCars 2024

How can we create an in-car experience that feels as authentically “Apple” as the devices in our pockets — integrated, simple, and visually consistent?

1/5

Vehicle & Brand Research

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

Some new features are surprisingly poorly integrated and, beyond simply impacting safety, can create an awful experience for drivers. For instance, drivers have been growing frustrated by the increasing use of touch screens, but Tesla takes it to an extreme where they’ve moved almost every single aspect of the dashboard into a single touch screen in the center of the dashboard.

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 design, instead contracting with Apple and Google for services like CarPlay and Android Auto. Since each service has their own design 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

Willing to Explore but with Mixed Results

Many manufacturers are fully willing to explore new ways of displaying information or integrating new technologies. Some features are more easily adapted while others are too new to really be a benefit. For instance, this thin, interior strip of lights mounted under the windshield of VW’s ID.4 is supposed to provide feedback to but is too limited to provide meaningful assistance.

Apple Continuity

We looked at how Apple currently handles transitioning between devices with a series of features under the umbrella of Continuity. This feature, called Handoff, allows eligible apps to be moved, mid-process, to another Apple device.

Takeaway —

Apple works very hard to ensure their product line is interconnected.

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.`

Apple's Evolving Design System

A graphic showing the variety of design elements being used for Apple's iOS design system

Current (2023) iOS Visual Design

A graphic showing the variety of design elements being used for Apple's Vision Pro design system

Evolved for Apple Vision

Spatial Computing

Apple wants the VR space to be it’s own 'tangible' space that can augment and empower both real-world and digital interactions. They’ve evolved their design system (shown above) to work better in 3-dimensional spaces and have also researched how to utilize the series of outward-facing cameras for better perception and recognition of tiny hand gestures and motions.

Takeaway —

Apple is actively trying to make practical use of mixed reality technologies.

An array of still frames taken from a promotional video about Apple's Vision Pro VR headset and how the company envisioned the 3D and spatial aspects of computing for virtual space

Concept Priorities

A graphic of the 3 circles of Apple's ecosystem, showing how the products, hardware, software, and services relate to each other

Apple Ecosystem

Any concept we come up with would have to support Apple’s other products and services with clear connections between them.

An example diagram showing the different levels of spatial awareness when it comes to designing for VR, starting with 2D interfaces, then 3D volumes, and then combined to fill an entire spaces

Spatial Computing

While developing a car, Apple would assuredly take advantage of the totality of space within to explore new interactions.

A variety of Apple products with related app systems on the screen

Integration

We also noted the need for any concepts to not only work alongside the other products but for the experience, apps, and services to be fully integrated and seamless.

Persona

This is Tina, a divorcee working as an astrophysicist in Los Angeles. With her son going to college, she has more time to spend on herself, with her dog, and with her friends.

A summary and description of a fictional person, named Tina, acting as the synthesis of a variety of research and a target for the concepts to be designed for

Journey Map

We brainstormed what the ideal day of Tina, as a new Apple Car owner, could look like, taking into consideration her life and needs.

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

Key Opportunities

"Continuous" OS/experience between devices when getting into your car.

Apple Wallet can have a "car profile" to remember preferences when moving between cars.

Color highlights for autonomous features, with ambient lights to highlight when in use.

Mixed reality integration for in-car working space, like with Apple Vision.

Reinforce your car as a personal, third space with features like using your trunk for deliveries.

2/5

Conceptualization

New Brand Strategy

A simple graphic of a conceptual slogan reading, `Live Different`

New but Familiar

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

Vision

An array of 4 circles connected by lines between them; on the top left is `Hardware Integration`; on the top right is `Smart Connectivity`; on the bottom left is `Personalized Services`; on the bottom right is `Experience`

Mission

A graph showing the positioning of various car brands along 2 axes; the x-axis (horizontal) shows `stagnant` with `exploring` on the right; the y-axis (vertical) shows `luxury` on top and `basic` on the bottom; Apple's positioned in the top right as a luxury brand that explores technology

Positioning

Picking Directions

We went through a series of brainstorming exercises ranging from journey maps to lotus blossoms, and ended up writing out a variety of text-based scenarios. After several discussions, and refining some of these scenarios, these are the directions that we agreed were both the most exciting but also the most plausible.

A descriptive alternative text for the image A descriptive alternative text for the image A descriptive alternative text for the image A descriptive alternative text for the image A descriptive alternative text for the image

A major point of friction is moving into and out of your car. With Apple’s well-defined ecosystem we can introduce a seamless transition 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/5

Designing

Home Screen Exploration

As a team, we realized we would need a “home” for our concepts to work from, and agreed on a long, narrow screen for the meter with an iPad-sized screen for the center console, 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 what processes need to be transitioned over, and some of the process can also be handled with selected settings. 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/5

Making it Seamless

Revised Process

Seamless interaction

No manual steps required

Improved interaction

Too much compartmentalization

Reducing Compartmentalization

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. With that in mind, we needed a way to move other apps out of the way.

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 plentiful space to move apps to 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/5

Finalizing

Design System

It took some time for the design system to really come together. We started with colors, since Apple has a really well defined color system. In the context of vehicles, however, colors have really important meanings. We set up our color system to set aside alert colors (red, orange, and yellow) as well as the normal vs. autonomous colors (blue and purple) so we could start figuring out the rest of our available options and uses.

To reflect the combined heritage of Apple’s iOS and Apple Vision design systems, there’s a strong use of cards to define layouts, iconography, and rounded visual language for clickable items.

An array of visual design assets created for the project, including a series of selected colors, typography, icons, buttons, styling, and more

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.

Feature Highlights

Seamless Transitions Between Devices

Passenger ID (Apple Wallet for Car Settings)

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

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”

Highlighting Autonomous Driving Features

Introducing

Final Thoughts & Next Steps

Our original brief was to design for 2035. To be perfectly honest, we found it incredibly difficult to design for a release 10 years from now. Although we understand that the development timeline for cars is around 5 years, has so many moving parts, and can constantly change considerations, it’s completely atypical for most product/UX/UI design timelines. To be honest, it’s something that I would be really eager to explore more, simply because of the differences to other development pipelines.

Regarding the design, we kept it a little closer to current design trends and features than will probably be in use in 2035. There are also a lot of aspects we wanted to keep iterating on, like more versions of the center screen’s Tab Bar, adding an information bar for things like battery info and range, utilizing secondary screens (e.g. a docked phone) as a controller for quick app access, and more. Some of my teammates decided to continue working on the project afterwards and you can see that on their respective websites.

A mockup of the interior of an electric car, showing the dashboard with a prototype of newly designed screens.

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-2024

Designed in Figma & Coded in Vue.js by Max Wright