Network manager
Owns readiness across sites. Needs confidence that every depot will be ready for the night, and early warning on the exceptions that need a human.
Work / ChargeOps
EV fleet operations
Enterprise SaaS
UX research
Interaction design
AI prototyping
NDA protected
ChargeOps
Turning fragmented EV-charging data into one operational picture of fleet readiness, for the people running an electric bus depot.
01
Charging status was everywhere. It never answered the operational question.
Who works with this data, what was actually broken on the yard, and what the redesign changed.
ChargeOps is an EV fleet-charging management platform. This case is the depot workflow I designed for a national transit operator that is electrifying its bus fleet: a mobile-first view for the yard, plus the desktop console and reporting that share its model.
Charger and vehicle data already existed, but every screen exposed it as raw technical status. An operator had to translate connected or charging into an operational answer under time pressure, on a yard that kept changing: late arrivals, faults, chargers doubled up.
Field operators needed to find one bus or one charger by the number painted on it, while walking. Faults travelled over chat and email with no audit trail. Reservation-led planning assumed a depot that stands still.
The work shipped as designed: one operational vocabulary now runs from the yard phone through the depot console to the transactions report.
02
Four rules turn a status feed into an action feed
Every screen had to obey the same four rules, whichever role it served.
Meaning
Connected is not charging. A status is read by what it means for the next departure - ready, at risk, needs a person - not by what the charger reports.
Priority
Remaining time and current state of charge outrank every secondary technical field. A card shows the current charging rate, not the charger's maximum capability.
Identity
Charger, connector and vehicle are never ambiguous. Search accepts the real numbers people use on the yard, and long names truncate by rule rather than by accident.
States
Uncertainty is part of the product. Loading, empty, no-result, error and retry states were designed for every list and table instead of being left to defaults.
03
Three roles read the same data for three different decisions
The discovery session split one abstract operator into three people with different questions.
Depot manager
Directs the yard through the night: one bus per charger first, doubling up only when necessary, and decisions that change as buses arrive late or chargers fault.
Field operator
Works on foot with a phone: charging state, battery level, remaining time, and exactly which charger and which bus, with nothing that lives only on a desktop.
04
Three screens carry the model from the yard to the office
Real exports from the design files. Brand marks, site names and vehicle identifiers are replaced; everything else is the work as it was designed.
Yard the phone in an operator's hand
Readiness comes first, connector state second
The mobile view opens on current sessions, with readiness counts across the top: ready, available, connected. Search takes a charger or vehicle number, and every card leads with identity, then status, battery level, power and remaining time.
Charger-first and vehicle-first lists sit side by side, because the roles think in different objects. Details open on their own page and put remaining time, state of charge and the charge limit above any technical field.
Depot the console on the manager's desk
One timeline for every connector, and the sessions beside it
The console lays every charger and connector on one live timeline, with charging, connected and reserved time on the same axis. Status counters sit above it as a summary, never as the answer.
The session panel beside the timeline reads like the mobile card: vehicle, readiness, time since ready, battery level, charger and power. Sorting leads with readiness and remaining time, so the next decision sits at the top of the list.
Record the report behind the operation
A report built for the data it will grow into
The transactions report carries 18 configurable columns, 14 of them visible by default, with filters for date range, location, department and charging type, and a search that targets one column at a time.
The redesign specified the behaviour large tables actually need: a frozen first column, infinite loading with a retry state, an explicit no-results state and a collapsible analytics summary. The rows in the export are illustrative; the structure is the work.
05
Iteration reduced ambiguity in the model, not just in the pixels
From a discovery session with the operations team to a component layer every module shares.
Discovery
Mapped how a depot actually runs at night
A session with the operator's operations team traced where charging status stopped being useful. It produced three decision-making roles, the need to search by real identifiers, and the case for one shared model across mobile and desktop.
3 decision rolesfriction map
Reframe
Turned raw status into an interpretation layer
Every technical status got an operational meaning, and that vocabulary then had to survive on each screen: status becomes meaning, meaning becomes priority, priority becomes an action someone takes.
readiness model
Explore
Tested three competing information architectures
Current against past sessions, charger-first against vehicle-first, operational against transactional status. A dedicated A/B round compared session-card layouts before the direction converged on operational segments.
3 IA variantsA/B card round
Prototype
Let people react to interaction instead of a description
I built interactive prototypes with Claude Code from the Figma screens, alongside a clickable prototype of the full side-panel flow, so the client and end users could respond to working behaviour.
Claude Code prototypesclickable side-panel flow
Scale
Carried the model into the console and the reporting
Charger monitoring, the session side panel and the transactions report reuse the yard vocabulary instead of inventing a second one for the desk.
18-column reportside panel
Systemise
Assembled a local component layer on Angular Material
Cards, status badges, side panels, tables, loaders and pagination became shared components across modules. This is a disciplined product layer over a framework, not a design system written from scratch.
shared componentsdesigned states
“Renaming connected into ready to act on changed every screen that came after it.”
ChargeOps design principle
06
What I did on it
I did UX/UI design and AI-assisted prototyping, next to a second UX designer, a development team and a project manager who gathered requirements from the client and end users.
Problem framing
Split one abstract operator into three decision-makers and named what each of them needs to see first.
Model
Reframed technical status into the operational readiness layer that every screen then shared.
Information architecture
Explored and tested three competing structures, including an A/B round on the session card.
Interaction design
Designed the mobile yard flow, the desktop timeline and side panel, and the large-data behaviour of the report.
AI prototyping
Built interactive Claude Code prototypes from the Figma screens to validate direction with the client and users.
Component layer
Assembled the shared components and the designed loading, empty and error states on top of Angular Material.
07
The model shipped, and the yard and the office now speak one language
What was delivered and what it proves.
The mobile session flow, the desktop charger monitoring with its side panel and the redesigned transactions report all reached implementation on one vocabulary: readiness, time, state of charge and identity.
What this case shows is the operational model and the evidence behind it: three roles, three tested structures, prototypes people used, and states designed for the cases that break dashboards.
The reframe gives every role the same first answer: what is ready, what is at risk and what needs a person. Lookups, readiness checks and fault handling now start from it.