LA Metro Safety Hub

2024 / la metro / ux, content design, data visualisation

Metro needed one place to explain what it was doing about safety on the system, and to let riders report an incident without hunting for a phone number.

The hard part was tone. Safety pages fail in two directions: so reassuring they read as public relations, or so detailed they read as a warning. Riders in testing were sharp about both.

The Safety Hub landing, a sticky report bar directly under the nav with three options labelled by situation (it is happening now, I saw something, I want a record), a hero whose image slot is captioned the-system-working rather than police imagery, the stat strip, and dated pillar cards

// fig.1: the hub: reporting pinned under the nav, labelled by situation with the channel demoted to a subtitle

The same page scrolled, the report bar collapses to a single 48px line but stays pinned at the top of the viewport

// fig.1b: scrolled: the bar collapses to one line, but it never leaves the viewport

Report first, read second

Much of the traffic we anticipated was someone with a problem right now. So reporting is the first thing on the page and it never leaves the viewport, a persistent bar with the transit watch line, the text-a-tip number, and 911, in that order, with an explanation of which to use when.

Everything else, the ambassador programme, the crisis intervention teams, the quarterly numbers, sits below it, written in plain sentences with the dates left in. Undated reassurance is not reassurance.

Writing for someone having a bad day

Some of the people opening this page have just experienced something. The design treats that as a requirement, not an edge case: short sentences, no siren-red visual language, nothing blinking, and the reporting options organised by situation rather than by department: it is happening now, I saw something, I want a record, because nobody in distress should have to know which agency owns which phone number.

The same restraint applies to imagery. A safety page decorated with police photography reassures one rider and warns off another; the hub leads with the system working, trains, platforms, people getting home, and lets the text carry the seriousness.

The mobile report flow, an in-immediate-danger 911 card first, category chips, auto-detected location with a change option, and anonymous send with no required free text

// fig.2: reporting organised by situation, not by department: no required free text

Publishing the numbers

Metro publishes crime statistics; almost nobody could read them. I designed a small set of charts with fixed rules: absolute counts alongside rate per boarding, twelve months minimum so seasonality is visible, and no truncated y-axes. When an agency publishes numbers about itself, the chart conventions are an ethics question before they are a design one.

The transparency dashboard, a what-this-data-does-not-show caveat above the charts, crime rate per million boardings with a peer median, reports by type, and a station table where regressions are shown in red, never hidden

// fig.3a: the data, caveat first

The report-sent receipt, a reference number, a three-step status timeline, and staff two stops away

// fig.3b: the receipt every report gets

The chart template kit, five approved modules and the rules card: no pies over four slices, no dual y-axes, no raw counts without a rate, no colour as the only signal

// fig.4: the chart kit: five modules and the rules that keep them honest

Outcome

Reporting is the first thing on the page, and stays in view the whole way down.

12mo

Minimum window on every published chart, so seasonality cannot be hidden.

Status never carried by colour alone, shape and position do the work too.

next la metro cx hub →