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 programmed content. Below are before-and-after comparisons of the national front door, at two representative breakpoints:

CBS News homepage redesign
CBS News homepage redesign
CBS News homepage redesign
CBS News homepage redesign

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

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

CBS News homepage redesign
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:

CBS News homepage redesign
Shown in dark mode

This project necessarily involved redesigning every door component. In my opinion, two of the most-improved are the video component and the 5 and 9-asset grid components. One interesting factor was that the ad market had changed so much, 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
  • removed carousel at the smallest breakpoint
  • "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 color, and the new play button treatment is not prominent, especially at wider breakpoints.

CBS News homepage redesign
Component redesign example: Video

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
CBS News homepage redesign
Component redesign example: Grid

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 front door 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:

CBS News homepage redesign
A CBS News "local door", before and after
CBS News homepage redesign
A CBS News "show door", before and after

Below is an example of how a typical internal page would look after the redesign, this particular example known internally as a "river":

CBS News homepage redesign
Before-and-after mockups of a typical internal page