A traffic management system for a city of 13 million

The system covers each signalized intersection, the groups of intersections that work together along a street, the detectors that count traffic, and the history of everything that happened to them. Operators use it around the clock, and so do traffic police officers at the roadside.

I designed it from the first mockups in autumn 2020 to the third release in early 2022, in parallel with the traffic scheme editor, and it became the first product to adopt the company's new design system. Most of the hands-on design was mine; the rest I reviewed.

One control pattern for a light and for a street

The core object is a signalized intersection. It has a control mode, a state, and errors, and the three had to be kept apart on screen: a light can run on its calendar plan, be driven by hand, follow a coordination group, obey a roadside remote, or adapt locally to detectors. Each of those is a different situation for the operator, and mixing them into one status line was the first thing I refused to do.

A street is a coordination group: several intersections running one program so cars get a green corridor. I built the group as the same kind of object, with the same control window as a single light. An operator who knows how to switch one intersection already knows how to switch a street.

Program diagrams share one scale

Each intersection has several signal programs: a diagram of phases and their lengths. The first implementation drew every program at its own scale, filling the whole width. It looked tidy, and I argued against it. An engineer who compares programs is looking for the one that is wrong, for example a phase typed as 21 seconds instead of 201. When every diagram stretches to the same width, that mistake is invisible. When all programs share one scale, built from the longest one, the short phase is obviously short.

The tech lead pushed back for a few days, then agreed: the scale has to come from the maximum. It is a small rule that makes a class of errors visible before they reach a real intersection.

Green means a quantity, so a loop detector can't be green

Detectors come in several kinds. Most of them report numbers: how many cars, how fast, how long the queue is. On their charts green means a good value. A loop detector only reports that a car passed. The first mockup colored it green as well, which read as “traffic is flowing” when it only meant “the sensor works”. I took the color away: in this interface each color has one meaning, and a color that means a quantity cannot also mean a fact.

The same honesty applied to the counts. Detectors do not count cars precisely, so the intensity charts show the shape of the day rather than exact totals, and the exact numbers live in a table with their time windows next to them.

Empty is not the same as broken

Many intersections have no cameras, no detectors, or only one program. The easy answer is to hide the sections that have nothing in them. I kept them in place, disabled, with a tooltip saying why. An operator looking for cameras has to be able to tell three things apart: this intersection has none, the data failed to load, or I am looking in the wrong place. A missing section answers none of them.

What the plan wanted and what a person did

A traffic police officer can open the roadside panel and switch the light by hand, and at that moment the plan stops mattering to them. For the operator in the control room it matters a lot. So the interface distinguishes a phase that the plan scheduled from a phase that someone turned on, shows who did it and for how long, and lets the operator extend or cancel the manual state. The full history of an intersection is a separate view, and showing the planned program on the same timeline went into the backlog for the next release.

Where it went

By summer 2021 the new design system's components were being tested on this system, and the product became its first full adopter. The third release of the intersection and detector screens shipped in early 2022. Later that year I handed the day-to-day design to another designer on my team and kept reviewing it, while the data from this system fed the company's other city products.