Visually, I like the result, but without leaving room for a sponsor logo, you've omitted a major stakeholder.
You're right. I didn't think too much about the sponsor but that's certainly a crucial part. Someone else left a note in Medium pointing out that the position of the timeline could block the advertisement banners on the pitch. This is also true and definitely something to think about when placing this widgets on the screen.
The end result is basically the MLB player. CBC used it for the World Cup last summer.
Very cool. Thank you for sharing this. I didn't know about this one until now. The only objection I would have against this design is that it seems too busy. They sacrificed a lot of accessibility and usability to reach a more dense interface which is sometimes a necessary design approach for some cases (e.g: Bloomberg Trading Platform.), but I'm not sure this is the right approach for this case.
I couldn't find a better screenshot. You don't see the heat maps on the side by default. There are a set of features – like the heat map – that the user can choose to bring up.
The basic view is the expanded timeline with markers for incidents during the game. You can click them to watch a replay and then jump back to the live game.
That said, I'm glad you did this case study. It's an amazing experience to use the MLB player. I seriously wish this or something similar was the default everywhere.
I got to the first example before I realized that the score banner is also called 'Score Bug' and this was intact not an article about a software glitch.
According to Wikipedia - "A digital on-screen graphic (originally known as digitally originated graphic) (known in the UK and New Zealand by the acronym DOG; in the US, Canada and Australia  as a bug) is a watermark-like station logo that many television broadcasters overlay over a portion of the screen-area of their programs to identify the channel.
Streaming services like Twitch are where the evolution of the score bug can really be seen. Things like donations, music playing, time streaming, etc. are already used by the top streamers. Interactivity by the user should be an easier problem to solve as well just due to the nature of computer vs television consumption. One possible form of interactivity for this type of media could be something like pressing one of two buttons to show support for a team and it could change the color of the score bug. Lots of cool additions like that become available when you move away from television.
Anyway, Interesting article and thanks for sharing!
Glad you liked it. I definitely see some of this interfaces working with online streaming services like Twitch.
I also agree that there's a lot of room to explore further interactions that can tailor the experience based on what the viewer expects to see and learn but only if we move away from the traditional TV. I personally believe that devices like the Amazon Fire TV and the Roku box enable this type of explorations.
Thats a cool case study man ! Nice work :) I like ur timeline bar idea.
Yeah. I was thinking that the timeline could be a cool feature for something like Netflix for soccer. I would really love a service like that...
Why my comment isn't showed when I'm logged out
Interesting read. Regarding the selected content, I would pick ball possession instead of offsides. I think is an event more important than offsides.
In terms of colors, I would go with something like 2 shades of grey with some opacity for example. I like the 2 blues, but there are a lot of football teams with similar colors: Chelsea, Porto, Real Sociedad, PSG, etc.