Hanley Wood / Architect Magazine

Context

Hanley Wood was a B2B media company behind a portfolio of trade publications — Architect, Builder, Remodeling, and a dozen others. The work was print-first, the editorial teams were excellent, and the web properties were an afterthought. I joined as Lead Interactive Designer in 2016, working remotely from St. Louis while the rest of the team was largely DC-based.

Most days meant building one-off interactive components — Highcharts.js graphs, image sliders, custom feature blocks — and dropping them into a Brightspot CMS that had no concept of scoped styles. The global CSS cascade was owned by the backend team, who had their own sprint commitments. My code had to survive their environment. It was unglamorous work. It taught me a lot.

The Problem

The editorial team at Architect Magazine wanted to do something nobody at Hanley Wood had done before — a fully custom, immersive interactive article. Not a blog post with a chart in it. A real web experience built around a single piece of architecture, with animation, illustration, and interactivity woven into the storytelling.

There was no process, no template, no budget precedent, and no clear owner. The project manager had never scoped anything like it. The CMS was a minefield. My code had to survive a global CSS cascade I had limited ability to touch.

The first piece — a feature on the Bullitt Center, a net-zero energy building in Seattle — became a proof of concept for something bigger. When it went live, the CEO mentioned it in an all-company email. That doesn’t happen often. It changed what was considered possible.

Approach

After Bullitt Center landed, the sales team started selling the interactive article format as a product. Which meant I needed to build them faster, more reliably, and with less dependency on a backend team with its own priorities.

So I built Pattern Lab — a custom front-end build system using Eleventy as a static site generator, Node Sass and PostCSS for styles, and Rollup.js with Babel for JavaScript. Each interactive article was its own self-contained HTML page with CSS scoped under .p-lab — my code never had to fight the global cascade because it never entered it. The whole thing got pasted into a raw text field in Brightspot. Inelegant from a CMS perspective. Completely reliable from mine.

The system solved organizational constraints as much as technical ones. I didn’t need backend deployments. I didn’t need to coordinate sprint cycles. I could ship.

Outcome

Once Pattern Lab was dialed in, the pace changed. Cross-browser QA time dropped with each project as components got battle-tested and reused. The process I’d built from scratch became the standard approach for the team.

Over three years the work earned: Azbee Gold for Online Visual Storytelling and Cross-Platform Package of the Year (Hampshire College Kern Center, 2019), Azbee Silver for Web Feature Article (One World Trade Center, 2019), Azbee Gold for Web Article Design (Bullitt Center, 2017), and a Folio Digital Award for Best Microsite (Rocky Mountain Institute, 2018). On every one of those projects, my role was the same: lead and sole front-end developer.

I also inherited a junior designer mid-tenure — reassigned to report to me. We did a daily async Slack standup, a weekly 1:1, and read Brad Frost’s Atomic Design together while we built Pattern Lab. He was with me for about two years before he moved on. His JavaScript got strong. I was proud of him either way.