SHIPPED
IN-CAR NAVIGATION UX · 2024
Untangling 2 years of product debt in
Buick & Cadillac’s EV charging planner
MY ROLE & TEAM
Sole Product Designer
Me
Me · Sole Product Designer
PLM
Product Line Manager
PO
Product Owner
FO
Function Owner
PdM
Supplier · Product Manager
PM
Supplier · Program Manager
UX
Supplier · UX Designer
UI
Supplier · UI Designer
EV road trips are really a thing in China right now.
But before you set off on a long drive: where do you charge?
Let’s find out on a real trip: from Shanghai to Universal Studios Beijing.
When regular navigation fails your EV trip,
Smart Charging Planning
is here to help ☝️
If your battery won’t make it, SCP automatically adds charging stations to your route,
so you can eventually reach your destination…
… in theory 🥀
01 · VIDEO PLACEHOLDER
02 · VIDEO PLACEHOLDER
03 · VIDEO PLACEHOLDER
01
One tap, and the range warning turns into a plan
Smart Charging Planning now has a spot of its own: a banner in the route panel. It’s easier to notice, takes less effort to turn on and off, and shows where the plan stands at each step.
02
Know what’s waiting at each stop, at a glance or in detail
When enabled, the charging plan delivers all the information drivers need, curated layer-by-layer so that nobody is flying blind.
03
A plan smart enough to handle a route change
SCP now copes better when drivers improvise while planning a route: add or remove a waypoint, and the charging plan updates promptly to match.
A MINOR BUG
Two alert banners fighting for the same pixels. What’s the big deal?
During route planning, two alert banners could show up in the same spot. One covered the other entirely, with no sign that anything sat underneath.
The tricky part: both banners had a good reason to win priority. One was more urgent; the other had higher stakes and was the only entry to Smart Charging Planning.
▲ The Bug Replay. Banner 1 asks drivers to add a plate to avoid restricted zones.
Banner 2, hidden beneath, warns the range falls short and holds SCP’s only entry.
SCP had already become table stakes. Almost every EV out there has it. To see how others handled it, I went through an online library of in-car interface recordings, and looked at 25 BEV models.
Even from a quick browse, a hunch formed: the leading players seemed to share one playbook, and we were the odd one out. Not in a good way.
A MAJOR DEBT
Looking under the hood
for the very first time
The interaction spec and change log revealed a much quieter warning: SCP had been locked since late 2021 and first shipped on the Cadillac LYRIQ in mid-2022.
For nearly 2 years, spanning 9 quarters, it received zero OTA updates.
交互文档和change log reveal了一个更加silent的warning：这个功能需求已经这样锁定了快三年，而距离首次上车也已经过去快两年了。这两年这个功能一直保持这个现状。
SCP功能属于BEV specific的地图导航功能，而这一期需求包含了好几个这样的bev only功能，统一在2021年年末锁定了需求，随后在2022年的lyriq上首次交付。从2021年末到2024年年始，没有经历任何一次的OTA。而这9个季度，恰恰就是中国新能源车竞争最激烈，智能座舱交互革新最卷的两年。
Those exact two years were the fiercest phase of China’s EV cockpit race, and yet our charging planner stayed frozen in time.
2021
2022
2023
2024
2025+
Q1
Q2
Q3
Q4
Q1
Q2
Q3
Q4
Q1
Q2
Q3
Q4
Q1
Q2
Q3
Q4
NEW SOFTWARE ORG OWNS PRODUCT DESIGN
IN-CHINA-FOR-CHINA
Interaction spec
v1.0 — NEVER REVISED
0 OTA UPDATES
SHIPPED MODELS
Cadillac LYRIQ
Buick Electra E5
Buick Electra E4
Cadillac OPTIQ
Cadillac VISTIQ
TBA
MY AUDIT · Q1 2024
LOCKED Q4 2021
Cadillac LYRIQ
JUN 2022
Buick Electra E5
APR 2023
Buick Electra E4
JUN 2023
Cadillac OPTIQ
APR 2024
Cadillac VISTIQ
▲ The Debt Gantt. By my audit in Q1 2024, this one spec had covered 3 models across two brands, with 2 more models to come.
CONTEXT
0 OTA, why is that a big deal?
→
ART
And SCP was just a symptom. By early 2024, our entire navigation app looked a generation behind China’s leading EVs.
CONTEXT
Why is this happening?
→
ART
Side Panel: 地图导航这一块Root cause在于以往和供应商合作的模式（所有交代合作模式的部分进入side panel）
在以往的合作模式下，根本做不出像竞品地图桌面、分屏、小窗、甚至高精地图与智能驾驶SR融合这样的产品形态。
As the automaker, we had long left in-car navigation UX to our suppliers. We wrote the requirements and reviewed what came back, one issue at a time. That worked while cabin software changed once a model year.
It stopped working once domestic EV makers brought the whole software stack in-house and began shipping updates every few weeks. The cockpit had become a reason to buy one car over another, and we were losing on it.
So the company set up its own software organization to take product design in-house, and asked every product line to audit its experience and come back with a roadmap.
I had just joined the navigation team, and this was my first assignment. Before planning anything, I walked through the product end to end. The banner bug was one of the first things I ran into.
I was part of a 新组织，就是为了解决这些long lasting issues，帮大船掉头，own回vehicle software的产品设计和开发诞生的。这次audit是我的第一个assignment。
I did a guerrilla test with 3 colleagues who were all internal BEV owners.
While all 3 have prior experience driving long range (typically requiring at least 1 charging stop), none of them had ever activated this feature.
I also talked to 2 "Experience Officers" via our power users' community.
While all 3 have prior experience driving long range (typically requiring at least 1 charging stop), none of them had ever activated this feature.
Have you ever used the SCP feature in your BEV’s nav app? 🤔
·
🤷♂️ I had no clue this feature existed!
·
📱 Nah. I just use CarPlay with Amap. The built-in nav is ANCIENT!
·
🙅♀️ I just had my husband ride shotgun and plan the charging for me.
▲ The guerrilla test surfaces two compounding issues: poor discoverability and a lack of trust in the built-in navigation.
REVERSE ENGINEERING
Using our competitors
as our researchers
To fix SCP, I first needed to know what a decent one looked like out there.
Online walkthroughs only filmed the happy path, but the moments I cared about only happened in a real car:
the driver changing their mind
adding or removing a stop
dismissing a prompt
So over one weekend, I tested 9 competitors hands-on across 10+ showrooms.
I went through each competitor's route planning flow from start to finish, with the 3 questions a driver runs into along the way.
They run from the moment the feature appears to the moment the route changes under it, and they shape everything that follows, in this audit and in the redesign after it.
1
THE ENTRY
How & where do I turn this on?
2
THE INFORMATION SURFACED
What does it tell me?
3
ROUTING LOGIC
If I change my route, does the plan keep up?
Time was ticking. Over one weekend, I visited 10+ showrooms, recorded hands-on walkthroughs, and built a structured matrix to reverse-engineer the underlying logic of each system.
·
1 / THE ENTRY
Before judging what SCP plans, a driver has to reach it at all.
The entry sounds trivial, but across ten systems it split into 3 separate decisions each brand had made, mostly without appearing to notice:
When SCP turns on by default
Where the control lives on screen
What happens once you touch it
So I mapped all 10 against those 3 decisions, and a rough consensus showed up, with us outside it.
Most brands had quietly converged on the same answers. We had landed on the opposite side of nearly every one.
🔍 FINDING 1.1
🔍 FINDING 1.2
🔍 FINDING 1.3
There are 2 major types of entry placement:
AITO
BYD
Ji Yue
Li Auto
NIO
Tesla*
Xiaomi
XPeng
Zeekr
SGM
6 out of 9 competitors incorporate the SCP entry into the route panel, rather than map overlays.
* Tesla skips the route planning screen entirely. Selecting a destination immediately starts navigation, and Trip Planner, its SCP equivalent, activates automatically when the route exceeds current range.
·
2 / THE INFORMATION SURFACED
Once SCP is on, the plan is only as good as the information surfaced with it.
Comparing ten systems, I found they all surface this information in two layers.
Layer 0 is what's visible at a glance.
Everything the route view adds about the charging plan the moment SCP is on, no taps needed.
Layer 1 is something that's one tap away.
Whatever sits one tap deeper, a station page, an overview of the whole plan, wherever that tap leads.
I ran all 10 systems through this frame, field by field, and logged every piece of information each layer surfaces into 2 comparison tables.
DATA
See the two comparison tables
→
ART
🔍 FINDING 2.1
🔍 FINDING 2.2
🔍 FINDING 2.3
AITO
BYD
Ji Yue
Li Auto
NIO
Tesla
Xiaomi
XPeng
Zeekr
SGM
At Layer 0, 8 out of 9 competitors already surface charging-specific fields, not just location. Ours surfaces location only.
Layer 0 should help the driver judge the plan.
Judging a stop means weighing whether it can charge you, not just whether you can reach it, availability, speed, and price are what make that call.
Our Layer 0 carried only location and ETA: enough to reach a stop, not to judge it.
Layer 1 should let the driver verify the stops.
A tappable station page lets the driver check any recommendation the system makes, which is the industry baseline, not a differentiator.
Our Layer 1 didn't exist: a recommended stop couldn't be opened at all.
·
3 / ROUTING LOGIC
The first two gaps were things a driver could see. This one sits underneath them.
A regular stop is a fixed waypoint that can bend the route.
Like picking up a friend at their place on the way to the beach: it has to be them, and if you drive past, you turn back. The stop bends the route around itself.
A charging stop is fungible, and it must follow the route.
Like stopping for gas or lunch: miss one, or find it closed, and you take the next one down the road. The route comes first, the charging stops fall along it.
regular stop 图
charging stop 图
Simply put: the route is determined by the start, the end, and any regular stops in between, while a charging stop is a product of the route.
That distinction decides everything downstream, but it’s abstract, so to make the gap visible to non-design stakeholders, I built them a physical model: the route as a rubber band, regular stops as pushpins, charging stops as beads.
Here’s a simple analogy. Picture the route as an infinitely stretchable rubber band. The origin, the stops along the way, and the destination are the pushpins, holding the band in place and giving the route its shape. A charging stop is a bead threaded on the band. Pushpins can bend the route. Beads cannot. They only ever follow it.
So when a pin moves, the beads must slide. Change the route, and the charging plan must be recomputed.
The test: does each competitor’s system actually work this way?
Add. Starting from an SCP-on route, I added a new regular stop by hand. Do the charging stops redistribute around the changed route, or stay where they were?
Remove. Starting from a route that already held one regular stop with SCP on, I deleted that stop. Do the charging stops re-plan for the new route, or strand on the old one?
Add 图
Remove 图
🔍 FINDING 3.1
🔍 FINDING 3.2
🔍 FINDING 3.3
AITO
BYD
Ji Yue
Li Auto
NIO
Tesla
Xiaomi
XPeng
Zeekr
SGM
6 of 9 competitors distinguish charging stops from regular stops, with dedicated UI, interaction and routing logic.
·
HOLDING UP THE MIRROR…
DESIGN CONSTRAINTS
Short on screen,
Short on budget,
Short on certainty
Before getting down to pixels, I had to account for design constraints in 3 major aspects.
·
1 / FREEFORM DISPLAY ISSUES
All 4 current BEV models use freeform displays (i.e. screens cut to irregular, non-rectangular outlines). They were once a signature of the brand's interior identity, but had become a UX liability by 2024.
On one hand, the screen height was significantly constrained, limiting the interaction patterns available to us.
On the other, Chinese consumers had formed their mental model of smart cockpits around Tesla, NIO, and Huawei cabins, all built on standard rectangular screens.
▲ Vertical screen height across six brands.
Then there was reach.
Top and bottom, system safe areas reserved space for the control center and dock.
Left edge, a zone fell behind the steering wheel from the driver’s seat.
Right edge, where the freeform shape narrows and curves, sat in the stretching or hard-to-reach zone for most drivers. What looked like a long horizontal screen was, in usable terms, a much smaller rectangle in the middle.
▲ Effective design space after safe areas and reach zones. (Take Buick as an example.)
·
2 / COST vs EFFECT
Cost-cutting was the dominant theme of 2024 across the auto industry in China, and our project was no exception.
With margins under pressure industry-wide, every initiative at the company was filtered through VAVE (Value Analysis / Value Engineering), a framework that in practice had become synonymous with cost reduction. SCP was no exception: leadership approved a revamp in principle, but not the budget to match. Any solution that required deep architectural changes on the supplier side was off the table.
·
3 / POTENTIAL SUPPLIER TRANSITION
A map supplier switch was being evaluated, and every design decision had to account for it.
The company was considering a transition from Baidu Maps to AMap. The timeline was uncertain, but it would follow the SCP release, meaning any solution I proposed had to be built to survive the change.
The first implication: deep customization on Baidu's side was a risk; too much supplier-specific engineering would not carry over
The second: longer-term product directions had to describe what the product should do, not how one supplier should build it
THE REDESIGN
Reroute to the happy path
A driver running low on charge needs to find the plan, judge it, and count on it when the trip changes. The redesign takes them one at a time.
·
STEP 1 / STREAMLINING THE ENTRY
The status quo adopts the "little red bar" (essentially an alert banner) as the entry, with a 2-click flow rather than a 1-click toggle, both questionable design choices.
To solve this, I tested 4 patterns for a more reachable entry. All four are all essentially toggles but come in various forms.
OPTION A
OPTION B
OPTION C
OPTION D
OPTION A: Inline toggle
Option C & D were eliminated. 2 iterations for A & B.
LAYER 0
LAYER 1
LAYER 0: Charging station rec bubbles
Final design decision: the snackbar was replaced with a persistent, non-dismissible charging status component integrated into the route panel.
The new entry point surfaced charging status alongside route options — not below them. Rather than a warning that could be dismissed or obscured, charging awareness became part of the route selection decision. The component was suppressed in unconfigured vehicle states, eliminating the false-alarm failure mode.
Planning a route drops from 3 taps to 2. Undoing it costs only 1 tap, with no need to rebuild the trip.
BEFORE
AFTER
AFTER: 2 taps
·
STEP 2 / SURFACING THE INFORMATION
The recommendation list was redesigned to surface the information drivers need to trust the system's plan.
Each charging station now shows charger type (fast or slow), last visited timestamp from the community, available connector count, and estimated detour time. Station entries are individually tappable, opening a detail view with real-time availability data and the option to swap the station for an alternative. Drivers can accept the full recommended plan, modify individual stops, or remove a stop and let the system recalculate.
A new exception state was designed for the scenario where a previously confirmed charging station becomes unavailable during navigation.
When real-time data indicates that all chargers at an upcoming stop are offline or occupied, the system surfaces a non-blocking modal with a voice prompt. The driver is offered an alternative station without being required to manually re-enter the planning flow. The route updates forward from the current position — the missed stop is not treated as a navigation deviation.
What shows the first stop can charge you?
Live availability is the most direct answer, but…
But third-party data cannot faithfully reflect what is usable. A charger listed as free may be broken, blocked, or taken since the last refresh. Drivers already treat the number as a hint.
So the bubble words it as unoccupied, not available, and puts the operator beside it, which is how drivers already judge whether a stop is likely to work. Li Auto shows the operator at this layer too.
Later stops get one field. Which one?
Later stops get one field. Which one?
For later stops, drivers judge one thing: does the plan look reasonable? Accepting or refreshing the whole plan is the only action they have, and the distance from the previous stop answers that. A 40 km leg between two 250 km legs stands out at a glance.
The operator is not dropped. It appears when that stop becomes the first one, which is when drivers ask about it.
·
STEP 3 / SEPARATING CHARGING STOPS FROM WAYPOINTS
The interaction fixes addressed symptoms. The architecture problem required a new product concept.
I proposed Charging Stop as a distinct product entity — separate from the waypoint system in both data model and behavioral logic. A Charging Stop carries range constraints, not coordinates. When a driver passes a charging stop without stopping, the system evaluates remaining range and proposes the next viable station forward. When a manually added waypoint is removed, any Charging Stops associated with that sub-route are automatically voided and recalculated. The two systems share a route, but they no longer share a lifecycle.
THE OUTCOME
Bruh.
MY TAKEAWAYS
Turns out…
Figma was the easy part
My first production vehicle project has remained the most complex project I've ever worked on to date.
With customers, stakeholders and a tight budget pulling in different directions, getting the design right took far more than a beautiful interface 99.9% of the time.
When no one can give you the answer, be proactive and build the evidence yourself.
I joined the navigation product line new to the domain, with no event tracking, no formal usability testing and no research team. So I built my own evidence: reverse engineering competitors, running guerrilla sessions, mapping the SDK's limits and tracing how the product debt built up. Without quantitative data, qualitative signal and competitor evidence were enough to carry a proposal from observation to executive alignment.
Firsthand experience catches what happy-path thinking walks past.
Designing from a desk, it is natural to assume the data is right, the charger works and the driver follows the plan. Every interesting design decision in this project came from a place where one of those assumptions broke. I would not have known which assumptions to question without my own days spent hunting for a slow charger as a PHEV driver.
Show, don't tell. Much of what looks like disagreement between teams is people picturing different systems.
Stakeholders from different teams each held a slightly different picture of how the charging plan should behave. Arguing my case harder would not have fixed that, so I showed them one: beads on a rubber band, with waypoints as nails and charging stops as beads. Once everyone was looking at the same picture, the conversation moved from whose view was right to what the system should do, and that is how I brought stakeholders around.
Years later, vibe coding gave me a strange déjà vu. Same feeling as reviewing supplier output: you haven’t pinned down what you want, the result looks fine, you can’t say what’s wrong, so you accept it.
That’s where my next project began. Read the next case study →