Halo: Vehicle Experience Concept

Halo: Vehicle Experience Concept

One driving experience across an AR head-up display, instrument cluster, center screen, CarPlay and CarPlay Ultra

Automotive HMIAR Head-Up DisplayCarPlay & Ultra2026

At a glance

I acted as design lead and executive sponsor. I set the vision, ran the research, wrote the principles and decision records, and used Claude (AI) to help build working prototypes of every screen and as my prototyping partner.

4screens designed as one system
3depth planes on the windshield
6design decision records
6interactive prototypes
Design Lead & Executive Sponsor
John Karl
Surfaces
AR HUD, cluster, center screen, CarPlay & Ultra
Deliverables
Research, decision records & prototypes
Status
Concept with working prototypes
01

The challenge

Premium cars put information on the windshield, behind the wheel, in the center stack and on a projected phone UI, each built by a different team. Only the driver sees all of them at once, at highway speed. The goal: one system that keeps eyes on the road.

02

What I led

  • Set the north star: four screens designed as one system, measured by eyes-on-road time
  • Ran secondary research on BMW, Audi, Cadillac and CarPlay Ultra, plus driver complaints about iOS 26 CarPlay
  • Defined three proto-personas and a primary research plan to validate them
  • Designed a three-plane HUD: AR world, driver plane and a panoramic band
  • Shrank the HUD to two-thirds of the display to give speed and tach a classic home
  • Designed the center screen with a theme that follows the sky and HUD settings with a live preview
  • Explored two CarPlay directions and a CarPlay Ultra cluster and center screen
  • Wrote six design decision records tied to NHTSA’s 2-second and 12-second glance guidelines
  • Built working prototypes of every screen, sharing one live state
03

The outcome

A complete cockpit concept with working prototypes, decision records and a research plan, ready to take into a simulator glance study and a knob usability test.

Leadership shownVision & strategyCustomer researchDesign principlesDecision recordsInteraction & visual designInteractive prototyping


Overview

Halo is a vehicle experience concept for a premium car brand. It treats the augmented-reality head-up display, the instrument cluster, the center screen, and the phone as one system, with one type family, one color language, and one motion language. Each screen has a single job, and no setting or phone app can hide something safety-critical.

How I led it: I acted as design lead and executive sponsor. I set the vision, ran the research, wrote the principles and decision records, and used Claude (AI) to help build working prototypes of every screen and as my prototyping partner.

What’s in the concept:

  • AR head-up display: three depth planes, sized to two-thirds of the display so a classic speedometer and tachometer sit below

  • Center screen: a light and dark theme that follows the sky, drive modes, climate, and full HUD settings with a live preview

  • CarPlay: two concepts that fix knob focus, voice, and interruption problems

  • CarPlay Ultra: a themed phone-drawn cluster and a center screen that blends phone and car controls

  • Safety: speed and collision alerts stay on, and alerts clear the HUD to a single message

Services

UX Strategy, Customer Research, Interaction & Visual Design, Design Decision Records, Interactive Prototyping

Client name

Halo (self-initiated concept for a premium marque)

Team

John Karl, Design Lead & Executive Sponsor

Prototype

Market research

User research

UX Decision

This is a working prototype. Follow the guided steps or switch tabs and use the controls. Everything responds live.

Opens full screen so you can try it hands-on. Turn your device sideways for the largest view.

Open the prototype

Market research

Goal:
Learn where today’s best systems succeed and where drivers struggle, before designing anything.

  • BMW Panoramic Vision: a pillar-to-pillar band any occupant can see, plus a 3D HUD for navigation. Gap: two layers need a clear rule for what goes where

  • Audi AR HUD: speed, signs, guidance and assist status on the windshield, named Motor Trend’s best tech of 2026. Lesson: it works because it stays sparse

  • Cadillac dual-plane AR HUD: near and far image planes. Halo extends this to three planes

  • CarPlay Ultra: drives the cluster and car controls with matching themes, but reviewers note heavy reliance on the phone and a mixed cluster experience

