The Sentinel by Yuvoice.

The homepage only shows the latest stories. After years of publishing, older work was effectively invisible, and the team asked for a way to "filter all stories."

Before designing any controls, I pulled the site's real tag data. It had 1,328 topic tags, and most were used only once, so a dropdown listing them all would be useless. That finding shaped the design: Topic Tags became a searchable panel that surfaces the popular tags and lets readers search for the rest.

Removable filter chips. Every applied filter becomes a chip next to Clear All, so readers always see why they are looking at these results. This one was my own addition, not part of the ask.

The brand purple #560079 as the section accent. The team worried it would blur into the Latest Stories section. Their alternative, a light lavender, failed contrast with ink text. I proposed a mid violet #7B4FA0: visually distinct, and white text on it measures 6.1:1, passing WCAG AA.

The control set itself. Series was added, cut, and re-added. Author arrived in round four across all 128 frames. Round five alphabetized the final order. Each round came from the CTO's team reviews, and each is documented so we never re-litigate a closed question.

The nav listed every editorial desk in one flat row: twelve links, no hierarchy, and no room for anything new.

Sorting twelve desks into two doors was the hardest call, and my first answer was wrong. Where does Fiction go? Is Mental Health news? My first mapping read backwards to everyone who reviewed it, so I flipped it and set a rule that ended the debate: Journalism is where readers go to learn what happened; Editorial is where they go to feel something. Every desk placement follows from that sentence, and it is written down so the next new desk gets sorted by the rule instead of by another meeting.

"You are here" took three decisions, not one. Active pages get bold text plus the brand purple. On dark surfaces that exact purple fails contrast, so it lightens to a tuned tint instead of being reused blindly. And hover stays a plain ink underline on every surface, because if hover and active looked alike, the nav would lie every time the mouse moved. A small system, but it is what keeps the desktop header, sticky bar, mobile menu, and footer feeling like one site.

The Archive earned a promotion into the navigation. It shipped as a homepage module, and I argued it belonged in the structure itself: a flat top-level item with no dropdown, because it is a destination, not a category, plus a "Browse the full archive" row anchoring the bottom of every panel. Wherever a reader is browsing, the full catalog is one click away. That is the difference between building a feature and making it findable.

The Sentinel runs on volunteers, and volunteers rotate. A year of feature work had left components scattered across my mockups, which meant every update lived in my head and every new designer would start from zero. The challenge was not collecting components. It was building a system that survives me: one that stays updatable as the site grows, and that a stranger can navigate without a walkthrough.

Built to be updated, not just admired. Edit the library, hit Publish, and every file gets the change. When a new story series launched, its colors, footers, and filters updated everywhere by changing the system once.

Written for the designer who joins after me. Every component says where it is used on the live site, colors carry the brand guide's own names, and intentional quirks are annotated right where a newcomer would trip on them.

Discrepancies are documented, not silently fixed. Where the file disagrees with the brand guide, the description says so; components that do not exist yet are labeled as proposals. Trust is what makes a library get used.

An editing contract on the cover. Use instances, never detach, edit here then publish, propose changes through me. Governance that fits on a sticky note actually gets followed.