top of page
Gradient Background

VOLKSWAGEN

Human Machine Interaction

In recent years, Volkswagen’s transition to digital first interiors faced some issues for complicating essential tasks like climate control and volume adjustment. This design is a 2026 interface that balances the "Pure Positive" VW aesthetic with high utility UX. I focused on reducing "glance time" the duration a driver’s eyes are off the road by restructuring the information architecture and reintroducing persistent controls for high frequency actions by redesigning the infotainment system.

Theme Based: Keeping in mind the VW theme, GT specific color scheme and necessary data required for the driver to keep the vehicle running smooth.

GT Home Dashboard_edited.png

Home Dashboard

  • Modular Quadrants: Used a 4 pane grid based on the F Pattern placing high priority info (Speed/Navigation) at the top and interactive elements (Media/Climate) at the bottom near the hand’s natural resting point.

  • Reduced Cognitive Load: Every critical action (Mute Call, Change Temp, Skip Song) is one tap away, eliminating deep menu diving.

​

Key Features

  • GT Mode Performance: Real time digital tachometer, oil temp, and PSI monitoring to reinforce the "GT" performance branding.

  • Contextual Nav: Widget that prioritizes "Work" and "Nearby" for easy access.

  • Global Climate Bar: A persistent bottom tier bar for muscle memory access to temperature and fan speeds.

​

Visual System

  • Palette: "Stealth Black" (reduces glare) + "Racing Red" (high contrast performance accent).

  • Styling: Subtle Glassmorphism to create depth and hierarchy without visual clutter.

Performance & Telemetry.png

Performance & Telemetry

  • Data Density Control: Organized technical data (BHP, Torque, Boost, G Force) into distinct zones to prevent information overload during high speed maneuvers.

  • High Visibility Indicators: Large, bold typography (BHP) and a high contrast red bar chart ensure that critical performance spikes are visible in a driver's peripheral vision.

​

Key Features

  • Real Time G Force Meter: A visual gravity ball to track lateral and longitudinal forces, helping drivers understand car balance and grip limits.

  • Lap Timer & Track Data: Integrated session controls (Start/Reset) with side by side comparisons of "Current" vs. "Track Record" to gamify the driving experience.

  • Engine Health Monitoring: A vertical status column for Fuel, Brake Fluid, and Oil Temp, providing a "green zone" visual for "Optimum" operating conditions.

​

Visual System

  • Gradients & Motion: Dynamic bar charts and circular "Turbo Boost" gauges create a sense of mechanical movement.

  • System Status Color Coding: Uses a Stoplight System (Green = Optimal, Red = Critical) for the engine status, allowing for instant health checks without reading text.

Media & Sound.png

Media

  • Split Screen Hierarchy: Divided the layout into Visual Identity (Album Art) on the left and Dynamic Content (Live Lyrics) on the right to separate branding from information.

  • Accessibility First Controls: The Play/Pause button is the largest interactive element, centered for easy reach for both driver and passenger, following Fitts’s Law.

 

Key Features

  • Synchronized Lyrics Display: Real time lyric scrolling with active line highlighting in "Red" to enhance engagement during stationary or by passenger use.

  • High Fidelity Audio Indicators: Prominent tagging for Dolby Atmos and Lossless audio, providing visual confirmation of premium sound quality.

  • Quick Action Sound Settings: A dedicated shortcut to "Sound Settings" placed directly under the playback bar for immediate acoustic tuning.

​

Visual System

  • Atmospheric Background: Uses a Gaussian blur of the album artwork as a backdrop to create a cohesive, color matched environment for every song.

  • Interactive Sidebar: A persistent vertical navigation bar on the left for switching between Media, Phone, and Vehicle status.

Sound Settings.png
Sound Settings.png

Sound Settings

  • Precision Control Layout: Used a Vertical Slider (Fader) system for the Multi Band EQ, studio audio output to provide a tactile feel.

  • Contextual Presets: Introduced "GT Presets" (Track, Dynamic) that automatically optimize audio frequencies for high speed driving scenarios where engine noise is more prominent.

​

Key Features

  • 7 Band Precision EQ: Allows for frequency calibration from 60Hz to 15kHz, giving users granular control over their sound profile.

  • Subwoofer DB Boost: A dedicated, large scale circular interface for controlling "Deep Bass Response," emphasizing the powerful, bass heavy preferences of performance car owners.

  • Spatial Surround Stage: An interactive "Stage Focus" map that uses Drag and Drop logic, letting users visually position the center of the sound field within the vehicle cabin.

​

Visual System

  • Analog Digital Hybrid: The sliders feature red glowing "caps" to indicate active levels, combining modern digital aesthetics with classic analog equipment cues.

  • High Contrast Status Toggles: Uses vibrant red toggles for features like "3D Audio Upscaling" to ensure the active/inactive state is clear at a single glance.

Phone & Contacts.png

Communications

  • Dual Zone Layout: Split the screen into a Browsing Zone (left) for recognized contacts and an Action Zone (right) for manual input. This separates "recognition" from "recall" tasks.

  • Speed Dial Cards: Used large profile images for favorite contacts. Visual Recognition of faces is significantly faster than reading text names, allowing for safer, quicker selections while driving.

​

Key Features

  • Integrated Connectivity System: A centralized list of "Recent Activity" that uses directional arrows to distinguish between incoming, outgoing, and missed calls at a glance.

  • Smart Dialpad: Features oversized touch targets and a high contrast red "Call" button to ensure accurate input even in vibrating or high motion driving environments.

  • Persistent Search: A top level search bar for quick access to the full phonebook without leaving the main communication context.

