Porsche Virtual Dashboard

Realtime UX Design with Unreal Engine 4

Porsche Virtual Dashboard

Realtime UX Design with Unreal Engine 4

Bridging the gap.

Porsche Virtual Dashboard is a visualization of how a redesigned UI can be implemented and visualized in a car's interior cockpit.

Car manufacturers are following the increasingly popular trend of creating futuristic concept cars. While this may generate excitement and anticipation for the future, a clear gap is forming between the design of cars that are currently manufactured and the idealistic futurism of concept models.

This project solves the issue of designing a car interface that is the in-between state between autonomous and consumer-driven cars, utilizing current-day realistic technology while transitioning drivers to the cars of the future.


Project Based from: Design 383's Foundations of Interaction Design

Instructor: Axel Roesler

Products need to be "Most Advanced, Yet Acceptable".

-Raymond Loewy, Designer of the Streamlined Automotive

In order to bridge the gap between the cars of now and the future, steps need to be taken that design both for how current day technology can improve the cars of today's interior, as well as adjust consumers to be more socially approving of cars that feature input modes such as voice control or AR displays.

How might we design a car interface that is the in-between state between autonomous and consumer-driven cars, utilizing future technologies while transitioning drivers to the concepts of the future?

Project inspiration: DESIGN 383's Foundations of Interaction Design
Instructor: Axel Roesler

