Generative Drive Coach

A driving coach that talks, so new drivers don’t have to look.

My part: UX engineer. I owned the experience end to end: research, voice and screen design, the simulator rig, and the studies.
When: Nov 2025 to Oct 2026, at Woven by Toyota
With: AI/ML engineers, systems integration engineers and data analysts, across Woven, TRI, TMNA and TCNA
Built on: CARLA simulator, a Python bridge, React and TypeScript on an iPad HMI, CAN-bus signals

A driving coach that talks, so new drivers don’t have to look.

What the studies showed

100+ → 22

drivers’ research, sorted into driving scenarios

70%

of drivers understood the re-timed voice instructions, a 50% improvement

40%

faster to act on the AI’s guidance, in a 25-person simulator study

80%

of 35 participants preferred a quieter, less talkative AI

Real-car retest, a CARLA simulator study, and A/B tests with contextual interviews at Woven by Toyota. Every alert was designed to meet the industry’s 2-second glance-to-comprehension standard.

Chapters

01Approach & Process
02Voice-first UI
03Scenario Coverage
04Design System
05Vehicle Integration
06Simulation & Testing
07Physical Prototyping

01Approach & Process

Interactive prototypeOpen the interactive prototype

Approach & Process

01
I led the UX for Generative Drive Coach across research, HMI, voice interaction design, prototyping, and validation.
Tap to flip
Full notes for End-to-End Ownership:
Owned end-to-end UX for Generative Drive Coach, spanning research, HMI and voice interaction design, prototyping, and validation.
02
I scaled a teen driving concept into coaching patterns covering parking, intersections, stop signs, turns, lane changes, and speed management.
Tap to flip
Full notes for Reusable Coaching Patterns:
Scaled a single teen-driving concept into a reusable coaching pattern system.
Patterns now cover parking, intersections, stop signs, turns, lane changes, and speed management, all built on the same voice-first coaching logic.
03
I grounded designs in CARLA simulation, Vehicle SDK signals, and CAN bus data to test coaching against live vehicle states.
Tap to flip
Full notes for Cross-Functional Partnership:
Grounded every design decision in Woven’s engineering stack:
- CARLA: a proprietary driving simulator used to test coaching logic before real-world validation.
- Vehicle SDK: real steering, speed, and sensor signals piped into working prototypes.
- CAN signals: live vehicle bus data that grounded HMI behavior in actual driving state.
04
I built prototypes across voice-enabled Figma flows, CARLA simulator scenarios, and a physical steering and pedal rig.
Tap to flip
Full notes for Multi-Fidelity Prototyping:
Rapidly translated feedback into working prototypes across Figma, simulator, and physical hardware:
- Voice-enabled Figma flows: fast, low-fidelity concept testing.
- CARLA simulator scenarios: realistic, repeatable driving conditions.
- Physical steering & pedal rig: paired with updated HUD concepts for hands-on validation.
05
I ran study plans, voice-frequency tests, and CARLA driving simulations to validate and refine coaching behavior from participant feedback.
Tap to flip
Full notes for Independent Research & Validation:
Owned research and validation end to end:
- Study plans designed and run independently, start to finish.
- Voice-frequency studies to tune how often and how loudly the coach should speak.
- Simulated driving studies in CARLA to validate coaching behavior before road testing.
- Iterative refinement of coaching behavior based on participant feedback.

Show full notes

01End-to-End Ownership

Owned end-to-end UX for Generative Drive Coach, spanning research, HMI and voice interaction design, prototyping, and validation.

02Reusable Coaching Patterns

Scaled a single teen-driving concept into a reusable coaching pattern system.

Patterns now cover parking, intersections, stop signs, turns, lane changes, and speed management, all built on the same voice-first coaching logic.

03Cross-Functional Partnership

Grounded every design decision in Woven’s engineering stack:

CARLA: a proprietary driving simulator used to test coaching logic before real-world validation.
Vehicle SDK: real steering, speed, and sensor signals piped into working prototypes.
CAN signals: live vehicle bus data that grounded HMI behavior in actual driving state.

04Multi-Fidelity Prototyping

Rapidly translated feedback into working prototypes across Figma, simulator, and physical hardware:

Voice-enabled Figma flows: fast, low-fidelity concept testing.
CARLA simulator scenarios: realistic, repeatable driving conditions.
Physical steering & pedal rig: paired with updated HUD concepts for hands-on validation.

