DiDi · Mobility Platform
Autonomous Trucking
Designing fleet ops + HMI interactions for autonomous trucking — mapping dispatch-to-execution workflows and defining risk-aware UI patterns for safety-critical scenarios.
Industry
Autonomous Trucking / Mobility
Timeline
May – Jul 2024 (3 months)
Role
Product Designer Intern
Tools
Figma, JavaScript, Adobe Premiere, After Effects, Blender, Procreate, Midjourney, Photoshop
Team
Senior Software Engineers, Product Manager, Senior Product Designer
Impact
10K+
Views on promotional video
1K+
Engagements on social platforms
5
Lighting scenarios defined & tested
2
Products shipped end-to-end
Overview
Two parallel workstreams, one mission
Workstream A
Enhanced the existing convoy trucking product through software and hardware upgrades — designing a driver dispatch app, refining HMI lane-change warnings, and defining an external lighting system for autonomous vehicles.
Workstream B
Contributed to the L4 autonomous concept truck definition for the April unveiling, and led the production of a promotional video that showcased product differentiation and key features to 10K+ viewers.
Dispatch App for Drivers
Problem
Previous dispatch operations relied on WeChat group chats, which was cumbersome and difficult to manage. Drivers had no centralized way to view orders, track status, or coordinate with the fleet in real time — creating friction that slowed operations and increased errors.
Solution
Designed a dedicated mobile dispatch app that replaced ad-hoc messaging with a structured workflow. The app provides identity-based authentication, real-time order lists, status tracking, and information displays that highlight key details at a glance.
Key Features
Sign In / Sign Up
Identity-based authentication ensuring only verified drivers access dispatch.
Order List
Real-time display of available and assigned orders with filtering and sorting.
My Order
Personal order tracking with status updates from assignment through delivery.
My Account
Driver profile management for personal info, truck type, and preferences.
Information Display
Highlighted key details and contextual information to speed decision-making.
Smart Prioritization
Strategy to surface suitable orders based on driver location, truck type, and preferences.
Design Handoff
Used the Lanhu platform to deliver design specifications and assets to software engineers, enabling seamless dev handoff and reducing back-and-forth during implementation.
HMI Lane Change Warning Design
Context
V2X information visualization is the main component of the HMI, dynamically displaying real-time statistics from road inspection. A critical alert triggers when a turn signal indicates lane-change intention for nearby vehicles or obstacles — demanding immediate, unambiguous driver attention.
Challenge
The initial design (Version 1) was too visually dominant — it overwhelmed the driver’s attention and obstructed other critical information on the display. The warning needed to be noticeable without being disruptive, balancing safety urgency with information clarity.
Iteration Insight
Version 1 was flagged as “too obvious, affecting the driver’s attention and obstructing other information.” Through iterative refinement, the warning was redesigned to use subtler visual cues — peripheral color shifts and directional indicators — that communicate urgency without hijacking the driver’s primary field of view.
Lighting System Design & Testing
During autonomous convoy driving on both public and closed roads, it is necessary to communicate specific information to the external environment — other drivers, pedestrians, and roadside infrastructure. The lighting system serves as the vehicle’s primary non-verbal communication channel.
Driving Scenarios
Deactivated
Manual driving mode — standard vehicle lighting behavior.
Standard lights
Autonomous Driving
Autonomous driving is activated and the truck is operating within convoy.
Flowing green light strip
Cut-in
A social vehicle merges into the autonomous convoy, requiring awareness signals.
Fast flashing yellow light strip
Fallback (Mobile)
An autonomous truck separates from the convoy and operates alone but can still drive.
Double flashing yellow light strip
Fallback (Stopping)
The truck is in fallback mode and pulling over or stopping on the roadside.
Double flashing red light strip + rear strobe
Cut-in
A scenario where a social vehicle merges into the autonomous convoy. The lighting system must immediately signal awareness to surrounding vehicles to maintain safety.
Fallback
A scenario where an autonomous truck separates from the convoy and operates alone. Lighting escalates from yellow to red depending on whether the vehicle can continue driving or must pull over.
Promotional Video Creation
Led the production of a promotional video that effectively showcased product differentiation and key features of KargoBot’s autonomous trucking platform. The video reached over 10,000 views and generated 1,000+ engagements across social platforms.
The production leveraged a multi-tool pipeline — from Blender for 3D renders and After Effects for motion graphics, to Premiere for final edit and color grading — telling a compelling story that started from real-world scenarios and challenges.
L4 Concept Truck Definition
Contributed to defining the L4 autonomous concept truck for the April unveiling event. This workstream involved envisioning the future state of fully autonomous freight — from exterior communication design to the reimagined cab experience when no human driver is required.
Design Principles
Guiding the work
Safety First, Always
Every design decision was filtered through a safety lens. In autonomous trucking, a confusing UI element is not just a UX problem — it is a safety hazard. Warnings must be clear but not disruptive; information must be timely but not overwhelming.
Communicate Without Words
From external lighting to HMI alerts, the vehicles must communicate their intent to humans who cannot hear or speak to them. Color, motion, and timing become the primary design language for non-verbal communication at highway speeds.
Design for the Edge Case
Autonomous systems fail at the margins. Cut-ins, fallbacks, and separation events are rare but critical. Designing for these edge cases — not just the happy path — is what makes the difference between a demo and a product.
Key Takeaways
Managing Parallel Tasks
Learned how to handle multiple tasks efficiently, allocate time wisely, and prioritize based on importance and urgency. Balancing the dispatch app, HMI design, and lighting system simultaneously demanded rigorous time management and clear communication.
Product Sense
Developed broader strategic thinking by analyzing potential scenarios and features comprehensively. Went beyond pixel-perfect screens to consider how the product behaves in edge cases, participating in testing and validation alongside engineering.
Storytelling
Enhanced storytelling skills through the promotional video and concept definition work. By starting from real-world scenarios and challenges, learned to present a technology-driven product in a simple and compelling way that resonates with diverse audiences.
Thanks for reading
View More Projects→