Pro League, the organization that unites all 26 professional Belgian football clubs, wanted to create a new digital ecosystem that revolutionizes the fan experience for Belgian football leagues and strengthens the brand image of Pro League. We came in the picture to build a digital platform that flawlessly provides the users with content, stats and videos. Available right at their fingertips.
The Short Story
- Challenge: Creating a digital space that flawlessly integrates content, statistics and videos for football fans, while accentuating the Pro League brand
- Solution: Developing a completely branded new digital platform that seamlessly provides video, stats and other content from different 3rd party providers
- Approach: Combining a headless CMS with Google Cloud Platform infrastructure to build a website that can scale instantly with the fluctuating load
- Outcome: A new, scalable and easy to maintain Pro League web platform that offers a variety of content and can handle peak loads effortless
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 organization 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.
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!
Working in a limited time-frame - we’re talking a couple of months here - we put the digital product 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.
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.
Rebuilding Pro League’s digital platform was definitely a success. Firstly, we elevated the fan experience to a higher level. Secondly, the 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 became a trustworthy source for media & press.
Don't take our word for it. The metrics speak volumes.