Inspiration

My team just missed the much needed equalizer goal AGAIN!! After I finished yelling at my tv, the questions start running though my mind:

  • Why can’t my team find the back of the net?
  • Are the shots from too far out?
  • Is the defense and goalkeeper blocking everything?
  • Can my team just not put the ball between the posts today?

B-JAM knows this feeling all too well and so we set out to design a fan experience app that would quickly provide game insights without taking our eyes off the action.

What it does

Fanalytics is a soccer experience platform that fans can use to get analytical insights into the games they watch. We analyze real-time streaming data and provide users with visualizations they can use to watch the game “like a coach”.

How we built it

Our team (of 4) was comprised of a data scientist, a data analyst, a front-end developer, and a backend developer. After deciding on an idea that we could contribute to equally, we split up the work to play to our strengths and got started.

The data team worked on finding ways to use real-time data to drive analytics and increase fan engagement during games. The developers discussed how to deliver this information to the end-user; they sketched out an end-to-end data pipeline that processes streaming data and displays it in a web interface.

Challenges we ran into

All visualizations must be easy to understand to the average fan within a few seconds. While we had no shortage of analytics we would love to develop; the challenge was to be very strategic. We implemented a “5 seconds rule” where in order to be considered, a team member had to be able to understand a graphic within 5 seconds

We ran into technical challenges as well trying to determine the best way to stream data from the back-end and plot data on the front-end. We decided to take a simple approach and use a REST API to stream data and we decided to plot data using the canvas feature of HTML5. We also had issues with the way Angular routes views but we were able to resolve those issues by working our way through the provided documentation.

Accomplishments that we're proud of

We built an end-to-end data driven application in 24 hours! Solved a business problem and architected a prototype with a functioning front AND back-end.

What we learned

In the spirit of Agile, we conducted a check-in stand 3 hours to make sure we were on target for what we planned to deliver. This helped ensure the team was on track for hitting goals and gave us an opportunity to get clarification for the points where our work intersected. We learned that effective communication is required for project success.

We were also able to utilize and become familiar with new technologies, specifically Angular 6.

What's next for Fanalytics

The app we built was designed to replicate a TV app, so a mobile app would need to be built out as well. Our thought was that the content on the TV app would be controlled by the broadcast booth where the mobile app would be more interactive and fans could select the visualizations or information they would like to see. The data pipeline of our application would need to be improved as well, figuring out an efficient way to stream live data. More visualizations would also be need to be implemented as for this project we only implemented one, a shot chart. Integrating a graphing library, like GraphQL, would help to provide quicker and more aesthetically pleasing visualizations.

An idea we didn’t get the chance to implement was to integrate a Twitter feed into the application. The Twitter feed could just pull in tweets based on the game hashtag or pull in tweets from specific people. Like TV broadcasters, we thought teams could do the same for Twitter and get former players or media personnel to live tweet the game.

Another thought was that our application could be a stand alone mobile app or it could be pulled in to existing mobile apps that soccer teams may already have. This would allow teams to partner with media companies and stats companies to provide commentary and data.

Since our application was built in 24 hours the front-end design needs to be improved so hiring a UX/UI designer would be paramount for a commercially ready product.

Share this project:

Updates