Brighton Vino Jegarajan

Problem Domain

The effort and early attempts in this directions have resulted in fairly successful second screen apps for TV shows actively engaging the users in alternate narrations, background information about characters, quizzes, social-feeds, etc.

The companion apps for TV most often provide pre-defined content related to it, to all the users. There is very little need for context awareness or customizability in content for different users. Research and exploration on companion experiences especially for live sports has been fairly nascent and with the exception of few publicly available applications, there seems to less evidence towards a compelling second screen experience for live-sports.

The objective of the project is to explore way to engage and sustain interest and excitement through actively involving in activities and experiences through second screen applications on companion devices.

Understanding The Big Picture

Live sports audience can span a wide range of demographic. Its offers a different challenge in the fact that the interests of viewers varies greatly. The could be a viewer watching a sport for the first time or could be forced into watching a game where he has no interest or someone who religiously follows every game of his favorite team. Expanding the general scope of audience, there could be also be viewers with professional interests, like a statistician or data-geek interested in numbers and sports visualizations, coaches, trainers who are inclined towards the strategies and opponent game-play, etc. Each of these contrasting personas would require different content at different levels of detail.

Depending on the kind of sport, the time at which these data could be of interest would vary. Regular viewers are subjected to varying break times; soccer where there is one long break (typically 15 minutes) after a game-half and american football where there are multiple short break and timeouts (typically 45 secs - 120 secs).

What constitutes the experience ?

So the first step in the process, was to step back and understand the broader question of “What constitutes the experience of watching a game ?”. It involved insights into when they watched a game live, what was their motivation to follow a game and what did they simultaneous do when watching the game.

To understand and gain insights, the user requirement gathering was done in three phases, each of which was motivated by and built on the findings from its predecessor phase, focussed on answering the four key questions

  • When do they watch a game ?
  • What was the motivation to follow the game live ?
  • Where do they watch the game ?
  • What do they do before / during / after the game ?
  • Phase 1 - Preliminary User Understanding

  • Phase 2 - Focused User Study

  • Phase 3 - Field Study

  • Literature Review - Social Engagement Trends on Second Screen

  • Competitor Analysis - Affordance Matrix

Defining The Design

From the user requirement study session, components that make up the entire experience was classified: social experience of watching with other friends, discussions and debates on strategy and stats, expert analysis, playing fantasy games, social drinking, and following the reactions of social media amongst others.

From the competitors analysis and the user study, a list of all features that could map to one or more of the these category of experience was listed and each of them weighed to the priority and feasibility of each.

The focus was narrowed onto three of those, the social aspects, the team formation and strategy aspects of the game and the social media.

Activities in Physical World to Experiences

All the match related content, events during the game and the activities people did during the game were listed and mapped onto the experience category that it promotes. Socially aspects and engagement of each of them was also studied.

Experiences to Interactions in Digital World

Events that typically happened during the live game were picked, and a digital metaphor for the social action was perceived and categorized them into four sections which manifested into features inside the four broad sections of the App.

Design Approaches

Two approaches to designing the experience was explored. The first one being social centered which focused on social media and second approach which which was relative game centric where social interaction was augmenting the core experience.

Each of the the designs had time synchronous events highlights, referred to as “event-cards” appear on the screen. The event card has the timestamp of the game time and quick short description of the event.

Tracing back the designs to the findings of the user requirement phase, Design B was more on line with the findings. Watching the match was the core experience and the social element only augmented the experience.


Each of the sections was made into a box which had important or the latest information highlighted and/or persistent on it. The box also act as menu links into their individual section.

The event cards appeared from the top and event highlights and key events were added on the horizontal match timeline above the feed of event cards. The feed could be scrolled by either swiping over the feed or moving the scrollbar on the match timeline. The feed also had a filter option to reduce the type of event cards shown on the feed and also a way to quickly locate a particular type of content / event.

Evaluation of Wireframes

A quick heuristic evaluation of the wireframes was done to collect early feedback on the design skeleton. The evaluation was done by 3 peer classmates and colleagues. They were provided the context using the app while watch a live game on television. They were asked to comment on the structure and were given certain tasks which they pretended to do using paper wireframes.

Interaction Design: Cheer and Boo

Interactions from Table [2] were grouped into similar ones. Some of there interaction involved expressing either of the contrasting responses. There was positive and negative side to each of these. There was several examples of such interactions in the apps and service, Facebook Likes, Google +1s, up-vote and down-vote and such.

This interaction unlike the Facebook ‘Like’ had a defined negative equivalent to it. This interaction termed “Cheer and Boo” allows user to drag the center circle on the bottom of each of the event card to the left or the right end. This interaction was inspired by the quick swipe gestures of Tinder which offered a quick affordance to an interaction that could be considered equivalent to a like and dislike.

Interaction Design: Timeline Brushing

The timeline on the right has a handle that points to the current position of the event feed. In the default state the feed scrolls automatically with the addition of new events and the handle points to the current point of the game.

The team flag / logo is on either side of the progress indicator which fills up as the game progresses towards full time. Key events are represented by icons on the side of the progress bar corresponding to the team against the time of the event.

The user can scroll to any segment of the game by simply dragging the handle along the progress bar which provides a quick way to scroll and skip through the events. The icons assists in targeting the handle drag towards a particular key event in the game.

Interaction Design: Team And Predictions

The “Team” section of the app has a playing field with the starting lineup and substitutes. User can drag the players on the field to new positions. The purpose of this tool is to provide a visual assist to discussion of strategy and gameplay.

The user can also predict Player-of-the-Match and Substitutions by dragging and dropping the players in the prediction windows. This intends to provides a more engaging experience when compared to current textual and voting interactions common in most sports apps.

Implementation and Evaluation

Bringing all the pieces of the interaction design and wireframes together, a high fidelity prototype for 10” tablets was designed.

The front-end of the design was accomplished using the HTML5/CSS3 combined with jQuery, D3 and Drag Interaction libraries for the interactions and animations. A MYSQL Database stored timestamped events of the game and the video stream of the live game was time synchronized with the second-screen application using a server-client architecture over WebRTC with the communication facilitated using PeerJS

  • Quick Early Testing - Study Design

  • Session 1 - Results and Early Fixes

  • Comprehensive Testing - Study Design

  • Evaluation - Results - What Worked

  • Evaluation - Results - What Failed

Closing Thoughts

The project and exploration received good attention and a fairly good social reach through word of mouth. Industry experts at demo sessions appreciated the potential and expressed interest to learn more and explore further.

The prototype and current implement would have done its job if it could demonstrate a good reason for Sports Broadcasters to open out their content APIs to developers for further exploration and testing, and encourage fellow researchers to make research on second screen experiences for live sports on television.