Sports bugs — like the CBS NFL bug above — are models of consistency. They are very well done. And, for the most part, very clear.

Consistency is an important and foundational aspect of any designed human experience. And as with most of these designed experiences, there is room for improvement. This is where clarity comes in. With some clarifying moves, I believe the CBS NFL score bug can create some distance and make a big play for viewers.

The elements of this consistency

When you look more closely at the CBS NFL score bug in the image above, you can see how clearly and consistently each element is placed. From left to right, we find the following:

• bullet list of all the elements

• network icon

• visiting team name, timeouts, and score

• home team name, timeouts, and score

• the quarter of play

• time remaining in that quarter of play

• the play clock

• down and distance

Below is my recreation of the sports bug in question — with a few adjustments to start. I do realize my versions use a different font and are very flat looking in comparison to the actual score bug. I have made my designs flat with the purpose of concentrating on creating more clarity in the overall design. I would actually keep the shading and dimensionality of the original design. 

While the team sections of the sports bug indicate which team is which and provide some color coding, they are not truly reflective of what the viewer sees. I changed the SF section to a white background to match the jersey color and the text to Niners red. 

The first move…

Another consistent element to notice is the down and distance. In this example, that’s the text that reads “3rd and 8”. While the down and distance area is color coded to "connect" to which team is in possession of the ball, it is detached from that team’s area in the bug. Moving this will mean that the down and distance will appear in different places at different times within the bug. But it will provide clarity by indicating which team is in possession not by color connection but by proximity. Here’s how that looks when each team has the ball.

Then the second move…

As you can see from the above examples this pushes the quarter, game clock, and play clock to the right-hand end of the bug. Hmmm…that doesn't seem quite right. Does it? Why not? The quarter and the game clock are not contextually attached to either team specifically. So that section can remain on the end — a solid and consistent spot. 

But what about the play clock? Well, that does have to do with which team possesses the ball. So, should it be attached to the team in possession? Here’s how that looks

Getting open

During an NFL game, the teams "change ends" each quarter. But the score bug doesn't indicate that change. As you can see in the image at the top of this page, the San Francisco Forty-Niners are on the left and that team element in the bug is on the left. The Kansas City Chiefs are right and right. But then when the teams swap ends of a quarter, this happens.

Swapping the team sections whenever the teams swap ends of the field aligns the team names with what is happening visually on the screen. Viola!

The big catch

Just as when a receiver employs a double move in American football, he may get open but not make the catch. The pass may not come his way. He may drop the pass. Success has many variables.

So, I won't pretend that these designs wouldn’t drive the folks at CBS crazy. I don't know the technical limitations or any of the technical aspects of creating and displaying sports bugs. And there's plenty going on in their NFL score bug as it is. I haven't even covered flags and penalties here. Stats. Etc. But with a few moves the current bug could raise its clarity to a level that even a non-sports fan would appreciate.

Interestingly enough, in the first three weeks of the 2024 NFL season, I have seen CBS use the white background for teams in four separate games. Two of those games were when the Las Vegas Raiders played in their road white jerseys. There are more than a hand full of teams that have black as a primary color. The Raiders, Steelers, and Bengals come to mind. In fact, in week 3 of the season, there were two games where CBS used black for the home team — Raiders and Steelers. In these two cases, the down and distance as well as the play clock were changed to black text on a white background. I still think in such cases where the home team is wearing black the neutral elements in the current score bug should be medium to dark shades of gray so that a solid black can be used for a team section. I may have to do a follow up…

------------

Resources

The hero and the “swapped-ends” images were captured from the following video on YouTube: San Francisco 49ers vs. Kansas City Chiefs | Super Bowl LVIII Game Highlights at: https://www.youtube.com/watch?v=O17DfQco2JQ&t=304s