back
Electric Vehicle  /  UX Design  /  HMI

Human-Machine Interface for an Electric Truck

Team

Mia Vong, Kulbir Singh,
Keyvyn Rogers, Jackie Khuong

Tools

Figma  ·  Miro  ·  Protopie

Timeline

4 months

E-Truck HMI - both cluster displays in cab

01Overview

Background

The HMI Capstone sponsored by PACCAR was created to design a human-machine interface (HMI) for the University of Washington's E-Truck, a student-led initiative to convert a Class 7 diesel truck into an electric vehicle (EV) in a 4 year timeline.

Design Question

How might we design a safe, intuitive, development-ready HMI that enhances the driving experience in electric commercial trucks and supports the industry's transition to battery-electric vehicles?

User-Centered Design Approach

Discover

Interviewed PACCAR drivers; benchmarked Kenworth and Peterbilt HMI requirements

Define

Generated concept sketches, built UI flows, and designed Figma wireframes

Develop

Defined content criteria, product dimensions, and placement with E-Truck

Deliver

Built a ProtoPie demo with keyboard-simulated controls + Figma designs

02Problem

The trucking industry's transition to EVs

The current E-Truck had no digital interface capable of communicating EV-specific information to drivers.

0%

of medium- and heavy-duty vehicles in California must be zero-emission by 2045.

California Governor's Office of Business and Economic Development

Pain Points

01

The current diesel gauge is not equipped to show EV-critical information

02

Drivers still trust familiar analog cues so the HMI must blend old and new design language

03

Currently no interactive interface to track performance & charging metrics

04

No E-Truck members have any UX or digital design / prototyping background

E-Truck cab disassembly

The E-Truck cab in its current state with the original diesel gauge cluster

03Solution

A dual-display HMI: A-Cluster & B-Cluster

We designed two co-existing displays - an A-Cluster driver instrument panel and a B-Cluster infotainment screen - that preserved diesel familiarity while surfacing EV-critical intelligence in real time.

A-Cluster Home A-Cluster
B-Cluster Home B-Cluster

A-Cluster driver instrument display (left) and B-Cluster infotainment display (right)

04Research

User interviews & competitive analysis

Our team interviewed PACCAR test-engineers, collaborated with E-Truck teams, and benchmarked Kenworth, Peterbilt, and competitor HMIs to define feature requirements.

5

Control team engineers interviewed

5

EV test engineers interviewed

5

Competitors benchmarked

"

Unlike conventional automotive vehicles, our trucks aren't just for transportation - they're a tool that drivers rely on every day to get their job done.

PACCAR Test Engineer

Competitive Analysis

Competitor Analysis Board

Kenworth T680E  ·  VOLVO VNR Electric  ·  eCascadia  ·  Nikola Electric  ·  Tesla Semi

Visual Design Exploration

Design exploration: competitor HMI references

Reference HMIs from Tesla Semi, Kenworth T680E, Nikola Electric, and eCascadia Freightliner

Field Testing

Trips to the E-Truck shop helped us validate display shape for steering-wheel visibility and informed placement for gauges, the regenerative bar, and charge indicators.

E-Truck shop E-Truck Shop
Testing cluster size through steering wheel Cluster Sizing
Original diesel cluster gauge Diesel Cluster

Left: The E-Truck shop · Top right: Testing A-Cluster dimensions through the steering wheel · Bottom right: The original diesel gauge cluster

05Process

Building prototypes

Design Criteria

Translate EV Behavior

Reduce "range anxiety"

Communicate regenerative braking

Alert EV-specific warnings

Promote Safe Driving

Live system diagnostics

Prevent distractions

Keep analog familiarity

Real-Time Feedback

Display performance metrics

Highlight battery health

Optimize energy consumption

A-Cluster - Iterations

Lo-Fi · 01 Low Fidelity sketch 1
Lo-Fi · 02 Low Fidelity sketch 2
Mid-Fi · 01 Mid Fidelity wireframe 1
Mid-Fi · 02 Mid Fidelity wireframe 2

Interaction Architecture

A-Cluster state architecture diagram

User flow mapping keyboard-driven transitions

06Final Product

A-Cluster - Driver Instrument Display

Displayed in front of the driver behind the steering wheel. Houses all real-time feedback: speed, energy/range, warning icons, gauge metrics, and the regenerative charging bar.

A-Cluster Final Design Hi-Fi · A-Cluster
1

Personalized Messaging

Real-time risk messaging specific to the health status of the truck and driver's safety

2

Gauge Metrics

Kenworth-inspired gauges to communicate driving performance with diesel familiarity

3

Battery Status

Real-time battery bar to reduce range anxiety for long-haul driving

4

Regenerative Charging

Interactive bar showing power output & energy regeneration upon braking

A-Cluster - Live in the Cab

A-Cluster driving simulation ProtoPie Prototype

ProtoPie prototype simulating driving state - keyboard-controlled up and down arrows for the driving state

B-Cluster - Infotainment Display

Sits to the right of the driver. Houses navigation, media, vehicle status, trip summaries, and EV-specific metrics like powertrain performance and battery health.

Vehicle Status Trip Summary Battery Health System Check
1

Vehicle Status

Vital information on truck performance: powertrain, energy output, and tire health

2

Trip Summary

Overview of distance, energy efficiency, drive time, and battery status per trip

3

Battery Health

Communicates battery performance and charge cycles to reduce range anxiety

4

System Check

Initiates an A-Cluster check to comply with safety regulations and prevent breakdowns

A-Cluster System Check

A-Cluster system check animation Figma · Animated

System check sequence A-Cluster: communicates the truck's pre-drive health checklist

07Reflection

Trucking makes the world go round!

Through research, design, and developement, I deepened my understanding of automotive mechanics and the EV landscape. Beyond the product itself, this capstone project broke new ground for my undergrad department, marking the first-ever HCDE and PACCAR collaboration and earning a "Best Impact" award from the undergraduate showcase out of 60 teams.

Future members of E-Truck will take over our Figma designs, ProtoPie prototypes, and physical displays. The electrical and controls technical teams will handle wiring and programming the interfaces to communicate with the Electronic Control Unit (ECU) in the 2026 academic year.

E-Truck HMI capstone team

Capstone team picture - 2025 HCDE undergraduate showcase