My final project during my time at CBS News was a redesign of the homepage (known internally as the "front door"), and related page templates. Like a number of other projects I worked on at CBS News, it had a number of false starts. But following the navigation and article/liveblog redesign, the homepage was finally on the roadmap, and I completed a full round of designs in late 2025.

It's worth noting that all dummy content in these mockups was taken directly from real CBS News articles, with an understanding of how editorial would realistically program content.

Below are before-and-after comparisons of the national front door, at two representative breakpoints:

The CBS News homepage redesign, before and after, at a narrow breakpoint.
CBS News homepage redesign, shown at a narrow breakpoint
The CBS News homepage redesign, before and after, at a wide breakpoint.
CBS News homepage redesign, shown at a wide breakpoint

For major events, the new door template supports an optional "doomsday" component, long requested by CBS News editorial. As a point of interest, this particular component was often an obstacle when the designs were presented to other Paramount groups outside of CBS News. I would often have to advocate for News, explaining that this was a specific request of editorial, and indeed table stakes for the homepage of any news website.

The "doomsday" component supports a single asset, plus an optional jumbo headline and related stories below. CBS News never had a single-asset component previously, and was limited to 5- or 9-asset grid components. My hope was that any number of these single-asset components could be programmed in any slot on the homepage, as editorial saw fit, depending on the events of any given day.

The CBS News homepage redesign with the optional Doomsday component for major events.
CBS News homepage redesign, with optional "doomsday" component for major events

Although it was not on the roadmap, the Figma file and prototype naturally supported device dark mode:

The CBS News homepage redesign with the optional Doomsday component for major events, shown in dark mode.
Shown in dark mode

This project necessarily involved redesigning every door component, from top to bottom. In my opinion, two of the most-improved are the video component and the grid components (in its 5 & 9-asset variations).

One interesting factor was that the ad market had changed so much since the previous version of the site launched, that 300x250 MPU ads integrated into the previous versions of the components were no longer profitable, and I was given the green light to omit them from the redesigned components.

Below are before-and-after mockups of the video component, with the following improvements:

  • standardized hero video treatment across all breakpoints
  • removed brand color backgrounds (which were consistently applied across breakpoints, and had legibility issues)
  • standardized heading and "more" button treatments
  • no horizontal carousel at the smallest breakpoint, so all assets are shown
  • "dek" article summary supported across all breakpoints
  • new play button treatment

Looking at this again now, I think there are two problems with the redesign: it may appear too generic after removing the yellowish CBS Mornings brand color, and the new play button treatment is not prominent, especially at wider breakpoints.

Before-and-after mockups of the redesigned CBS News homepage video component.
Before-and-after mockups of the redesigned CBS News homepage video component.

The much-improved 9-asset grid component is shown in the mocks at the top of this case study. Below are before-and-after mockups of a 5-asset grid component, with the following improvements:

  • standardized all thumbnails to 16:9 aspect ratio (previously three different aspect ratios, varying across breakpoints)
  • "dek" article summary supported across all breakpoints
  • standardized heading and "more" button treatments
  • assets 2-5 displayed with the same editorial prominence across all breakpoints
Before-and-after mockups of the redesigned CBS News homepage grid component.
Before-and-after mockups of the redesigned CBS News homepage grid component.

As part of my process, I built a responsive prototype to demonstrate:

  • responsive behavior
  • scrolling behavior (sticky nav and persistent video)

I cannot share the actual prototype here, as it utilizes licensed webfonts, but here is a screen recording:

Screen recording of my homepage prototype

The improvements are more dramatic when seen in the context of shows (such as Sunday Morning) and local affiliates (such as CBS News New York). I wrote more about this process in the Brand Headers case study. Before-and-after comparisons below:

Before-and-after mockups of the CBS News New York door redesign.
Before-and-after mockups of the CBS News New York door redesign.
Before-and-after mockups of the CBS News Sunday Morning door redesign.
Before-and-after mockups of the CBS News Sunday Morning door redesign.

Below is an example of how a typical internal page would look after the redesign. This particular type of page was known internally as a topic page with a "river" component:

Before-and-after mockups of the CBS News river component redesign.
Before-and-after mockups of a typical internal page