1. Overview
-Prototyping medium and changes to a current-day Porsche
1. Dashboard Screens
-Revisualized screen dashboard conveying essential vehicle info
2. Heads-Up AR Display
-Added windshield screen real estate, and the potential dangers
3. Voice Control Interaction
-Selective listening and multi-modal interaction
4. Interaction and Visibility Testing
-Testing of screens in physical environments
The Cars of Tomorrow (But not way in the future)
Prototype ModelIn order to visualize what a futuristic interface would look like in a consumer-friendly mindset, a Porsche 911 Carrera S model was used. This way, the car would look believable to be able to hit the market in a couple years, but still uphold the standards of luxury and sport.
Interior Cockpit RefreshAdding a touch of technology on the interior, a second screen for the dashboard has the opportunity to display larger quantities of information much faster and concisely than dials can convey. In addition to adding this screen, a refresh of the middle screen control panel was added, simplifying the controls when driving and making the interface recognizable at a glance.
Augmented Reality Windshield DisplayEmerging screen technology such as Heads Up Displays (HUDs) are being developed to provide windscreen alerts. While this may be tempting to take up this newfound screen real estate, the reality is the opposite. A driver's view must not be obstructed in the event of a high-risk situation. Rather than displaying rich media content and entertainment on the windscreen, as much space as possible must be prioritized toward vehicle essential additions, like vehicle navigation.
Dashboard Screens
Reinventing the wheel (Or what's behind it)
Previously, Porsche's dashboard featured groups of screens with a dashboard. The Porsche 911 2020 model features two screens separated by a physical Tachometer with a tiny display of speed. While this design may work for current day technology, there are several key features that can change.
   Porsche 911 2020 Dashboard.
-Overload of Information
While the dashboard can display myriad information, too many dials contribute to the overall confusing nature of this dashboard. Drivers operate under a high cognitive load while navigating around other cars, so simplicity is absolute priority in designing the dashboards of the future.
-Limited Screen Space
Because of the tachometer, most of the usable screen space is divided to the left and right edges. This break in continuity can lead to confusing interactions if voice control interacts with either side of the screen.
-Screen Deadzones
The sides of a driver's dashboard are normally cut off in visibility due to the steering wheel, so drivers may find it hard to gether information when glancing down unless they move their head to the left or right.
Main Driving Screen
The main screen of the virtual dashboard features a speed indicator and battery percentage left, as well as drive modes and battery temperature. In addition, two "winged" dials are added to give a sense of perspective of how fast the car is going. Finally, a reactive "flower" array of dots are the backdrop, stretching and contracting organically with how much load the motor is under.
Navigation Screen
Designed to be paired with the Augmented Reality Display, the map view is designed to give a high-level overview of the driver's location. As the driver navigates through the streets, they can reference both the on-windshield overlay and the zoomed-out map on the dashboard.
Music/Media Screen
Song changes are displayed as temporary overlays to ensure minimal distraction when driving. Glances towards a phone to see what song is playing can be just as deadly as looking at a text, so a temporary on-screen overlay quickly and efficiently conveys this information.
Settings Screen
Once the vehicle is stopped, adjustments can be made easily and quickly to the drive mode, suspension, and other features. Designed to be instantaneously modified at places like stop signs or traffic lights, this quick summary of features can adjust the performance of the Porsche, just in case instantaneous desires of drag racing pop up while waiting for the green light.
Diagnostics Screen
This special screen outlines any potential maintenance requests that the vehicle may have. Identifying any problems early can prevent many critical failure points in the future, and provide a feeling of transparency to the driver.
Windshield Overlay
Seeing is Believing
As augmented reality technology becomes more prominent in modern-day vehicles, a question of how to design for this new frontier of screen space emerges. With so much potential for new conveyance of information, it is often easy to maximize every square inch of this newfound territory, but there are several dangers and precautions that need to be taken in order to implement true Augmented Reality.
 Screen taken from Toyota's FV2 Concept.
-Screen Overcrowding
The absolute priority for drivers as vehicles transition from controlled to autonomous is for the user to be able to see what is going on outside of the vehicle.
-Unnecessary Information
While random nonessential lines may look futuristic, the added information is superfluous and can distract the driver more than help.
-Reduced Driver Awareness
Rich media content may be nice to watch in an autonomous vehicle, but too much color can pull away vision focus or blend in with the background.
Resting Screen
While driving, minimal information is displayed on the windscreen and is unobtrusive. Essential navigation data such as heading and general location are provided, as well as the external temperature and weather forecast.
Any notification that a connected phone receives will display on the windshield discreetly in one corner. This prevents drivers from looking away from the road, and gives them a chance to respond via voice message.
Navigation Screen
Accompanying the maps screen underneath, this navigation overlay tracks onto streets to quickly and accurately guide the driver to their destination.
Voice Control Input
Selective Listening
As the general public adopts the idea of voice control as another way of interacting with screens, several key factors need to be taken into consideration in order to transition.
  Amazon's Always-Listening Echo Auto.
-Everyday Conversation and Privacy
More times than not, the activation of Siri through voice is mistaken. Similarly, the concept that a car is always listening to a conversation with others in the vehicle is uncomfortable for consumers to think about. Not only can casual conversation be mistakenly picked up and read as input, it can also cause the consumer not to trust their security and privacy a vehicle offers.
-Background Noise
Another problem with an always-on voice control service is the fact that there will be background noise to filter out. Whether accelerating on a freeway or a background conversation is going on, having a keyword-activated voice control will have to constantly analyze and filter out loud environments.

Push-To-Talk. Release-To-Mute.
Featuring a simple solution to a driver's privacy and safety, the button. A button ensures that the user will be able to momentarily turn on the vehicle's listening device whenever they wish. This also ensures that the driver is not operating the voice control when in dangerous situations (e.g: turning the wheel, or backing out of a corner).

Voice Control Button
Located on the right hand side of the steering wheel, a driver can locate and activate voice control through the physical voice control button.
Voice Control Confirmation
Any sentence that the driver instructs the car will be displayed on the car's dashboard, eliminating sources of confusion when a command is misinterpreted.
Visibility Testing in Unreal Engine
Creating Harsh Light Conditions
Unlike stunning concept designs or website hero images, real-life driving environments are rarely at optimal viewing conditions. With the realtime capabilities of Unreal Engine 4, driver interfaces and Augmented Reality displays can be tested for visibility in harsh light conditions.
-As automotive technology advances, the interface inside must as well.
As physical dashboards get replaced with shiny new screens, the opportunity to convey information faster, clearer, and simpler arises in tandem. Though more screen real estate is tempting to fill with more information, the opposite must be done in order to minimize the time a driver's focus is being interrupted with the road ahead.

-Realtime game engines are the new prototyping tool.
Even if the best design screens can be displayed in 2D mockups, there is no way of gauging how screens can feel like when actually placed inside a vehicle. For instance, a steering wheel would never obstruct a screen, or there would never be sunlight in the user's eyes in Adobe XD or Figma. The concept of incorporating 3D models can provide the screens in their environment and the environment's effects on the accessibility, visibility, and interaction of the prototype.

-Innovation never sleeps, but the consumer does.
Referencing back to Raymond Loewy's "Most Advanced, Yet Acceptable" slogan, Automotive Design is growing by leaps and bounds as technologies such as 5G networks and Cloud Processing. Given this new technology, interaction design should be slowly advancing users towards adopting and accepting the new modes and methods of communication with the vehicle.

Project Context
Interaction Design, Motion Design, 3D Design, Design Visualization

Personal Project
Based on DESIGN 383: Foundations of Interaction Design

4 weeks

Programs used
Cinema 4D, Octane Render, Photoshop, Premiere Pro, After Effects, Illustrator, Unreal Engine 4, Adobe XD
Cinema 4DOTOY Octane RenderPhotoshopPremiere ProIllustratorHoudiniHoudiniHoudini
Thank you!

Other work:

Head in the Clouds
VCD Poster
UX Design
Zig Zag AR
Augmented Reality