Skip to content
Resume
KargoBot · DiDi subsidiary · May – Jul 2024

Designing how a driverless truck communicates, inside and out.

Independent from DiDi’s department, KargoBot.ai is committed to advancing unmanned freight technology and the commercialization of large-scale operations. It developed an innovative L2+L4 hybrid autonomous trucking convoy solution and is actively exploring full L4 product possibility.

Safety-critical UXHMI / V2XLighting languageStorytellingp5.jsVideo
Date
May – Jul 2024 · 3 months
Team
Product Designer Intern (Yuchen), Senior Software Engineers, Product Manager, Senior Product Designer
Deliverables
Dispatch App · HMI · Lighting System Design & Test · Promotional Video · Concept Truck Definition · RRD
Tools
Figma · JavaScript · Adobe Premiere · After Effects · Blender · Procreate · Midjourney · Photoshop
Two KargoBot autonomous trucks driving in convoy on a desert road · a lead L4 truck and a following L2 truck.KargoBot on LinkedIn ↗
0Section

Overview

One summer, two tracks: ship the convoy product, and help define the L4 concept truck.

During my summer internship at KargoBot I worked as a product designer and took on some product-manager responsibilities. The work split into two parallel tracks.

KargoBot X6000 autonomous fleet on a desert highway
A

Upgrade the convoy trucking product

Existing product

Enhanced the existing convoy trucking product by upgrading its software and hardware features, including design, testing, and iteration.

KargoBot autonomous trucks on an elevated highway interchange
B

Define the L4 concept truck

Concept, April unveil

Contributed to the product definition and specification for the L4 autonomous concept truck, which is set to be unveiled and showcased in April this year.

Convoy Trucking Product
Line-art of four convoy trucks, three autonomous and one human-supervised
1Section

HMI Lane Change Warning Design

In-cab platooning HMI tablet

Requirements

V2X information visualization is the main part of the HMI, which dynamically displays real-time statistics of road inspection. When the system detects that the driver has activated the turn signal (indicating a lane-change intention), it alerts the driver to vehicles or obstacles on the same side.

Version 1

Too obvious, affecting the driver’s attention and obstructing other information.

VehiclesObstacles

Version 2

Pared back to a quieter cue that warns on the relevant side without covering the road view or the rest of the HMI.

VehiclesObstacles
2Section

Lighting System Design & Test

Context

During autonomous convoy driving on both public and closed roads, it is necessary to communicate specific information to the external environment in certain scenarios. By adding new car-light interactions, the surrounding audience can accurately understand the conveyed intent, enhancing overall road safety.

Feature Definition

Scenario → lighting mode (switches automatically)
  • Autonomous driving is activatedLight strip turns on with a flowing effect (green) · Rear lightbox turns on
  • Deactivated (manual driving)Light strip turns off · Rear lightbox turns off
  • Cut-inLight strip switches to fast flashing (yellow)
  • Fallback, but the vehicle can still driveLight strip switches to double flashing (yellow)
  • Fallback, and stopping or pulling overLight strip switches to double flashing (red) · Rear strobe light turns on
→

Cut-in

A scenario where a social vehicle merges into the autonomous convoy.
→

Fallback

A scenario where an autonomous truck separates from the convoy and operates alone.

Prototypes & Tests

Interaction-light concept board, front / rear / side views

Light strip flowing effect

The flowing light effect is used to represent convoy driving, with the following requirements:

1

Seamless transition between trucks

When viewed from the side, the flowing light effect across all trucks in the convoy should be continuous.
2

Consistency across truck surfaces

The flowing light effect should be continuous across the front, side, and rear view of each truck.

These design requirements make the lighting effect particularly challenging, as it requires precise timing and synchronization across multiple vehicles and different lighting zones on each truck. Therefore, I created and tested the flowing light effect in the p5.js editor, adjusting parameters to quickly modify the effect.

p5.js editor running the flowing-light prototype

Rear lightbox

Rendered glow states of the rear lightbox
3Section

Dispatch App for Drivers

Problem Statement

KargoBot needs to assign transportation tasks to truck drivers and track the completion status of the delivery orders. Previously, the dispatch process was managed through WeChat group chats, which was cumbersome and difficult to manage.

The old flow ran entirely inside a WeChat group

  1. 01Admin · Post order details
  2. 02Driver · Respond in the group to accept
  3. 03Both · Confirm with each other
  4. 04Driver · Complete transportation
  5. 05Admin · Record the assignments in the backend
  6. 06Admin · Verify task completion

Design Principles

Driver profile

Middle-aged · male · lower educational background

Design choices

Intuitive features · easy-to-click buttons · clean interface · simplified navigation

Design Solutions

I designed an app that lets drivers browse and claim orders and reach an administrator when they need one.

Sign in / sign up

Sign in · defaultSign in · invalid ID numberSign in · wrong credentials

My account

Account · profileAccount · edit infoAccount · contact admin

Order list

Orders · order poolOrders · refresh locationOrders · loading

My order

My order · awaiting confirmationMy order · confirmedMy order · history

Product Thinking

How to prioritize the most suitable orders at the top of the list based on the driver’s situation, to reduce browsing and decision-making time.

Dynamic matching strategy

Drivers

  • Location
  • Truck type
  • Preference
  • Number (capacity)

Orders

  • Location
  • Requirement
  • Deadline
  • Popularity
4Section

Video Creation

I led the production of a promotional video showcasing the product’s differentiation and key features. It earned 10K+ views and 1K+ engagements on Chinese social platforms, where KargoBot’s audience is; the LinkedIn link below is a mirror for international viewers.

0K+

Views

0K+

Engagements

Frame from the KargoBot promo video · a platoon interacting with a cut-in vehicle during a lane changeWatch on LinkedIn ↗
Concept L4 Product
Vector illustration of a three-truck autonomous platoon
5Section

Storytelling & Future Truck Design

Future-truck storytelling and industrial-design boardRecognized by three design awards ↗
6Section

Takeaways

01

Managing parallel tasks

I shipped the driver dispatch app while the L4 concept truck was still being defined, sequencing the two live tracks by importance and urgency and keeping both teams aligned.
02

Product sense

Turning WeChat-group dispatch into a claimable order pool meant designing the order-push logic, matching strategy, and error states with the PM, not just the screens.
03

Storytelling

Framing the concept truck’s narrative and leading the promo video taught me to present a technology-driven product from real-world scenarios first.
DiDi badge
DiDi 12th anniversary
KargoBot HQ