​

Visual System

  • Card Based UI: Information is encapsulated in subtle "glass" containers, creating a clear hierarchy and grouping related data points (Time, Name, Status).

  • Active State Highlighting: The "Phone" icon in the sidebar is illuminated in Racing Red, providing constant orientation of where the user is within the system's architecture.

Advanced Air Care & Climate.png

Climate Control

  • Spatial Mapping: Used a central 3D vehicle top view to visually represent where air is flowing. This bridges the gap between digital input and physical sensation, making the system feel more intuitive.

  • Split User Architecture: Divided the screen into mirror image sections (Passenger vs. Driver). This follows the mental model of a physical dashboard, ensuring both occupants can manage their micro climates independently.

​

Key Features

  • Dynamic Fan Intensity Slider: A prominent, center aligned slider for intensity control, utilizing a linear interaction model that is easier to adjust while in motion than the current swipe gesture that could be confusing for new users.

  • Integrated Seat Comfort: Combined temperature and ventilation controls into single "Seat Comfort" modules, reducing the need to switch tabs to manage overall personal temperature.

  • Air Care Purity Monitor: Features a live status indicator for "Active Purity," addressing modern health concerns by providing visual feedback on the cabin's filtration performance.

​

Visual System

  • Color Coded Thermals: Uses the Racing Red accent for "Hot/Active" states (like Rear AC On or Heat) and white/gray for neutral states to provide instant status confirmation.

  • Oversized Stepper Buttons: The "+" and "-" temperature controls are large and placed at the screen's edges, optimizing for reachability and peripheral interaction.

Body.png

System Status

  • Centralized Identification: Placed the vehicle’s specific model and chassis details (Virtus GT) in the top left for quick reference during service or insurance needs.

  • Progressive Disclosure: Uses a central 3D profile of the car to anchor the page, with data points radiating outward. This organizes information logically: Identification (Left), Energy/Health (Center), and Service Needs (Right).

​

Key Features

  • Real Time Engine Health: Features a "System Normal" status badge with a green checkmark, providing immediate psychological reassurance to the driver.

  • Energy Efficiency Tracker: A circular "Energy Reserve" widget shows 75% capacity, paired with a real time fuel consumption average (11km/1L) to help drivers monitor their eco performance.

  • Predictive Maintenance: Clearly lists the days and kilometers remaining until the next service. The "Schedule Service" button is highlighted in bright red as a Call to Action (CTA), allowing the user to book appointments directly through the UI.

​

Visual System

  • Dynamic Car Rendering: The side profile image of the Virtus GT adds a personalized touch to the interface, making the software feel tailor made for the specific hardware.

  • Status Toggles: Tire pressure and coolant levels use clean, status driven icons to simplify complex mechanical readings into "Stable" or "Optimal" descriptions.

Driver Assistance Settings.png

Driver Assistance

  • Trust Through Visualization: By including a Real Time Visualization of the vehicle and its sensor field (LIDAR/CAM), the UI builds user trust in the autonomous systems by showing exactly what the car "sees."

  • Urgency via Sidebar Alerts: Critical system warnings (Sensor Obstruction, Low Fluid) are pinned to the right side. This uses a priority based notification stack, separating maintenance alerts from active driving controls.

​

Key Features

  • Safety Score Gamification: Features a prominent 98/100 Safety Score. This provides positive reinforcement for safe driving habits while offering actionable feedback on system calibration status.

  • Granular ADAS Controls: Dedicated modules for Cruise Control, Lane Keeping, and Emergency Braking allow drivers to toggle haptic feedback and reaction sensitivity (e.g., "Fast" vs. "High") to suit their driving style.

  • Park Distance Customization: Centralizes proximity alert settings, including audio feedback volume and "Auto Brake at Low Speed" toggles, specifically designed to reduce anxiety during tight parking maneuvers.

​

Visual System

  • Diagnostic Red Accents: Uses the signature Racing Red for toggles and "System Alerts," ensuring that any state requiring driver attention is immediately distinguishable from static information.

  • Technical HUD Aesthetic: The use of fine lines, sensor "pings" around the car graphic, and "System Status: Active" indicators gives the interface a futuristic, high tech Aerospace feel.

System & Driver Settings.png

Technical Setup

  • Logical Categorization: Grouped technical "hard" settings (Driving Assistance) separately from "soft" aesthetic settings (Ambient Lighting). This prevents user frustration by separating high concentration safety tasks from low concentration styling tasks.

  • Visual Feedback Loops: The "Ambient Lighting" section uses real time photo previews of the dashboard and footwell. This allows the user to visualize changes instantly without looking away from the screen to the physical interior.

​

Key Features

  • ADAS Sensitivity Sliders: Uses a linear slider for "Side Assist Alert Sensitivity," allowing for granular adjustment rather than a simple On/Off toggle addressing diverse driver comfort levels with autonomous intervention.

  • Instrument Cluster Customization: A dedicated toggle between "Digital GT" and "Classic Analog" modes, catering to both tech forward enthusiasts and traditionalists.

  • OTA (Over the Air) Update Hub: A prominent "System Update" module that informs the user of specific performance optimizations (e.g., DSG Responsiveness), reinforcing the idea that the car improves over time.

​

Visual System

  • Active State Identification: The "Settings" icon in the sidebar is highlighted in Racing Red, paired with a red bounding box for selected items (like the Digital GT cluster), providing clear orientation.

  • High Contrast Controls: Toggles and sliders utilize the red/white palette against the dark background to ensure interactive elements are "tappable" even in low light conditions.

THANK YOU

bottom of page