The quandary of how to incorporate the many CBS News shows (Evening News, Face the Nation, 48 Hours, etc.) and local affiliates (New York, Los Angeles, Baltimore, etc.) into the flagship cbsnews.com website was a long-running and contentious problem, before and after my time at the company.

Creating a standardized template for "show doors", the internal term for brand homepages, faced many obstacles, and I would go so far as to say it was a failed project, satisfying no one, but it ultimately had a happy ending.

At the time of the original ask, CBS News had only a handful of broadcast shows, and each had a bespoke micro-site on their own domains. CBS News needed a universal template that could support a graphical logo, some short text, an image of the host(s), and a show-specific navigation component.

My initial designs and prototypes were fully responsive, with a background image (standardized to a JPG), logo (a single compound path SVG displayed within maximum dimensions), and utilized each brand's signature hex color. These were quickly and enthusiastically approved by the product team and the creative director, and were handed off to the web engineering team.

Below are static mockups of the Sunday Morning homepage, with the template in its originally intended form, shown at two representative breakpoints:

CBS News brand door v1
CBS News web brand door template, first iteration

Shortly before launch, the product team objected to the design at the smallest and widest breakpoints. Their requests were twofold:

  • Smallest breakpoint only: do not display background image or SVG logo. Use plain text in place of graphical logo.
  • Widest breakpoint only: cap the overall width. Add vertical gradients at the left and right to compensate.

Personally, I can understand the latter objection. But I still believe the former was an unnecessary mistake, and detrimental to the purpose of the component.

I left for a scheduled vacation to San Francisco, and the template launched while I was away, with no design QA review. There was a severe bug at the third breakpoint, in which the height was no longer flexible, causing ugly visual errors for any user viewing the site between the widths of 1020 and 1360. There no system in place for designers to report bugs, and much to my frustration, I was the lone voice identifying the bug. It remained in place for many years.

Below are static mockups of the header, as it launched:

CBS News brand door v2
CBS News web brand door template, as launched

Below is an illustration of the aforementioned bug, where at certain widths, the height was incorrect and hosts' headshots were being cut off. Also shown is a separate bug, whereas the component immediately below it was severely distorted.

CBS News brand door
Screenshots from a bug report I was eventually able to file

Another serious issue was that these templates were later repurposed for numerous other uses. At one point in the complex history of CBS News, the many formerly independent local affiliate websites were incorporated into cbsnews.com, with minimal design input. They had complex branding and navigational needs that could not be met by simple templates, originally intended to merely support a handful of broadcast shows.

Below is an example of the Sacramento local affiliate. Note that at this point in time, each local affiliate utilized a bespoke version of the main navigation component, so when in combination with the "show door" template, there was the disastrous side-effect of double logos.

CBS News brand door v2
The CBS News Sacramento local affiliate, shown as it originally launched in the template originally intended for shows only

A later comprehensive redesign of the main navigation went a long way towards ameliorating the situation:

CBS News
With nav redesign
Screen recording of my prototype, demonstrating the responsive behavior

I was asked to put together a PDF guide, in order for third parties to assemble their own branded headers. Even though the guide provided detailed specs and examples for the two required digital assets, we found that many inexperienced third parties would create unsuitable assets, such as ill-suited or incorrectly formatted logo SVGs, or background images with poor color contrast or baked-in text. A major challenge for me in creating this guide, was noting that the template was never correctly implemented in the first place. Pages from the document below:

CBS News
Pages from the asset guide PDF document

Many years later, after an internal reorganization, we had a new engineering team and I was given access to Jira with the power to report bugs. I presented responsive prototypes of how the header was always intended to work, and the bug was finally addressed.

In late 2025, as part of my final project for CBS News, I presented completely new designs, that were more flexible and future-proof, while utilizing the same two digital assets as all prior versions.

CBS News
Comprehensive redesign: static mocks
Comprehensive redesign: screen recording of my prototype, demonstrating the responsive behavior