User research

Goal:
Ground every decision in real input from the people who use it, and say plainly what still needs validating.

  • Voice of the customer: iOS 26 drivers report grey focus on the selected button, focus landing on Back instead of Start, and voice routes that now wait for an on-screen choice

  • Proto-personas (hypotheses): the daily commuter, the enthusiast and the shared-car household

  • Research plan: drive-along interviews, a simulator glance study against NHTSA criteria, a knob usability test and a two-week diary study


Why Each UX Decision Was Made

Goal:
Every task should fit NHTSA’s distraction guidelines: no glance away longer than 2 seconds, and no more than 12 seconds in total.

  • Information at the depth it belongs: AR world, driver plane and band, so drivers read the next turn without refocusing

  • Speed in two fixed places: on the HUD and on a classic speedometer, so the glance target is always predictable

  • Personalize everything except safety: ten HUD items and three presets, with speed and collision alerts locked on

  • The interface follows the sky: Auto switches to dark at sunset to protect night vision, with Light and Dark as overrides

  • Focus is the brightest thing on screen: Go is selected by default, and voice routes start after a countdown that any input pauses

  • Alerts take the whole stage, briefly: one message, a lock on the hazard and red reserved for act-now moments

CarPlay and CarPlay Ultra

Goal:
Many drivers live in their phone. Design for both kinds of projection without losing the brand.

  • Example 1, CarPlay: Context Stack rearranges for driving, arriving and parked, and calls never cover the next turn. Focus-first makes knob and voice control dependable

  • Example 2, CarPlay Ultra: the phone draws themed gauges with live car data and directions between the dials. The center screen keeps car controls built in, with PHONE and CAR tags so drivers know what works without the phone

Final observations

A cockpit is a program, not a screen. Halo shows how I lead one: set a clear north star, settle debates with principles and decision records, and prove ideas with prototypes people can actually drive. Taking it to production, I would organize designers by surface into pods for HUD and cluster and for center and projection, with a shared design system. I would bring safety and engineering into a weekly decision review from day one. Next steps are the simulator glance study and a knob usability test, then a drivable prototype of the winning CarPlay direction.

John Karl

19 Years • Product & UX Design Leader Leading Mobile Product for 500K+ Users

If you like what you see or have any questions, feel free to send me an email anytime.

Selected work

[2010 -2025]

Bibliophiles iOS app shown on iPhone screens

Icon set for the mobile app

Bibliophiles: Book Discovery & Reading Community App for iPhone

V2 of the 2016 book-rating concept rebuilt as a native iPhone app that learns your taste, opens the copy you own and connects readers who like what you like

View case study →

Groundtruth command screen with the satellite map of the DR-4399 damage sites
ConfidentialPassword Protected

Icon set for the mobile app

Groundtruth: FEMA Damage Assessment Platform

Phone photos in, FEMA-ready damage records out, with AI that separates every photo and a person who confirms every item

View case study →

ShowDeck Launch Grid: songs as backlit glass pads on a Mac

Icon set for the mobile app

ShowDeck: Live Show & DJ Audio App for Mac, iPad and iPhone

One offline app to run live shows, worship services, water-ski shows, live music and radio, with AI as the build team

View case study →

Icon set for the mobile app

Halo: Vehicle Experience Concept

One driving experience across an AR head-up display, instrument cluster, center screen, CarPlay and CarPlay Ultra

View case study →

Icon set for the mobile app

Gumdrop Grid: Candy Puzzle Game for iPhone

A candy puzzle where gummies melt and the board cascades, taken from concept through App Review with AI as the build team

View case study →

Icon set for the mobile app

HoneyDo Scan: LiDAR Measuring App for Field Estimates

An iOS field app that scans rooms with LiDAR, reads documents and collects signatures, then sends it all straight to the estimate

View case study →

Icon set for the mobile app

AI-Powered Field Service Management Platform

A cloud platform with a built-in AI agent that runs a service company's scheduling, estimates, invoicing, payments and reporting, so crews can focus on the real work

