The User Experience of Sports Graphics

I’m a pro football fan as well as a graphic designer so it made sense to write a post about football. More specifically, the user experience of tracking game stats via the on-screen graphics.

Each network (CBS, NBC, FOX, ESPN) has its own version of on-screen graphics for NFL games. I wrote a post a few years ago deconstructing the score bug (the banner that displays game stats such as points, game clock, period, etc.) and which network had the best graphics package based on screen placement, data legibility, and overall user experience. However, for this post I want to explore the question: What would the on-screen graphics look like if they followed the flat design model of modern websites and mobile apps?

The Issue

Broadcast sports graphics are dripping with skeuomorphism; they look as if they were crafted out of metal and glass, with glowing interiors and polished surfaces. This style is not unique to sports graphics, as any quick survey of TV channels will reveal but I think sports graphics take the prize for over-the-top production and execution.

I have nothing against skeuomorphism, when appropriately applied, but my own design style is more in line with the philosophy of less is more. It’s likely that the graphic embellishment of game data results from each network’s desire to create a certain vibe, echo the hyperactive nature of professional sports, and try to one-up their competition. However, I believe data trumps design. Game-time stats exist to provide the viewer with information, not excitement. Decoration doesn’t enhance the data and actually obscures it somewhat.

The Redesign

So I thought it would be a fun exercise to mockup a screenshot of an NFL game with flat design screen graphics and see if I could improve the user experience and still maintain some of the network branding.

I chose the CBS Sports sports bug because I think it’s one of the most poorly executed among all the networks. Here’s just a few reasons:

1. The space created for the bug (top of screen) is the busiest area of the entire frame and the game data gets lost in the the visual clutter of the sidelines and the fan seats.
2. The bug is smaller than it needs to be, considering the space allocated for it.
3. The visual categorizing of the data is unnecessarily complicated. Data items that should be grouped for easy correlation are separated by decoration.

I chose the CBS Sports sports bug because I think it’s one of the most poorly executed among all the networks.


I chose the CBS Sports sports bug because I think it’s one of the most poorly executed among all the networks.

My first revision of the bug included removing all the decoration and simplifying the color usage. I used black to provide the most contrast for the white text and reserved blue for the CBS branding (left) and the 40 second play clock (right). The 40 second clock only appears during active game play so it doesn’t always display. It needs to be set apart from the game clock, which is just to the left of it.

I also enlarged the bug by about 10% so the data could be more legible.

I don’t know what CBS is using for their bug font (Broadcast Grotesque?) but I wanted one that would be readable at small sizes and the Interstate font family fit the bill nicely.

The team logos are way too small and complex in the original bug to be visible. Honestly, the logos don’t serve much of a purpose in the bug since each team’s uniforms are already heavily branded but I wanted to retain as much of the original bug as possible. I decided to enlarge the team logos and crop them within a square. This serves two purposes: 1) it makes them more recognizable and 2) the clipping on the left side of the logo acts as a visual boundary for that team’s game data.

The graphics that indicate how many time outs each team has left were the worst part of the original bug. I’ll give you a minute to see if you can spot them.

Give up? They are represented by three small yellow bars just above the team name but they are totally lost in the clutter behind the bug. I decided to bring them into the bug itself and use them as a visual border on the right side of each team’s game data.

The only piece of data I removed from the bug was the white dot that appears next to a team’s name that indicates possession of the ball. I thought the dot was unnecessary since even a novice viewer could figure out which team has the ball.

Here's the first pass at a redesign. I wanted to retain as much of the data from the original sports bug as possible, but optimizing it to be more readable amidst all of the background clutter of the stadium.


Here's the first pass at a redesign. I wanted to retain as much of the data from the original sports bug as possible, but optimizing it to be more readable amidst all of the background clutter of the stadium.

The white border around the bug in my first version set the bug off from the action behind it but I wasn’t completely satisfied with the way it looked and the bug still looked a bit lost at the top of the screen. I removed the border and instead shaded the area behind the bug to lower the contrast of the sidelines and stands. You can see a similar effect applied in NBC’s sport bug and EA Sports’ NFL video games.

Taking a cue from NBC's and EA Sports' UI, I added a translucent mask behind my sports bug to help it stand out from the background, a more subtle solution than a white border.


Taking a cue from NBC's and EA Sports' UI, I added a translucent mask behind my sports bug to help it stand out from the background, a more subtle solution than a white border.

The last revision was to try a mono spaced font in place of Interstate. I tried Roboto Mono and, while I like the uniform width of the numbers and letterforms, it doesn’t have the same personality. Also, the letter spacing is not as refined as Interstate, as evidenced in the number pairings.

I tried a mono-spaced font (Roboto Mono) to give the numbers a more uniform look, but it lacked the better letter pairing, lower x-height, and personality of my original font choice, Interstate. 


I tried a mono-spaced font (Roboto Mono) to give the numbers a more uniform look, but it lacked the better letter pairing, lower x-height, and personality of my original font choice, Interstate. 

Thanks for indulging my fantasy redesign of sports graphics. I don’t imagine CBS Sports will be adopting my ideas any time soon but I think it’s worthwhile to address some of the user experience issues that surround us every day, like the ones I see on my TV screen each Sunday during football season.