Portland.gov: a design system for a city

Portland's website was 18 years old, with roughly 350,000 content objects, most of them PDFs, spread across dozens of bureau sites and maintained by some 250 editors, each styling and structuring things their own way. Half the traffic was mobile, on a site never designed for it. The city needed one platform where 650,000 residents could find, understand, and use services. The replatform had two non-negotiable standards. Accessible to everyone, and written in plain language a fifth grader could follow.

The component layer. I designed the design system components and service page templates in Figma, coded them myself, documented them in the city's Pattern Lab, then implemented them in Drupal, the CMS the new platform was built on.

One person carrying each component from first sketch to production meant nothing got lost in handoff, because there was no handoff.

Pattern Lab wasn't a mandate. I proposed it, and the team wasn't sold. So I built a working demo of the component workflow and presented it. Here's a component defined once, here's it reused across three page templates, here's what changes when we fix it in one place. Efficiency and consistency stopped being abstract claims and became something the team could click through. We adopted it, and it became the backbone of how the city's components shipped.

The lesson stuck with me. Teams don't adopt tools because of arguments. They adopt them because someone builds the demo.

Government work means WCAG isn't a nice-to-have. Every component had to work with a screen reader, a keyboard, and plain language before it shipped. Designing inside those constraints changed how I think. Accessibility handled at the system level, in the component, is the only version that survives contact with a thousand content editors.

The work is public. I'm one of the top committers to the city's pattern library and contributed over a hundred changes to the platform itself. The site cut over from portlandoregon.gov in June 2020, serves every Portland resident today, and formally commits to WCAG A and AA conformance, a bar the component system was built to hold. The Digital Services team's human-centered approach later won a national award from U.S. Digital Response.