05Independent Research & Validation

Owned research and validation end to end:

Study plans designed and run independently, start to finish.
Voice-frequency studies to tune how often and how loudly the coach should speak.
Simulated driving studies in CARLA to validate coaching behavior before road testing.
Iterative refinement of coaching behavior based on participant feedback.

Voice-first UI

Adaptive Voice Coaching

I designed a voice-first coaching layer that delivers real-time, context-aware guidance without adding cognitive load, timed to the exact moment it’s needed: a stop sign, an intersection, a lane change. Voice-frequency studies shaped the interaction model, balancing how often the coach speaks against how much a new driver can actually absorb behind the wheel.

Scenario Coverage

From Teen Driving to a Coaching System

What began as a single concept for coaching teen drivers became a reusable pattern system I built across parking, intersections, stop signs, turns, lane changes, and speed management. Each pattern shares the same voice-first coaching logic, so adding a new driving scenario means composing existing building blocks, not starting from scratch. It’s a system, not a one-off feature.

Generative Drive Coach — Scenario Coverage

Design System

A small token system — colors, type, spacing, and radii — kept the coaching HMI visually consistent from early dashboard mockups through CARLA test builds and the physical rig.

Implementation

Parking Assist

Concentric proximity rings under the top-down render

ZStack {
    ForEach(rings) { r in
        Circle()
            .stroke(r.color.opacity(0.35), lineWidth: 2)
            .frame(width: r.radius * 2)
    }
    CarTopDownImage()
}

for (final ring in rings) {
  canvas.drawCircle(
    center,
    minDimension * ring.radiusFactor,
    Paint()
      ..color = ring.color.withValues(alpha: 0.35)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2,
  );
}

<div class="relative w-40 h-40">
  <span class="absolute inset-0 rounded-full
    border-2 border-emerald-400/40"></span>
  <span class="absolute inset-8 rounded-full
    border-2 border-amber-400/40"></span>
  <img src="/car-top-down.png"
    class="absolute inset-14 object-contain" />
</div>

Drive Mode Selector

Segmented Park / Drive toggle

Picker("Mode", selection: $mode) {
    Text("Park").tag(DriveMode.park)
    Text("Drive").tag(DriveMode.drive)
}
.pickerStyle(.segmented)
.tint(.blue)

CupertinoSlidingSegmentedControl<DriveMode>(
  groupValue: mode,
  children: const {
    DriveMode.park: Text('Park'),
    DriveMode.drive: Text('Drive'),
  },
  onValueChanged: (v) => setState(() => mode = v!),
)

<div class="inline-flex rounded-lg bg-gray-100 p-1">
  <button class="px-4 py-1.5 rounded-md bg-white
    shadow text-sm font-medium">Park</button>
  <button class="px-4 py-1.5 rounded-md
    text-sm text-gray-500">Drive</button>
</div>

Speed & Gear HUD

Tabular-figure speed readout

Text(speed, format: .number)
    .font(.system(size: 48, weight: .bold))
    .monospacedDigit()
    .foregroundStyle(.white)
 
Text(gear)
    .font(.system(size: 14, weight: .semibold))
    .foregroundStyle(.secondary)

Text(
  '$speed',
  style: const TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.bold,
    fontFeatures: [FontFeature.tabularFigures()],
    color: Colors.white,
  ),
)

<div class="text-white">
  <span class="text-5xl font-bold
    tabular-nums">72</span>
  <span class="ml-2 text-sm font-semibold
    text-gray-400">D</span>
</div>

Coaching Alert

Dismissible driver-behavior banner

HStack(spacing: 12) {
    Image(systemName: "exclamationmark.triangle.fill")
        .foregroundStyle(.orange)
    Text("Hard braking detected")
    Spacer()
    Button("Dismiss") { alert = nil }
}
.padding(16)
.background(.orange.opacity(0.12), in: .rect(cornerRadius: 12))

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.orange.withValues(alpha: 0.12),
    borderRadius: BorderRadius.circular(12),
  ),
  child: Row(children: [
    const Icon(Icons.warning_rounded, color: Colors.orange),
    const SizedBox(width: 12),
    const Expanded(child: Text('Hard braking detected')),
    TextButton(onPressed: onDismiss, child: const Text('Dismiss')),
  ]),
)

