UX Case Study · Google Maps Feature Concept

Highway Exit Navigation
Re-imagined

A concept pitched to Google Maps — adding pre-attentive colour intelligence to the route line so drivers are warned of approaching highway exits before it's too late, without adding a single new UI element.

This concept uses color cues to help drivers anticipate and prepare for exits. The color system is configurable and can also be represented through variations in line thickness and other subtle visual indicators.

My Role
UX Designer & Researcher
Platform
Google Maps · iOS & Android
Example Route
I-95 South · New York, NY
Status
Concept
Empathise
Define
Ideate
Prototype
Test
6
Deliver
01
Design Thinking · Phase 1

Empathise — Living the Problem

Before touching any design tool, I observed real drivers using Google Maps on live highway journeys. The goal was to understand the moment of a missed exit — not from data, but from the driver's lived experience on US interstates.

1 in 4

Drivers in our diary study reported missing at least one GPS-guided highway exit per week. The highest frequency was on unfamiliar routes during rush hour.

2–3×

Average number of times a driver glances at the phone per exit approach. Each glance takes eyes off the road for 0.3–0.8 seconds at highway speed.

0.3 mi

Typical distance at which drivers first notice a lane change is needed. At 65 mph that is only 17 seconds — far too late for a safe multi-lane merge.

Current Experience Map — Approaching Exit 2, I-95 Southbound, New York Emotion track: Calm → Focused → Anxious → Panic → Recover
CRUISING AWARE ALERT PANIC RECOVER 2.0 mi+ 1.5 mi 0.5 mi 0.2 mi Post-exit Peak stress 🎵 Music / call 👁 Glances at phone ⚠ Re-reads prompt 🚗 Abrupt lane cut ✓ Rerouted / on-exit ⚡ Route line is STILL blue — no visual warning Stress Calm

"By the time I saw the exit sign, I was already in the wrong lane with a truck on my left. I had to just… keep going and reroute."

— Participant 3, ride-along session · I-95 South approach, New Jersey

"The blue line looks the same whether I'm ten miles from the exit or ten seconds. There's nothing to warn you it's about to happen."

— Participant 7, post-journey interview · I-95 commuter, New York
02
Design Thinking · Phase 2

Define — Framing the Right Problem

Research revealed the problem isn't a lack of information — Google Maps has all the data. The failure is in the signal: the route line communicates nothing about proximity to the next exit manoeuvre. Every participant was staring at the right element. It just wasn't telling them anything.

Primary Persona
C
Primary User Archetype
Carlos, The Commuter
Age34, Sales Manager
LocationNew Jersey → NYC daily commute via I-95
Uses Maps4–5 days / week on US interstates
DeviceiPhone 15, dashboard mount
ContextDriving, often on calls via AirPods

Goals

  • Get to client meetings on time without stress
  • Navigate unfamiliar highway exits confidently
  • Keep eyes on road — not on the phone
  • Stay in the correct lane early enough

Pain Points

  • Misses exits on unfamiliar stretches 1–2× per week
  • Voice prompt fires too late when in a call
  • The blue line gives no advance lane-prep signal
  • Anxious near complex multi-lane interchanges

Mental Model

  • "I expect the map to warn me like a co-pilot, not just a GPS device"
  • Believes colour changes would be "obvious even in peripheral vision"

Jobs to Be Done

  • When driving at speed on an unfamiliar highway, I want to know my exit is approaching so I can position myself safely without stress
🎯

Problem Statement

Highway drivers using Google Maps need to perceive their exit approach earlier and without consciously reading the screen, because the uniformly-blue route line provides no advance spatial signal — causing late, unsafe lane changes and missed exits.

How Might We…
HMW 1
How might we make the route line communicate spatial urgency without adding new UI elements?
HMW 2
How might we provide a warning that registers below the level of conscious attention — so the driver doesn't have to "read" it?
HMW 3
How might we choose colours that work for all drivers — including those with colour vision deficiency — without conflicting with existing Google Maps colour semantics?
HMW 4
How might we ship this feature with no new data infrastructure — using only what the Navigation SDK already provides?
Critical Constraint Identified in Define Phase
⚠️

The Colour Conflict — Why Orange & Red Are Ruled Out Immediately

The instinctive solution — orange for "prepare", red for "exit now" — creates a direct semantic collision with Google Maps' existing traffic encoding on the same route line. Orange = moderate traffic. Red = heavy traffic. Using these colours for exit proximity would introduce a dangerous double-meaning. A driver seeing a red segment could not distinguish "heavy traffic" from "take this exit now". This is a safety failure. All colour selection must start by eliminating the entire reserved spectrum.

03
Design Thinking · Phase 3

Ideate — Finding the Right Colours

Ideation here was a systematic elimination process. Rather than open-ended brainstorming, I mapped the entire colour spectrum against three filters in order: reserved by Google, WCAG contrast, colour-blind distinguishability. What survived was the answer.

Reserved Colour Space — Must Avoid
🚫 Already Reserved by Google Maps
Google Blue
#4285F4
Current route line — normal navigation state
Google Green
#34A853
Free-flow / light traffic indicator
Google Amber
#FBBC05
Moderate / slow-moving traffic
Google Red — Rejected ✕
#EA4335
Heavy / stop-and-go traffic — already a warning colour. Cannot reuse for exit proximity.
Orange — Rejected ✕
#F9774B
Perceived as traffic warning. Causes deuteranopia confusion with red.
✅ Available Colour Space — New Exit System
Deep Teal — "Prepare"
#006575 · Hue 190°
1.5–2.0 miles from exit. Start moving toward exit lane. WCAG 5.8:1 on map surface.
Deep Purple — "Exit Now"
#5B0EA6 · Hue 275°
≤ 0.4 miles. Stay in exit lane. Act now. WCAG 7.5:1 on map surface (AAA).

Teal (190°) and Purple (275°) are separated by 85° from the nearest existing Google colour (Green at 145°), and 85° from each other — ensuring perceptual distinction for all users including the most common forms of colour vision deficiency.

Selected Colour System — Rationale

Deep Teal

#006575 · Hue 190° · "Prepare" State

Teal occupies the 185–195° hue range — entirely absent from Google's palette. Psychologically it signals calm readiness and transition — between the passive blue of normal navigation and something requiring action. On the map's warm-grey road surface it achieves a 5.8:1 contrast ratio (WCAG AA). Under deuteranopia simulation, it reads as a distinctive dark blue-green — clearly different from the normal route blue.

Deep Purple
#5B0EA6 · Hue 275° · "Exit Now" State

Purple sits at 275° — as far from red-orange (15–35°) as possible on the hue wheel, yet unambiguously distinct from teal. It triggers immediate attention without the aggression of red, and is perceivable across all three major colour vision deficiency types. On the map road surface: 7.5:1 ratio — WCAG AAA. The strong luminance drop from teal to purple creates a clear sequential signal even in greyscale.

04
Design Thinking · Phase 4

Prototype — Building the Experience

The prototype simulates the three-state journey on I-95 Southbound in New York — the exact stretch of highway where exit-miss events are well-documented due to multi-lane complexity and a short merge window at the Cross Bronx Expressway interchange.

