Skip to content
Driezie Studio
03 / 09Case study

Politie.nl (concept)

A self initiated design study, not commissioned by and not affiliated with the Dutch police. The question behind it: what would politie.nl look like if the whole site were treated as one public register, and if the crisis moment were designed first instead of last? Every screen is a working prototype filled with sample content.

Client
Concept, self initiated
Role
Concept, design and build
Year
2026
Scope
Concept, Art direction, Design system, Frontend development, Accessibility (WCAG 2.2 AAA)
Politie.nl (concept): Concept: an unsolicited redesign of the Dutch police website, built as a working prototype.

The story

The direction did not start in a design tool, it started with an AI assisted research pass. Seven sweeps covered international police and emergency services, public sector design systems, the crisis UX literature and the Dutch context, alongside a reconnaissance of the current politie.nl captured straight from its live DOM. Everything below points back to what that pass turned up.

The Politie.nl concept homepage, with the emergency route made visible first.
Research sweeps
7
Sources cited
51
Domains reviewed
32
Crisis UX requirements distilled
22

Out of that came one idea, called Het Register. Every atom on the site, a report, a case, a news item, a topic, is a numbered, dated and sourced line with the same field order and tabular figures. On top of it sits one louder and rare layer: the urgency grammar Direct, Urgent, Informatief. The distance between those two layers is the design.

That choice came from scale. The real site carries thousands of wanted and missing person cases next to daily news and hundreds of topic pages. A register strip, six typographic lines without a portrait, can carry many cases at once where a wall of faces cannot.

Accessibility drove the grid rather than following it. Contrast is verified by a script in the repository instead of by eye, the type scale is built to reach the AAA ratios, and the layout column matches the 44 pixel target size, so a control that fits the grid is large enough by definition. The emergency band with 112 sits above the wordmark, which makes the first thing in the document the thing you need when it matters.

It is a prototype, so there is no back end: all content is fixture data, and a permanent notice tells every visitor that this is not the real police website and that no personal details should be entered here.

What the site has to carry

  1. Gezocht (wanted)3,801
  2. Onderwerpen (topics)500approx.
  3. Vermist (missing)280
  4. Nieuws (news items)24that day
Counts read off the live politie.nl on 6 August 2026. Logarithmic, because on a linear axis the news simply disappears next to Gezocht. This is the reason the register exists.

Why each change

  1. 01

    Found

    The emergency numbers sit in a utility bar and are repeated in the footer, while the h1 is a time based greeting over a hero photo.

    Changed

    112 gets a full width band directly above the wordmark, first in the document on every page.

    Why

    In the moment someone actually needs the police, the first thing in the reading order should be the thing they need, not a greeting.

  2. 02

    Found

    Gezocht carries 3801 cases and Vermist 280, all shown as photo cards, many of them with a 'Geen afbeelding' placeholder.

    Changed

    One register line of six typographic fields, used for news, wanted, missing, unidentified persons and witness appeals alike.

    Why

    A wall of faces does not scale, and it fails hardest on exactly the cases that have no photo.

  3. 03

    Found

    The reporting page jumps from h1 straight to h3, skipping a heading level.

    Changed

    One numbered step sequence with a strict heading order, one question per step.

    Why

    Headings are the navigation for screen reader users, so a skipped level is a broken menu.

  4. 04

    Found

    The police accessibility statement targets EN 301 549 and WCAG 2.1, and says in its own words that the site is not there yet.

    Changed

    AAA contrast is the floor in this concept, and all 59 colour pairs are verified by a script that reads the real tokens from the stylesheet.

    Why

    Contrast is the cheapest AAA level to reach, so it belongs in the build rather than in someone's judgement.

  5. 05

    Found

    Two token generations still coexist in the live CSS, the legacy set next to the current huisstijl.

    Changed

    One token set, no raw hex values in components, checked by that same script.

    Why

    Drift between two generations is what makes any contrast claim impossible to verify.

  6. 06

    Found

    Onderwerpen is an A to Z of hundreds of topics, with its own card and heading grammar per section.

    Changed

    The same register line carries the A to Z, the case lists and the news list.

    Why

    One repeating format is what makes a long list scannable instead of exhausting.

Reporting, laid out as numbered steps: one question per step, in the order a person tells the story.
  • Wanted: 3801 sample cases, carried by one repeating case card.
  • News as a dated register rather than a magazine grid.
  • Topics: an A to Z built to hold hundreds of pages.
On a phone the 112 band still comes before the wordmark.

Contrast, measured instead of judged

  1. Body copy on the page13.18:1
  2. Headings on a tinted section12.26:1
  3. The 112 numeral on night blue12.06:1
  4. Links on the page9.55:1
  5. White on the primary blue9.55:1
  6. The 112 button label8.55:1
  7. Action text on an Urgent block8.26:1
  8. Validation errors on an Urgent block7.39:1
WCAG 2.2 AAA needs 7:1Ratios come from npm run verify:contrast, which reads the hex values straight out of globals.css so the check cannot drift from the tokens. All 59 pairs in the system pass, including the ones held to a lower minimum.

Dit is een zelfstandig ontwerp en geen officiële website van de Nederlandse politie.

The notice every visitor sees first
04 / 09

Next case

Energie WonenRead the case