A long-running project for me was a comprehensive redesign of the CBS News web navigation, that unfolded over many years, and launched in phases. Below are before-and-after screenshots at two representative breakpoints.
At the smallest breakpoint, the menu was much improved over the prior version, but launched in a minimum-viable-product state shown here. I describe the aborted project to enhance it later in this case study.
Prototypes
The topic of sticky navigation was hotly debated. My unpopular opinion is that the navigation component of almost any website is among the least important aspects of a page, and when scrolled, should get out of the way. (I am aware that at this time of writing, my own portfolio site has a sticky nav, and believe me, I'm debating it!)
My preferred sticky behavior was that the CBS News nav should scroll out of view when the user is scrolling down, but slide back into view when scrolling back up. I was the lone advocate, and was loudly and emphatically outvoted. Below is a screen recording of my prototype.
Below is a screen recording of my final responsive prototype. As with almost all my prototypes, this was intended to illustrate a few points difficult or impossible to convey in static Figma or Sketch mocks, such as the responsive behavior, hover styles, and account flyout. Dark mode is shown for demonstration, but was not on the product roadmap.
Show & Local Pages
One of the biggest complications was how to handle CBS News local affiliates, which had once each had discrete websites of their own, but had been folded into the main CBS News domain. As you can see in the before-and-after screenshots below, the initial implementation was to shoehorn them into what we called internally the "show door" template, with a customized version of the primary navigation. The result was disastrous, and was difficult to untangle.
On the right is the redesign. My solution was to institute a three-tiered navigational structure:
- Primary: global, with no exceptions. Referred to internally as "national". Supports submenus.
- Secondary: contextual. On "national" pages, it would be an adaptation of the so-called "supernav" that was the top tier on the previous iteration (primary an SEO driver). On Show or Local pages, it would the their dedicated navigation. Supports submenus
- Tertiary: contextual, optional. Most local affiliates required an additional tier. No submenus required.
A side-effect of absorbing the local affiliates meant that there was an additional tier in the navigational tree for "local shows", for example the CBS News Pittsburgh show Talk Pittsburgh.
Virtually nobody within the organization liked a triple navigation, but it was understood and accepted as the only feasible solution for "local shows".
Nav Menu Redesign
This next part of the story is unfortunately an illustration of the dysfunction that affected my colleagues and I at the time. The design issue was clear to everyone: the menu (aka "sidenav" or "hamburger menu") had launched in bare-bones minimum viable product form, and desperately needed to be optimized. It was basically a crude sitemap, and did not provide access to the next-deeper navigational tear. For example, you could navigate Home › Shows › 60 Minutes, but not Home › Shows › 60 Minutes › 60 Minutes Channel.
But organizational issues had us all running in circles, working extremely hard but launching little. At the time, I had one foot in the CBS News web team (including product and engineering) and the other foot in the CBS Design team (including CBS Sports designers and a selection of corporate executives -- News web product and engineering not included). The latter team had regular meetings called "Flight Deck", where work was assigned, presented, and critiqued. One particular executive would emphatically raise the CBS News web navigational issue in every single meeting, no matter the topic. So in deep collaboration with my direct supervisor and the whole CBS Design team, I put together a series of options, which you can see below. From left to right:
- The so-called "Minimum Viable Product" that everyone agreed needed to be overhauled
- Option 1-2: improved, but still did not allow navigation one tier deepr
- Option 3: an app-like menu, deemed too complex for web
- Option 4-5: the best solutions, with input from my supervisor and the entire CBS Design team, and even better
But when presented in the Flight Deck meeting, the executive hated it. It transpired that he was complaining about a different navigation issue, and had not been communicating clearly to any of us. And then when presented to CBS News product and engineering, they felt blindsided and shot the entire thing was shot down. Their issues included the level of effort, and the huge amount of load this feature would put on the website.
To my disappointment, no further effort to improve the menu happened while I worked there.
Pointer Devices
Another bit of unfinished business was a project to address an important issue: users of devices with legacy pointer devices (such as a mouse with no touch surface or rollerball) could not scroll the navbars horizontally. Below are mockups of possible improvements. The first two are plainly unfeasible for web, and bad experiences anyway. The third was generally agreed to be the best option, but wasn't yet on the roadmap when I left CBS News.