<div class="flex items-center gap-3 p-4
  rounded-xl bg-orange-500/10">
  <svg class="w-5 h-5 text-orange-500">...</svg>
  <p class="flex-1 text-sm">Hard braking detected</p>
  <button class="text-sm font-medium">Dismiss</button>
</div>

Climate Dial

Rotary temperature control

Circle()
    .trim(from: 0, to: progress)
    .stroke(.blue, style: StrokeStyle(lineWidth: 6, lineCap: .round))
    .rotationEffect(.degrees(-90))
    .overlay(Text("\(temp)°").font(.title2.bold()))
    .gesture(RotationGesture().onChanged { angle in
        progress = angle.degrees / 360
    })

CustomPaint(
  painter: DialPainter(progress: progress, color: Colors.blue),
  child: Center(
    child: Text('$temp°', style: const TextStyle(
      fontSize: 22, fontWeight: FontWeight.bold)),
  ),
)

<div class="relative w-24 h-24">
  <svg class="rotate-[-90deg]" viewBox="0 0 36 36">
    <circle class="text-blue-500" cx="18" cy="18" r="15.9"
      fill="none" stroke="currentColor" stroke-width="3"
      stroke-dasharray="70 100" stroke-linecap="round" />
  </svg>
  <span class="absolute inset-0 flex items-center
    justify-center font-bold">72°</span>
</div>

Now Playing

Media playback row

HStack(spacing: 12) {
    Image(track.artwork)
        .resizable().frame(width: 40, height: 40)
        .clipShape(RoundedRectangle(cornerRadius: 8))
    VStack(alignment: .leading) {
        Text(track.title).font(.subheadline.bold())
        Text(track.artist).font(.caption).foregroundStyle(.secondary)
    }
    Spacer()
    Button(action: togglePlay) {
        Image(systemName: isPlaying ? "pause.fill" : "play.fill")
    }
}

Row(children: [
  ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Image.asset(track.artwork, width: 40, height: 40),
  ),
  const SizedBox(width: 12),
  Expanded(child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(track.title, style: const TextStyle(fontWeight: FontWeight.w600)),
      Text(track.artist, style: const TextStyle(color: Colors.grey)),
    ],
  )),
  IconButton(
    icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
    onPressed: togglePlay,
  ),
])

<div class="flex items-center gap-3">
  <img src="/artwork.jpg"
    class="w-10 h-10 rounded-lg object-cover" />
  <div class="flex-1 min-w-0">
    <p class="text-sm font-semibold truncate">Night Drive</p>
    <p class="text-xs text-gray-400 truncate">Veltron Sounds</p>
  </div>
  <button class="p-2 rounded-full hover:bg-gray-100">
    <svg class="w-4 h-4">...</svg>
  </button>
</div>

Each live component above is a real widget from the Flutter build. Toggle between SwiftUI, Flutter, and Tailwind to see the same pattern implemented natively across platforms.

Color tokens. A restrained palette tuned for daylight glare, night driving, and quick at-a-glance recognition.

Type and spacing scales. A screen-legible type scale, sized and weighted for a quick glance at speed. Consistent spatial rhythm across dashboard, HUD, and mobile companion surfaces.

Corner radius tokens. Rounded surfaces calibrated to feel tactile on a touchscreen, not decorative.

Vehicle Integration

HUD & In-Vehicle Signals

To make coaching feel native to the car, I partnered with the software-integration and ML teams to ground the HMI in real vehicle state: pulling live signals from the Vehicle SDK and CAN bus into updated HUD concepts, so guidance stays synced to actual speed, position, and steering input, not a simulated approximation.

Generative Drive Coach — Vehicle Integration

Simulation & Testing

Validating in CARLA

Working with the ML and research teams, I connected coaching designs to CARLA, Woven’s proprietary simulation platform, to run realistic driving scenarios and pressure-test coaching behavior before it ever touched a real vehicle.

Generative Drive Coach — Simulation & Testing

Physical Prototyping

From Figma to the Driver’s Seat

Feedback moved fast, so I kept prototypes moving just as fast: voice-enabled Figma flows for early concept testing, full simulator scenarios, and a physical rig with a real steering wheel and pedal controls. Testing on physical controls surfaced timing and tone issues a screen-only prototype never would catch. Coaching that feels right in Figma can feel intrusive the moment your hands are actually on the wheel.

Generative Drive Coach — Physical Prototyping