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:
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.
Although it was not on the roadmap, the Figma file and prototype naturally supported device 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.
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
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:
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:
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: