Automotive UX UI Basics – Designing Car Interfaces

Automotive UX is one of the most rapidly evolving and exciting user experience disciplines. It requires designers to shift their thinking from keeping users engaged to designing for safety.

This article explores the exciting world of automotive UX and six key challenges designers must overcome to deliver safe yet enjoyable driving experiences.

Design, prototype, test, and iterate at a higher fidelity with greater functionality for accurate, meaningful results. Visit the UXPin Merge page to discover how component-driven prototyping can enhance your UX projects to deliver better user experiences for your customers.

What is Automotive UX? 

Automotive UX is user experience design for the automotive industry. As more parts of a vehicle’s interior get digitized with car interfaces for control, so does the demand to make these UIs user-friendly and intuitive.

Touch screens are replacing knobs and dials in most cars, including gas and electric vehicles. Many cars also have voice user interfaces (VUI) which require careful UX design to ensure they’re safe and user-friendly.

UX UI Design Role in the Driving Experience

As cars evolve, so do user needs regarding the driving experience. Drivers no longer want to get from A to B; they want features that enhance the journey to make it more enjoyable–especially in cities where people spend hours commuting morning and evening.

Some features that enhance the driving experience include:

• Driver assistance systems
• Self-driving/autopilot systems
• Navigation
• Technical diagnostics
• In-vehicle infotainment systems (audio & video)
• Climate and comfort control systems
• Device connectivity (integrating phones, tablets, watches, laptops, etc.)

As people move away from car ownership to micro rentals (hourly or A-to-B car hire), we’ll likely see dedicated apps installed on the car’s touchscreen so users can start and end rides.

Ultimately, cars will become another Internet of things (IoT) gadget that integrates with a network of devices rather than a stand-alone mode of transport.

6 Car UX Design Challenges for Designers

1. Car Touchscreen Design

Dashboard touchscreens are likely the first UI that comes to mind when you think about automotive UX. The most famous is Tesla’s large center console touchscreens that control every aspect of the vehicle’s features, infotainment, and diagnostics.

Automakers also mount these in the steering wheel dash for drivers and rear headrests for passengers.

The first challenge UX designers must overcome is the design mindset. Traditional UX design looks for ways to keep users engaged, whereas automotive UX must achieve the opposite and keep drivers focused on the road.

Car user interfaces must be clean and minimal with large text, toggles, and buttons so users can use them with no more than a glance. UX designers must work with interior automotive design teams to match the user experience to the driver’s reach, line of sight, left vs. right-hand drive, etc.–all elements that could impact driver safety.

2. Infotainment Systems

Behind these touchscreens are infotainment systems, providing details about the vehicle and journey as well as entertainment, including music, radio (analog and digital), cameras, device connectivity, audiobooks, video streaming, weather, and more.

In cars with multiple touchscreens, front and back, UX designers must think about the user experience for each differently. It’s essential to display vehicle and journey information for drivers, but backseat passengers have different priorities, like being entertained during their trip.

These differences mean design teams must decide which infotainment features are available to drivers and passengers, what the priorities are, and the impacts on navigation and information architecture. Designers also have to consider safety–should drivers or any front screens have access to video streaming that could distract from the road?

3. Balancing Personalized User Experience With Shared Mobility

Every driver has a preference for seat position, mirror angles, and stereo setup. Car interfaces add another dimension of personalization, which can get complicated with shared mobility.

Getting a seat in the correct position is relatively simple, but what about the screen’s primary view preference, device connectivity, climate control, navigation, and infotainment?–all of which take time to set up.

UX designers must look at ways to personalize the driving experience while building features to accommodate multiple users. Creating user profiles is a good solution, but what about car-sharing services and rentals? Downloading these settings from a smartphone or smartwatch might be a better option, where the car sets everything up as soon as it connects to the driver’s device.

4. Safety Features

Safety is the foundation for every automotive UX design decision. Instead of capturing the user’s attention, the goal is to design UIs and present data a driver can consume with a glance.

UX designers must collaborate with automotive design teams to understand safety systems and how to present these to the driver, for example:

