Brainstorming a Better Play Tracker
At UX Launchpad, we spent a lot of time helping people think through design solutions. I always stress the importance of writing out your thoughts when approaching a new design, so here’s an example from my own life. (see also: Designing a Sketching App for iPad Pro, a four part series)
Sometimes I want to peek in on a football game from my phone. The first thing I want to know is the score, but I’m really wondering “will my team win?” And that requires a lot more context.
For example, a score of 31–24 at halftime is different than the same score with a minute left to play. And if the game is nearing the end, I need to know which team has the ball. If the losing team has possession, they have a chance to score. If the winning team has possession, it’s game over.
Now, this seems like a great place to use infographics, right? Well, yes and no. Great infographics find a way to present data in a way that uncovers new insights. But the not-so-great ones are merely using graphic design on something that’s perhaps better suited as a simple spreadsheet or list of bullet points. Here are a few examples:
These are static visuals, of course. But NFL fans are shown a similar design aesthetic when they’re trying to track the progress of a football game in real time. Here’s a screenshot from NFL.com’s realtime play tracker:
The current score and time remaining are easy to spot. (note: the game was over by the time I got this image, so I removed the clock) The points per quarter are also easy to parse: in this game, it looks like Carolina got 31 points before halftime, then the Seahawks scored 24 unanswered. Wow!
But a user has to figure that all out on their own. And that’s before you get to the play tracker itself. In this graphic we see a yellow line, some blue lines, and an arc of white. Once you figure it all out, you can piece together what’s happening, but it’s not immediately clear.
The description text helps because it’s more thorough. But answering the simple question “is my team likely to score/win” is still pretty complicated without some analysis. Here’s the (tiny, hard to read) text:
Last Play — 1:59 Q4
(Shotgun) R. Wilson pass short right to D. Baldwin to CAR 29 for 13 yards (C. Finnegan) [K. Short]
Bonus points for calling out everyone who was involved in the play (even the person who did the tackling!), but it’s not immediately apparent how it is affecting the game. Shotgun? Doesn’t matter. Name of quarterback? Doesn’t matter. Distance of throw? Doesn’t matter. And what does CAR 29 mean? It means they’re 29 yards away from a touchdown, but the visuals and text barely help you to know that.
The experience isn’t doing a great job at focusing on what people want to know: how many yards were picked up, if there was a first down, and how close the team is to scoring. All that other stuff is secondary. So I did some doodling to see if I could come up with anything better:
A few things jumped out at me by the end of this “think with ink” activity. First, this simple linear structure tells a lot. The first Panthers series (top right) was clearly very successful. The next one (middle right) was clearly a catastrophe for the Seahawks. (fun fact: I turned off the TV when I saw it happen live) And the third one, representing what the Panthers did after getting the ball back, was methodical. One step after the other, one really long pass, a few more plays, and suddenly the Panthers were up 21–0. These graphics hint at that (devastating) storyline.
I also noticed that color helped a lot. The interception on series #2 shows up in red. All the first downs the Panthers were racking up show up in yellow. And it’s hard to spot, but there’s a green line on series #3 that shows a penalty that benefited the team with the ball.
Finally, I liked the “stacking” shown on series #3. They show incomplete passes. So you can see at a glance that the Panthers only had two incomplete passes out of about 16 or 17 plays. That’s a pretty big deal. It shows how much better the Panthers were playing than the Seahawks. It’s clear that a successful design will be able to show that story at a glance.
So I tried converting my sketches into a very abstract visual to learn more. Originally I had skipped a stalled Seahawks series (#3 in this graphic), but this time I left it in to see how it compared:
Pretty good! Obviously I’d need to show which team represents each row, but even abstracted to this degree, we can learn a lot. First series: touchdown! Second series: bad news. Third series, when the Seahawks got the ball back: a little bit of forward, then backward, then forward, and that was the end of the drive. Finally, the fourth series shows that the first one wasn’t a fluke. The Panthers were on fire.
So that’s how I kick off a process. I write out random thoughts like “this is too hard” or “I just want to see this other thing.” I doodle it out some stuff. I never expect my first ideas to be good, but that’s not the point. Your first ideas lead to your second, third, and beyond. And that’s where the good stuff happens. You just have to start with something, even if it’s stupid. Especially if it’s stupid. Go!