View case study →

Icon set for the mobile app

HoneyDo Crew Website

A brand-forward website with a custom AI assistant that turns local homeowners into booked visits

View case study →

Icon set for the mobile app

Schoolnight

A vibe-coded family app that turns Canvas homework into one calm daily summary

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

Workflow Studio

Empowering users to independently design and refine supply chain workflows for greater efficiency and agility

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

Workflo AI

Innovating AI Guided Back Office Workflows

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

Mobile Design System

Leading UX and Dev to one source of truth for the driver-app UI

View case study →

Icon set for the mobile app

Wallet

All Digital Discounted Fueling at your Fingertips

View case study →

Icon set for the mobile app

Scorecard Feature

Designed gamification elements for the mobile user experience to encourage positive driver behaviors, enhance engagement, and contribute to improved company performance scores—ultimately supporting reduced insurance costs through safer driving habits.

View case study →

Icon set for the mobile app

In Application Voice Agent

Conversational voice assistant that keeps truck drivers informed, hands-free and compliant

View case study →

TFM+

Icon set for the mobile app

Trucking Mobile Application

Drivers All-In-One Workspace Mobile Application

View case study →

Icon set for the mobile app

Event-Management SaaS: Brand, Web App & Launch

A full brand system, 40+ web app screens and a launch commercial for an event-planning startup

View case study →

Icon set for the mobile app

Lakeside Resort: Brand, Video & Print Campaign

A new resort identity, location video, website and print campaign for a waterfront campground destination

View case study →

Icon set for the mobile app

Marketing Platform: Web Redesign & Content Program

A responsive redesign, mobile app screens and an ongoing content program for a brand-marketing start-up

View case study →

Icon set for the mobile app

Spine Surgery Practice: Brand, Website & Patient Print

A brand system, website redesign and patient print materials for an orthopedic spine practice

View case study →

Icon set for the mobile app

Video Studio: Physician, Insurance & Event Production

Physician introductions, a weekly insurance video series and drone event coverage from Entangle Media's in-house studio

View case study →

Icon set for the mobile app

Agency Growth, Brand & Marketing

Growing a Tampa creative agency as Director of Marketing & UX: agency brand, marketing and new service lines

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

International Auditing Prototype

Research and Development initiative to design and build the innaResearch and Development initiative to design and build the international auditing software platform utilized by one fo the top auditing firms in the world.

View case study →

Icon set for the mobile app

Novel Rate

Crowd-sourced book ratings and reviews app

View case study →

Icon set for the mobile app

R&R Divide Insurance Portal

Insurance agency web app with a KPI dashboard and agent directory

View case study →

Icon set for the mobile app

Amprop Ventures Website

Website design and branding for a real estate developer

View case study →

Icon set for the mobile app

Quik Tracks

iOS app for firing sound effects and backing tracks live

View case study →

Icon set for the mobile app

Quidamo

A watch-face style circular interface, designed from concept to launch

View case study →

Bibliophiles iOS app shown on iPhone screens

Icon set for the mobile app

Bibliophiles: Book Discovery & Reading Community App for iPhone

V2 of the 2016 book-rating concept rebuilt as a native iPhone app that learns your taste, opens the copy you own and connects readers who like what you like

View case study →

Groundtruth command screen with the satellite map of the DR-4399 damage sites
ConfidentialPassword Protected

Icon set for the mobile app

Groundtruth: FEMA Damage Assessment Platform

Phone photos in, FEMA-ready damage records out, with AI that separates every photo and a person who confirms every item

View case study →

ShowDeck Launch Grid: songs as backlit glass pads on a Mac

Icon set for the mobile app

ShowDeck: Live Show & DJ Audio App for Mac, iPad and iPhone

One offline app to run live shows, worship services, water-ski shows, live music and radio, with AI as the build team

View case study →

Icon set for the mobile app

Halo: Vehicle Experience Concept

One driving experience across an AR head-up display, instrument cluster, center screen, CarPlay and CarPlay Ultra