• Lane assist–changing lanes and alerting drivers when they’re straying
• Environmental sensors–telling drivers when they’re too close to other cars and objects
• Speed warnings
• Seatbelt notifications

Designers must also consider which user interactions promote safety and in which situations. For example, voice commands might be the best option while driving, or the driver can use a swipe gesture to change displays without taking their eyes off the road. 

5. Driving Assistance

Advanced driver assistance systems (ADAS) are standard in most high-end vehicles nowadays, but simplified versions are slowly making their way into midrange and budget cars. These systems can perform simple tasks, like alerting you when you drift out of your lane to full autopilot–as we see with the Tesla range–complete with multiple sensors and cameras.

Paul Schouten, a UX Designer at TomTom, points out, “All these sensors create a lot of contextual data! What can we possibly do with all this data?”

A Telsa can drive itself with all this data, but what if the driver has control and the vehicle’s systems detect a potential accident? While engineers focus on developing AI systems that avert accidents, UX designers must decide how they interact with the driver safely.

To do this successfully, designers must have a deep understanding of the Human-Machine Interface (HMI) and how interaction design impacts the driving experience and safety.

6. Designing From Scratch

One of the biggest automotive UX challenges is that designers must design from scratch for every model. Screens, buttons, features, dials, locations, and even operating systems often change with each release, so designers must rethink their designs from the ground up each year–significantly more challenging than going from iPhone 12 to 13!

Designers must also consider more screen sizes and viewports. Most vehicles use custom-fitted screens but also offer mobile apps that control the car’s system and features. They must prioritize features, layouts, and information architecture differently for in-vehicle and external applications–each with the potential to change annually!

Cars also stay on the road much longer than people keep mobile devices. For example, Apple released the iPhone 5 in 2012, but you’ll be hard-pressed to find someone still using one in 2022. Conversely, many people drive cars 10, 20, or even 50+ years old.

While this isn’t an issue for cars built 50 years ago, newer models with touchscreens and other technology must be maintained and updated. UX designers must constantly innovate for new models while future-proofing designs to maintain older systems.

Faster Prototyping With UXPin Merge

Keeping up with the fast-paced automotive industry means designers must prototype, test, and iterate faster and with a higher degree of accuracy. With limited time, they also need better cross-functional collaboration and fewer errors.

UXPin Merge allows you to sync a design system hosted in a repository with UXPin’s design editor, so the entire product development team uses the same components. Any changes to the repository automatically sync to UXPin, notifying designers of the update.

With UXPin’s Version Control, designers can switch to an older version of the design system, perfect for maintaining older products–like the infotainment system for a 2019 car.

Scale Faster Prototyping With Patterns

One of the challenges with maintaining a design system is promoting new patterns and waiting for engineers to code them.

With UXPin Patterns, design teams can omit the development phase and begin prototyping with new patterns immediately. They can also save different component/UI states as patterns, allowing them to make quick changes during testing to iterate faster.

Smoother Design Handoffs

Design handoffs in Merge are smoother and faster because designers and engineers use the exact same component library. 

Nick Elliott, Design System Product Owner and Regional Head of Product Design at Iress, describes this as stage 4 design system maturity, featuring:

• Design in (no) code
• No design drift
• Consistent design
• Seamless (no) handover

The most significant benefit for organizations–faster time-to-market. A crucial factor for the fast-paced automotive industry.

Meaningful Feedback

Better prototypes result in meaningful, actionable feedback from usability testing and stakeholders. With a library of ready-made components, designers can make quick changes, test, and iterate faster.

“It’s been so helpful for us to have these high-fidelity prototypes built with UXPin. We build high-fidelity prototypes much quicker, and we get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.”  Erica Rider, Senior Manager for UX – Developer tools and platform experience at PayPal.

Face-paced automotive UX requires a rapid prototyping solution. UXPin Merge gives product development teams a platform to streamline the design process and deliver projects faster with higher quality and accuracy. Visit the UXPin Merge page to learn more and how to request access to this revolutionary technology.