Three UI States — I-95 South, Exit 2 (I-278 Cross Bronx)
State 1 — Normal
I-95 S → Cross Bronx 2.0 mi · Exit 2 · 4 min EXIT 2 — 2.0 mi I-278 Cross Bronx Continue on I-95 South Exit 2 in 2.0 miles
Route line: Blue #4285F4
No change. Normal nav.
State 2 — Prepare
⬤ Prepare for Exit 2 Move right · 0.8 mi ahead EXIT 2 — 0.8 mi I-278 Cross Bronx PREPARE · Move right now Exit 2 · I-278 in 0.8 miles
Route line: Teal #006575 · 8px
"Prepare" signal at 0.8 mi
State 3 — Exit Now
⬤ EXIT NOW — EXIT 2 Stay right · 0.2 miles EXIT 2 ← NOW I-278 Cross Bronx EXIT NOW · Stay right Exit 2 · I-278 in 0.2 miles
Route line: Purple #5B0EA6 · 10px
"Exit Now" · Pulsing · 0.2 mi
I-95 Southbound — Yonkers to Cross Bronx · Colour-Coded Route Segments
Normal Prepare Exit Now
I-278 CROSS BRONX EXPRESSWAY 1.5 mi to exit 0.4 mi to exit 0.1 mi to exit EXIT 2 I-278 Cross Bronx Expwy You I-95 SOUTH N S
Interaction Flow — Driver's Experience
1
2.0+ miles to exit

Normal Navigation — Blue #4285F4

Route line stays Google Blue · 6px weight. No change from today's experience. Zero cognitive load added. Driver focuses on traffic conditions and general routing.

2
1.5 miles to exit — Prepare trigger

Prepare State — Teal #006575

Route transitions to Deep Teal · weight increases to 8px · Navigation bar shifts to teal-tinted background · Bottom banner: "PREPARE: Move toward exit lane" · A single haptic pulse fires. At 65 mph, 1.5 miles = ~90 seconds — enough time to move safely across multiple lanes.

3
0.4 miles to exit — Exit trigger

Exit Now State — Purple #5B0EA6

Route transitions to Deep Purple · weight 10px · 2-second breathing animation · Banner: "EXIT NOW · Stay right" · Second haptic pulse (2 taps). 0.4 miles at 65 mph = ~22 seconds. Urgent but not panic. Driver confirms position and holds the exit lane.

4
Post-exit — Recovery

Normal Navigation Resumes — Blue

After GPS detects the exit manoeuvre is complete, the route line returns to Blue #4285F4 at 6px. No animation. Recovers gracefully whether the driver takes the exit or misses it (standard reroute fires as normal).

Technical Feasibility — Rendering Decision, Not a Research Project

The Google Maps Navigation SDK already provides RouteSegment and StepInfo objects with manoeuvre type and distance-to-next-step data. The route polyline is already being drawn. This feature requires splitting the polyline into colour zones at calculated distance thresholds. No new data pipeline. No SDK research. Estimated development scope: a single rendering module change.

05
Design Thinking · Phase 5

Test — Accessibility & Validation

Testing covered two tracks simultaneously: WCAG 2.2 compliance including colour blindness simulation, and a proposed A/B testing framework for live validation. Both tracks used the I-95 New York scenario as the benchmark context.

Full WCAG 2.2 Compliance Audit

1.4.1 — Use of Colour

  • Colour is NOT the sole means of conveying state — line weight increases (6→8→10px) and animation provide redundant non-colour cues
  • Banner text labels ("PREPARE" / "EXIT NOW") communicate state independently of colour
  • Haptic feedback provides a non-visual physical signal

1.4.3 — Contrast (Minimum)

  • Teal #006575 on map road surface: 5.8:1 — exceeds AA
  • Purple #5B0EA6 on map road surface: 7.5:1 — AAA
  • White text on solid teal/purple banners: exceeds 4.5:1

1.4.11 — Non-text Contrast

  • Both colours achieve ≥ 3:1 against adjacent map surfaces as UI components
  • Line weight increase ensures shape remains visible under low-contrast screen settings

Colour Vision Deficiency

  • Deuteranopia: Teal reads dark blue-green, Purple reads dark indigo — 3 distinct appearances
  • Protanopia: Similar — both remain distinct from route blue
  • Tritanopia (rare <0.01%): Distinguishable via luminance contrast
  • Reduces Motion: pulse animation replaced by weight increase only
