The San Francisco Standard

Director of Product & Design · First Employee

The redesigned San Francisco Standard homepage on a laptop - a dense, editorial local-news front page. — The San Francisco Standard - the redesigned reader experience

I joined The San Francisco Standard in 2020 as its first employee - Director of Product & Design - to build a new kind of local news organization from nothing: the brand, the website, and the editorial tooling behind both. The mandate was simple and hard: stand up a publication that felt established on day one. For two years I led all software design and engineering - building and leading the six-person team across design, engineering, and data that designed and shipped it, owning it end to end.

01Brand

The brand came first. The Standard needed an identity that could feel established and trustworthy while still reading as the bold, independent newcomer it was - so we built it around a single archetype, The Rebel: a constructed wordmark and square “S” icon, a deliberately spare palette of Whiteout, Ink, and the signature Highlighter yellow, and Libre Caslon carrying the editorial voice.

The identity - logo construction, lockups & icon

Brand colors - Whiteout, Ink & the Highlighter accent

The primary typeface page - Libre Caslon shown as a large specimen with headline and body settings and full character sets. — Primary type - Libre Caslon

On top of those building blocks, a set of expressions gives the brand its texture - and the system was built to travel, holding its voice from a product screen to a press badge.

The pixelation motif - a yellow pixel-cluster artifact used to highlight imagery, shown on an event-promo graphic. — Pixelation

The torn-paper expression - ripped-edge shapes used as a collage device across illustrations and event graphics. — Torn paper

The texture expression - gritty, high-contrast photographic textures used to add depth to graphics. — Textures

Stationery

Press kit

Direct mail

02Website

With the brand in place, we rebuilt the reader experience from the ground up - led by the homepage and story pages. The California Journalism Awards recognized the redesign with first place for Homepage Layout & Design and second place for Story Page Layout & Design.

The redesigned San Francisco Standard homepage shown on a laptop and phone - a dense, editorial front page led by a post-pandemic office-conversion story - beside a 'California Journalism Awards, 1st Place' badge. — Homepage - California Journalism Awards, 1st place

Two redesigned Standard story pages - a Life feature and a Food & Drink piece - beside a 'California Journalism Awards, 2nd Place' badge for Story Page Layout & Design. — Story page - California Journalism Awards, 2nd place

The identity applied across site templates - navigation, a video thumbnail, and an event graphic - showing the reusable system in use. — Templates & components - the system the newsroom shipped with, at speed

03BlockBeat

Alongside the reader experience I designed and built BlockBeat - a programmatically generated, data-driven newsletter I owned end to end, from its own sub-brand and email design to the production pipeline and the data scraping behind every issue. Each edition assembled itself: local weather, neighborhood headlines, and civic happenings pulled in automatically, then laid out in the Standard’s voice with lightweight “more / less like this” controls so readers could tune what they got.

BlockBeat - the sub-brand wordmark & icon

A complete BlockBeat email - a neighborhood edition led by a local weather strip and top highlights, then auto-assembled Homelessness, Health, and Restaurants sections with imagery, maps, local listings, and per-story feedback controls. — A complete BlockBeat issue - generated and laid out programmatically

Outcome

A brand-new newsroom found its audience, and its voice, fast - held to a high craft bar and backed by two California Journalism Awards for the redesign. By the time I left I’d recruited, hired, and was leading the six-person team that supported the whole organization across design, engineering, and data.