Real Madrid

Managing stadium capacity during maintenance and partial reconstruction is a complex task that requires precise planning and execution. To make this process easier, our team developed a web-only interface in collaboration with Spanish consultancy Everis. This project was carried out between 2019 and 2020, with the aim of providing a simple and effective solution for managing stadium capacity during maintenance and reconstruction projects.

Our previous successful project with La Liga LFP was instrumental in our collaboration with Everis. This joint proposal allowed us to work together and build a custom application that met all the specific requirements of our client. We were responsible for the whole architecture and development of the application, using Node.js (NestJS) for the backend and Angular for the frontend.

With our previous experience working for La Liga (LFP), we were able to provide outstanding development pace in a project with lots of constraints coming from multiple stakeholders. Our team handled both the front- and the back-end development for this extremely complex platform with a heavy load on the data visualisation side.

Project tech stack

Node.js

Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript Engine, and executes JavaScript code outside a web browser.

Angular

TypeScript-based, free and open-source web application framework led by Google and by a community of individuals and corporations.

SQL Server

Microsoft SQL Server is a proprietary relational database management system developed by Microsoft.

SVG Path

Low level toolkit for SVG paths transformations.

One of the key challenges of the project was the need for dynamic allocation of seats in the stadium. To address this issue, we used SVG paths, a scalable vector graphics format that allowed us to create dynamic visualisations of the stadium and its seating arrangements. The project included a lot of visualisation layers and screens, which made it easier for our clients to manage the stadium capacity and make informed decisions during the maintenance and reconstruction process.

As a designer and UI/UX specialist, I firmly believe that covering the entire product process, from design to development, is crucial to ensuring a consistent and high-quality user experience.

Project wins

Performance

We rendered 80,000 seats simultaneously using Angular, CSS, and SVG. Unlike most systems that load seats by zone, we displayed them all at once.

Seat creation

We built an automated system to generate seating layouts in any zone, even curved or irregular ones. It accurately reflects seat shape, orientation, numbering, and spacing.

Industry knowledge

Our experience with LaLiga, FC Barcelona, Everesting, and Pivot Analysis helped us hit the ground running with a solid strategy.

Analysis

The platform was designed to help club executives make data-driven decisions on seat relocations during the stadium renovation. This set of data visualization tools was a major success.