Climate · 2024

Tideline

A public flood-warning service that shows how sure the forecast is, not only what it says.

Client
Port Ellery Council (sample client)
Role
Product designer and front-end lead
Team
The council’s resilience team, a hydrologist and two developers
Duration
5 months

At a glance

  • 3×more residents signed up for alerts
  • −41%calls to the council during warnings
  • 4 → 1websites merged into one service

Results are sample figures for this fictional project.

The problem

Port Ellery had four websites about flooding, each run by a different team. During a storm, residents saw a gauge reading of “4.62 m” and had no idea whether to move the car.

The council phone line took the questions the websites could not answer, at the exact moment staff were needed elsewhere.

What people actually asked

We read two winters of call logs. Almost nobody asked how high the water was. They asked what to do, when, and whether their street was affected.

Interviews with residents of the harbour streets added a second finding: people trusted forecasts more when they were told how uncertain they were.

The harbour streets where we interviewed residents.
Sketches of ways to draw an uncertain forecast.

Action first, then the numbers

Every warning leads with a single action word: Watch, Prepare, Act or Leave. The tide forecast is drawn as a range with a likely band, never as a falsely exact line.

Flood zones are hatched as well as coloured, so they read in greyscale, for colour-blind residents and on the library’s black-and-white printer.

  1. a range, not a false-precise number
  2. hatching still reads in greyscale
  3. the action word comes first
Tideline’s live view: the action word, the likely range at high tide, and hatched flood zones.

For the first time our residents were a step ahead of the water, not a step behind the phone queue.

Resilience officer, Port Ellery (sample quote)

Fast, plain and printable

The service is static HTML regenerated every five minutes, so it stays up when traffic spikes. Every map has a table alternative listing streets and their risk, which also became the most-used view on phones.

What changed

Alert sign-ups tripled in the first winter and calls to the council during warnings fell by forty-one per cent. Three old sites were switched off.

What I’d do differently

I underestimated paper. The printed summary pinned up in the harbour café was read by more people in the first storm than the website was. Next time I would design the poster first.

Sample case study: the client, team, figures and quote are fictional.

Esc
Mara Kestrel
Work
Writing
About
CV
Speaking
Uses
Now
Contact
Night Ward A ward board for night-shift nurses that turns forty competing priorities into one calm list.
Tideline A public flood-warning service that shows how sure the forecast is, not only what it says.
Northline fares A fare finder that leads with the cheapest valid ticket and explains the rules in plain words.
Quire An accessible design system I maintain, where every colour pair ships with its contrast ratio.
Furrow An offline-first harvest log for small farms, designed for wet gloves and no signal.
Designing for 3 a.m. Most interfaces are designed at 11 in the morning by rested people. Some are used at 3 at night by exhausted ones. Here is what changes.
The case for fewer alerts Alert fatigue is a design problem, not a discipline problem. Four questions I ask before any notification ships.
Write the empty state first The first screen most people see is an empty one. Designing it first makes the rest of the product clearer.
Design tokens are a contract, not a palette A token named after a colour tells you what it looks like. A token named after a role tells you what it promises. Only one of those survives a redesign.
What a flood map taught me about uncertainty People trust forecasts more when you tell them how sure you are. Showing uncertainty is a design skill, and a public duty.
Switch theme
Turn margin notes on or off
Copy e-mail address hello@marakestrel.example
Print my CV