The Challenge

Football, no matter how you twist or turn it, enjoys huge popularity in our tiny country. Pro League is the flagship of Belgian football. It’s the umbrella organisation of the Jupiler Pro League, the 1B Pro League and the Proximus ePro League, with the sole ambition to bring football closer to the fans and the fans closer to the clubs. 

Now, they felt it was high time to lift the fan experience to the next level. Besides that, Pro League needed an effective communication platform that enhanced the clubs as well as their own brand(s). The task at hand? Becoming a digital platform where every statistic, every match highlight, every live score and so on are gathered and easily available.

Once we figured out where the goal was, it was time to hit the ball in the net.

‍The Solution

The web platform

To give the fans what they deserve and to make Pro League the reference point for Belgian football, we transformed their old website into a state-of-the-art digital platform capable of integrating diverse external services used for videos, statistics and other content. 

By creating this digital landscape - covered in a brand new design - we tackled multiple goals at once: strengthen their own brand and clarify their role, build a direct relationship with the fans and become the go-to source of football information for media and press. Score for the fans and score for Pro League! But why stop at a web platform?

The mobile application

To really get the soccer experience to the fans, you can’t do without an app. Based on the solid foundations of the web platform, we extended our mission to build the fan experience of tomorrow into a tiny little mobile app. React Native was the obvious choice for this build, as it allows a neat integration between web & app. 

The Pro League app covers all features a football app should have: live updates, calendar overview, ranking, upcoming matches… But it goes one step beyond: it provides deep statistics & triggers interaction with the fans. The real football freaks can enjoy Belgian’s most extensive statistics about players, clubs, duel histories and so on - thanks to a flawless integration with Pro League’s database. And, if you like, you can vote for the man of the match in a matter of seconds. Fun touch, right? 

This makes the new Pro League app the single source of truth for every Belgian football fan. But we never settle, it’s never done. Through continuous user testing & validating, we’ll keep improving the app to cater to all the needs of our users.

‍

The Approach

Working in a limited time frame - we’re talking a couple of months here - we put the digital platform on a fast track. After a short strategic exercise, our team started developing the first prototypes. One of the main challenges was to align the 3rd party providers in the platform, as Pro League uses STATS perform for statistics and WSC Sports for video. Working on this issue, the team even managed to find a more cost-efficient workaround for video integration! 

We continued the fast track by continuously shipping, monitoring and improving. We managed to deliver the MVP just before the kick-off of Belgium’s new football season. After the web platform was shipped, we got our hands dirty and went full React Native on the app side. Thanks to vigorous user testing and a wide pool of Beta users, we were able to ship a full-blown mobile application that serves every football head’s needs and desires.‍

Tech Crunch

The website is built with a headless CMS. This allows us to develop the frontend in a fully decoupled way, where we made use of NextJS to build this website. NextJS allows us to make use of React on both the server and the client as a go-to approach for all our rendering needs. This simplifies the development immensely. We made an API Gateway to feed both the data from Stats Perform and our headless CMS. This API is a GraphQL-based API, which allows us to work fully typed with the data we are receiving from the data providers. All of this is built with the latest and greatest computing service - from Google Cloud Platform - Cloud run. It’s a fully managed way to deploy your containers to production without worrying about scaling the underlying infrastructure.

Besides this setup we’ve done for the website and the APIs, we also set up event-driven architecture to easily ingest new videos and enrich them with the relevant metadata before fully automatically publishing this to the website. This event-driven architecture is powered by services from Google Cloud more specifically Cloud functions for processing, Firestore for storing the relevant data.

To keep the cost low and the performance high, we have implemented caching in multiple layers of the architecture. We cache the input data sources and output of our APIs. We apply HTTP caching combined with applicative caching all stored in Redis (fully managed). We apply a fine granularity for the optimal balance between fast & fresh data. Next to that we also cache the pages by making use of edge side caching with the right cache control headers in place. This provides an optimal experience for our end-user and keeps the load to a minimum.

The Outcome

Rebuilding Pro League’s digital platform and shipping a brand-new app was definitely a success. Firstly, we elevated the fan experience to a higher level by delivering a top-notch app. Secondly, the web platform proves to be an effective communication channel for the Pro League itself - which was something they lacked in the past. And last but not least, the platform quickly became a trustworthy source for media & press.

Don't take our word for it. The metrics speak volumes.