View case study →

Icon set for the mobile app

Gumdrop Grid: Candy Puzzle Game for iPhone

A candy puzzle where gummies melt and the board cascades, taken from concept through App Review with AI as the build team

View case study →

Icon set for the mobile app

HoneyDo Scan: LiDAR Measuring App for Field Estimates

An iOS field app that scans rooms with LiDAR, reads documents and collects signatures, then sends it all straight to the estimate

View case study →

Icon set for the mobile app

AI-Powered Field Service Management Platform

A cloud platform with a built-in AI agent that runs a service company's scheduling, estimates, invoicing, payments and reporting, so crews can focus on the real work

View case study →

Icon set for the mobile app

HoneyDo Crew Website

A brand-forward website with a custom AI assistant that turns local homeowners into booked visits

View case study →

Icon set for the mobile app

Schoolnight

A vibe-coded family app that turns Canvas homework into one calm daily summary

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

Workflow Studio

Empowering users to independently design and refine supply chain workflows for greater efficiency and agility

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

Workflo AI

Innovating AI Guided Back Office Workflows

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

Mobile Design System

Leading UX and Dev to one source of truth for the driver-app UI

View case study →

Icon set for the mobile app

Wallet

All Digital Discounted Fueling at your Fingertips

View case study →

Icon set for the mobile app

Scorecard Feature

Designed gamification elements for the mobile user experience to encourage positive driver behaviors, enhance engagement, and contribute to improved company performance scores—ultimately supporting reduced insurance costs through safer driving habits.

View case study →

Icon set for the mobile app

In Application Voice Agent

Conversational voice assistant that keeps truck drivers informed, hands-free and compliant

View case study →

TFM+

Icon set for the mobile app

Trucking Mobile Application

Drivers All-In-One Workspace Mobile Application

View case study →

Icon set for the mobile app

Event-Management SaaS: Brand, Web App & Launch

A full brand system, 40+ web app screens and a launch commercial for an event-planning startup

View case study →

Icon set for the mobile app

Lakeside Resort: Brand, Video & Print Campaign

A new resort identity, location video, website and print campaign for a waterfront campground destination

View case study →

Icon set for the mobile app

Marketing Platform: Web Redesign & Content Program

A responsive redesign, mobile app screens and an ongoing content program for a brand-marketing start-up

View case study →

Icon set for the mobile app

Spine Surgery Practice: Brand, Website & Patient Print

A brand system, website redesign and patient print materials for an orthopedic spine practice

View case study →

Icon set for the mobile app

Video Studio: Physician, Insurance & Event Production

Physician introductions, a weekly insurance video series and drone event coverage from Entangle Media's in-house studio

View case study →

Icon set for the mobile app

Agency Growth, Brand & Marketing

Growing a Tampa creative agency as Director of Marketing & UX: agency brand, marketing and new service lines

View case study →

ConfidentialPassword Protected

Icon set for the mobile app

International Auditing Prototype

Research and Development initiative to design and build the innaResearch and Development initiative to design and build the international auditing software platform utilized by one fo the top auditing firms in the world.

View case study →

Icon set for the mobile app

Novel Rate

Crowd-sourced book ratings and reviews app

View case study →

Icon set for the mobile app

R&R Divide Insurance Portal

Insurance agency web app with a KPI dashboard and agent directory

View case study →

Icon set for the mobile app

Amprop Ventures Website

Website design and branding for a real estate developer

View case study →

Icon set for the mobile app

Quik Tracks

iOS app for firing sound effects and backing tracks live

View case study →

Icon set for the mobile app

Quidamo

A watch-face style circular interface, designed from concept to launch

View case study →

Drop me a follow

Tampa, FL

Available for work

Let’s create something great together.

I turn messy problems into products people love, with a team that loves building them.

Drop me a follow

Tampa, FL

Available for work

Let’s create something great together.

I turn messy problems into products people love, with a team that loves building them.

Available for work

Let’s create something great together.

I turn messy problems into products people love, with a team that loves building them.