Proposed A/B Testing Framework

Exit Miss Rate

−35%

Target reduction in exit-miss events (GPS-detected reroutes after missed exit) vs. control cohort.

Lane Change Timing

1.0 mi

Target avg. distance at which driver moves to exit lane — up from current 0.3 mi.

Feature Learnability

70%

Target % of users who correctly explain teal/purple meaning after 3 navigation sessions.

Session CSAT

+0.3

Target increase in post-session confidence rating for highway navigation sessions.

06
Design Thinking · Phase 6

Deliver — Before, After & Handoff

The final design adds zero new UI components, requires no new data infrastructure, works on every phone running Google Maps globally, and passes WCAG 2.2 AA on all tested backgrounds. Delivery scope is a single rendering module change in the Navigation SDK.

Before vs. After
DimensionBeforeAfter
Route lineUniformly Google Blue · single weight · no state change3-state: Blue → Teal → Purple · progressive weight 6→8→10px
Driver attentionMust consciously read text prompt to know exit is nearPeripheral colour change perceived in <200ms — pre-attentive
Advance warning~0.3 mi (voice prompt, often too late for safe lane change)1.5 mi / ~90 seconds at highway speed (Teal prepare trigger)
New UINone required or addedNone — only existing banner text content changes
WCAG complianceBlue on road: 3.4:1 (AA UI only)Teal: 5.8:1 · Purple: 7.5:1 → both AA to AAA
Colour-blind safeN/A — no differential colouringYes — teal/purple avoids red-green spectrum entirely
Hardware requiredNone (phone-only)None — works on every phone, worldwide, from day one
Final Design System
Colour System
Google Blue · Normal route
#4285F4 · Unchanged
Deep Teal · Prepare · 1.5 mi
#006575 · WCAG AA 5.8:1
Deep Purple · Exit Now · 0.4 mi
#5B0EA6 · WCAG AAA 7.5:1

Line Weight Spec
Normal state
6px · no animation
Prepare state
8px · no animation
Exit Now state
10px · 2s breathing pulse · disable on Reduce Motion
Design Principles Applied

Pre-attentive first — colour registers before reading

Systems thinking — zero semantic collision with existing palette

Accessibility-first — CVD safe by design, not by addition

Progressive enhancement — adds no new UI surface

Redundancy — weight + haptic + text label as backup channels

Low surface area — change as little as possible to fix the problem


SDK Trigger Thresholds
Prepare trigger
distance_to_next_step ≤ 1.5 miles + manoeuvre_type = EXIT
Exit Now trigger
distance_to_next_step ≤ 0.4 miles + manoeuvre_type = EXIT
Reset
On manoeuvre complete or reroute event — return to normal state
Reflections
Key Insight

Colour is a systems problem

The design decision wasn't "which colours look good" — it was "which colours survive a rigorous elimination process". Starting by mapping what's already reserved, then filtering candidates through WCAG and CVD, left exactly two answers. The process found the solution; taste only chose between them.

Accessibility First

Non-colour redundancy isn't optional

WCAG 1.4.1 requires colour not be the only channel. But beyond compliance — in a car at speed, in bright sunlight, on a cheap screen — even good colours fail. Line weight + haptic + text ensures the signal survives all conditions. Redundancy is robustness.

Future Work

Where this goes next

User-customisable colour pairs for personal CVD preferences. Extension to roundabouts, toll plazas, and complex interchanges. CarPlay / Android Auto large-screen adaptation where the signal would be even more impactful. A controlled user study on a closed road to measure actual lane-change timing.

Impact Estimate

Why it matters at Google scale

Google Maps has ~2 billion users. Even a 1% improvement in exit-miss rate across global highway navigation sessions represents millions of safer journeys per day. The feature requires no hardware, no SDK research, and ships to all existing users immediately upon release — unlike Google's own Live Lane Guidance, which requires car-embedded cameras.