When we first met UEFA in 2010, our creative engineering reputation for technical expertise combined with product design made for a perfect match with UEFA’s needs. Over the course of a decade, our collaboration would see us taking on UX, UI and tech development for UEFA’s entire content archive, its video workflow and platform monitoring service, its global streaming platform UEFA.TV and much more. Here’s how.

You know UEFA for The Champions League, The Europa League, The EUROs – the Union of European Football Associations is the umbrella organisation for European football. It looks after a democracy of 55 national football associations across Europe, reaching far and wide. In the Champions League alone, over 8,500 goals have been scored in the last 30 years. When you consider the average number of goals scored in a game is just over two, that’s a lot of match time. Multiply that across over 20 different leagues and, well, you understand.

We first met UEFA back in 2010. Our combined technical credibility and strength in product design would be a key strength in starting our collaboration together, with an emphasis on the need for feature development, speed, agility and flexibility. If you cast your mind back to 2010, this way of working wasn’t all that common, even today’s tech was in its infancy – it was a time when Apple launched its first iPad, when Uber and Netflix were still trialling its apps in San Francisco and Canada, even Instagram had only just been born.

From there, our relationship has blossomed into a creative engineering support role of over a decade, through various milestones and technical developments to keep UEFA at the forefront of the digital landscape in football. We took on UEFA’s Legacy Media Asset Management System (MAM), its platform monitoring service for video workflows across the world and its UEFA TV application(s). All of which had an immediate impact on UEFA staff, journalists, broadcasters and football fans around the globe.

An archive worth millions

The very first project we worked on with UEFA was a redesign of its MAM – named UEFA Legacy – to open up access to anybody outside of UEFA’s internal team. Whilst the governing body was already monetising the rights to its archive of football content, it wasn’t doing so at scale.

Despite then digitising its archive, it still had no way of making the process self-served – which is where this project stepped in. The redesign would enable external access for ordering and receiving footage under strict user permissions, like a highly regulated self-serve system. Although a B2B service, it would be dealing with real people and, therefore, would need a customer experience that rivalled any high-end consumer digital product out there. 

We designed a feature rich yet intuitive user interface exclusively for UEFA. The final product included a custom media player, with match event metadata synced to the timeline, advanced predictive search, multi-angle camera views, video frame telestration, the ability to clip and stitch multiple video segments into a single file, secure digital file delivery, and much more. Put it all together and we made UEFA Legacy a steadfast platform for managing an archive with hundreds of thousands of matches inside it. 

A web-based media asset management system, we built both the front and backend of UEFA Legacy. On the frontend, we used Angular.js for a dynamic and responsive UI, combined with Javascript for its interactive features and HTML5 and LESS Stylesheets to keep it looking tight. On the backend, for the developers among you, it’s built using a scalable on-premise infrastructure for reliability and efficient performance, with a database powered by MySQL. The server itself is built using node.js, a lightweight and fast Javascript runtime, key to scalable dev builds. 

Tracking the rights to an entire tournament

Subsequently, UEFA asked us for a web-based, multifaceted tool for monitoring the health of its core digital services. With a rapidly changing brief just weeks ahead of UEFA’s EUROs, the project would need a great deal of flexibility and pace. 

Used by many match ops teams at once, UEFA Monitoring keeps a track of asset usage, availability and transfers. It includes a media player for monitoring multiple live match broadcast feeds, a dashboard for the status of content transfer and ingestion points, a ticketed system for logging tech issues and remedies and a real-time upload and download monitor for UEFA Legacy, its central content archive. Since its inception, it’s been a key part of UEFA’s match day operations ever since. For context, at the UEFA EUROs 2016, the building housing its monitoring service was nothing short of a warehouse, with wall-to-wall monitors set up that filled the space. This service is vast.

Technically, we built the frontend using Angular.js and Javascript again, as it was essential for the system to have a responsive user interface with multiple interactive features. The web-based app uses a Federated Active Directory Single Sign-on for a seamless and secure authentication and authorisation process with internal users. On the backend, it’s built on a Dockerised on-premise infrastructure for flexible deployment and management. With the server built using Java Spring, performance is high whilst Server-Sent Events (SSE) makes real-time server communication fast for whoever is using it.

Over 20 leagues, anywhere in the world

Perhaps the other most notable product to mention is UEFA.TV, an on-demand streaming service bringing football directly to millions of die-hard fans. From extended highlights of UEFA’s 20 European competitions to UEFA’s extremely popular documentaries, competition draws, original series, interviews and press conferences, UEFA.TV is a native, multi-platform OTT watched globally across web, mobile and connected smart TVs. It also has the ability to personalise content to the user’s favourite club and extend coverage from that of linear broadcast TV. Viewers can even jump to key moments in the match by clicking on annotated sections within the player’s timeline. You can find it on HiSense, Playstation 4 & 5, iOS and Android, Apple or Fire TV and on the web too.

For the web, UEFA.TV is built as a SIngle Page Application using React.js, Redux, HTML5 and Styled Components, with a single codebase across desktop, mobile and smart TV platforms like PS4 and HiSense. All of these parts gave us the flexibility to build at scale and at pace for the client, whilst keeping the UX and UI in a stable state. On iOS, it uses Native iOS, iPadOS and tvOS frameworks and an MVVM architecture pattern with RxSwift for reactive programming across complex state changes and user interactions. We achieved the same thing on Android by building natively using Kotlin, a language known for being concise, expressive and safe. We combined the MVVM architecture with RxJava and databinding to stay reactive. All of this is then powered by an AWS Cloud infrastructure, adding in flexible and scalable middleware for custom features that aren’t out of the box. It gave UEFA total control of its fan experience, uncoupling the frontend from the backend.

A very special relationship

So far, we’ve formed a 14-year collaboration with UEFA across over 11 different products, just three of which are mentioned here. Across the last decade, a commitment to high-quality work has seen products like UEFA Legacy become something of a cornerstone to the way UEFA operates.

It’s a shining example of how we like to work with clients, committed to consistency and longevity. To utter transparency and reliable support, whether a large organisation or a boutique business. Building a trusted and valued relationship with the UEFA team has been incredibly fulfilling and we look forward to many more years of success.