MSO: Performance and reliability in sporting events timing

Added value of Apptitude

We utilized cutting-edge technologies and a methodological approach to transform MSO’s infrastructure. By leveraging Kafka Connect for bidirectional synchronization, Elasticsearch and Kibana for analytics, and Mongo Atlas for flexibility, we ensured optimal scalability.

Some figures

• + 140,000 connections / logins
• + 376,000 page views per month
• Marathon de Zürich : Provision of the participant list and results for over 14,000 individuals. Peaks of up to 8,000 requests per minute.
• Zermatt Ultraks: peaks of 13,000 requests per minute with an average response time of 500ms.
• Patrouille des Glaciers : the platform handles approximately 5,000 registrations.

Project timeline

The platform enabled the first registrations just 7 months after the project launched.

• 2.5 months: work to set up the Patrouille des Glaciers (discover our dedicated article about this event)
• 2 months: launch for all races
• 2.5 months: migration from the old platform

Awards

Winner of the Meilleur du Web in the UX/UI category.
https://business.mso.swiss/blog/mso-et-apptitude-decrochent-le-meilleur-du-web/

MSO: a family-run business

Since 2007, MSO has been timing sporting events. Whether it’s linear races, loops, multi-discipline events like triathlons, or intermediate timing checkpoints, this is only the tip of the iceberg. The timing world is far more complex than it appears. Services extend beyond race day, encompassing registration management and producing bibs for participants. Post-race, live timing and results publication for athletes, families, and friends follow. Managing multiple simultaneous events adds further technical challenges. With a continuous innovation strategy, MSO regularly enhances the experience for organizers and athletes, solidifying its position as a recognized industry leader.

Tailored support for sporting events

MSO’s management and administration systems rely on various digital tools to provide personalized support to sporting event organizers. This digital ecosystem is critical for delivering high-quality service and meeting client expectations from setup to race day.

Core ecosystem structure

Athlete platform: features a full catalog of races and allows athletes to register, manage accounts, orders, friends, etc.

Organizer platform: enables tailored event management and monitoring. Organizers can access data and statistics to coordinate communication efforts and maximise ticket sales.

MSO back-office platform: handles comprehensive management of events, athletes, organizers, and provides tools for MSO’s team.

A competitive market, with several major players vying for this expanding sector, demands a seamless and complete experience to ensure success.

Stabilizing and evolving the ecosystem

MSO sought to evolve its solutions by adding new functionalities.

For example, registration for team events like the Patrouille des Glaciers involves collecting extensive data for multiple participants. Adding fields complicates database management and requires an increasingly robust and flexible system. Revising the existing technological foundation was essential to ensure stability and future scalability.

Enhancing ergonomics and visual design

Providing a better navigation experience for athletes wishing to register for an event.

• Modular architecture: transitioned from a monolithic model to a microservices one, in order to reduce interdependencies between modules and enable easier implementation of new features.
• Gradual transition: tackled existing solutions step-by-step to manage development costs, risks, and critical milestones aligned with MSO’s business goals.
• No service interruptions: continuous service was essential given the packed race calendar, requiring a strategy to ensure uptime throughout the project.
• Meeting tight deadline: key events, such as the 2022 Patrouille des Glaciers, demanded high-quality and reliable platform performance.

Platform redesign: balancing technical complexity and an intuitive user experience.

We began the complete redesign of their athlete platform in 2019. On top of this, we faced the challenges posed by the pandemic and associated restrictions. The process was structured around weekly design workshops lasting 2 to 3 hours with Jérémy and his team. The support alternated between in-depth discussions to understand the processes and the creation of wireframes. Regular technical validation points were held to ensure the feasibility of the choices made. The main challenge was to provide a platform capable of adapting to the specific rules of each race. There were numerous particularities and practical examples, such as:

• The desired experience for managing team registrations.
• The definition of information for other public users that will be used to create rankings, versus private information visible when logged in, etc.

Despite this complexity, the platform needed to remain highly intuitive. Users return regularly at different times, whether to register for a race, view or update information, or finally discover the race results. The “public platform” thus goes far beyond the simple concept of an e-commerce site that one might initially imagine.

Once 50% to 60% of the wireframes were completed, we began working on the graphical aspects. We kept the orange color from the logo, while William proposed the foundations for a new visual identity. Clear and precise icons were developed to reflect and convey MSO’s values: professional and rigorous service. The internal MSO team then developed and integrated this new identity across all necessary materials.

In general terms, the platform’s ergonomics and navigation were optimized through clear categorization of the races. The goal was to allow any athlete to easily and intuitively find the type or race they were looking for. It was also essential that the platform’s responsive design be particularly effective to fully meet the needs and habits of the clientele.

Challenges faced

• Managing a platform with significant technical debt.
• Working on a mission-critical event management platform.
• Adhering to strict deadlines.
• Synchronizing a long-standing system.
• Navigating complex functional specifications.
• Handling usage spikes with elastic servers.

Two development options

To technically evolve this platform, we had two options. The first was to carry out a UX/UI redesign, maintaining the existing technological base, namely PHP and MySQL. The second, more ambitious option, was to start from scratch and rebuild a more suitable ecosystem, leveraging the experience gained. Ultimately, we proposed a hybrid solution that met the client’s objectives while considering market constraints and financial realities.

Our approach allowed for the progressive and controlled modernization of the technical stack.

Although PHP and MySQL are established and proven technologies, the evolving needs in terms of performance, scalability, and responsiveness of web applications now require more modern technologies. Solutions like React, Node.js, and MongoDB are better suited to meet these new challenges, providing an ideal framework for creating more dynamic and scalable web applications.

We considered this technological shift relevant, given the project’s requirements, particularly in terms of enhanced interactivity, improved performance, and scalability.

Advantages of the new technologies

React

• Provides optimal interactivity with responsive and dynamic user interfaces.
• Promotes the reuse of components, which accelerates development and makes it more flexible.

MongoDB

• Allows for flexible data storage in JSON format, ideal for applications handling unstructured or constantly evolving data.
• Perfectly suited for projects requiring large scale and rapid growth, thanks to its ability to handle large volumes of data without the rigidity of fixed tables like in MySQL.

Node.js

• Effectively manages a large number of simultaneous requests without compromising performance, making it ideal for real-time applications (chat, streaming, etc.).
• Facilitates rapid development by unifying the front-end (React) and back-end with a single language, JavaScript, thus simplifying communication between the two parts.

A scalable vision

We proposed a scalable approach for the project, aiming to gradually integrate the old system into the new one. The coexistence and synchronization between two databases with different philosophies were managed in a stable and sustainable manner. Although there was uncertainty about when this state would be achieved, we anticipated the risks of database denormalization.

To ensure reliable synchronization, we used Kafka + Debezium, a technology that enables real-time, lossless data transfer, even under heavy load, from one part of the system to another.

Kafka

• Scalability: Easily handles large volumes of data thanks to its distributed architecture, allowing it to adapt to the growth of applications.
• Resilience: Ensures message persistence, guaranteeing that data is not lost in the event of a failure.
• Decoupling of applications: Allows producers and consumers to operate independently, facilitating the integration of various systems.

Debezium

• Real-time change capture: Tracks changes in databases (insertions, updates, deletions) without the need for frequent queries.
• Simplified integration: Easily connects to multiple databases, providing a flexible solution for data management.
• Facilitates event-driven architecture: Enables actions to be triggered based on data changes, thus improving system responsiveness.
  

  ---

  Understanding what it is.
  The combination of Kafka and Debezium provides an efficient solution for real-time data management, offering numerous benefits for modern businesses. With Debezium capturing changes made to databases in real-time (insertions, updates, deletions), data can be easily integrated into Apache Kafka. This enables a scalable and resilient infrastructure capable of handling large volumes of information while ensuring fast message distribution. By decoupling applications, Kafka and Debezium allow producers and consumers to operate independently, while ensuring data persistence to facilitate error handling. With their flexible integration capabilities and access to a range of tools for event processing, this combination promotes the adoption of event-driven architectures, optimizing the responsiveness and efficiency of systems.

  ---

With this synchronization, we were able to absorb the data from the old system and use it on the new frontend. A smooth transition was thus achieved, without radically changing the well-managed internal processes. This approach had the following advantages:

• Similar data models to minimize compatibility issues.
• Advantages in terms of “read-only” components and lookups in tables.
• Management of shared models (athletes, baskets) and determination of the source of truth (MySQL or MongoDB).
• Challenges related to ID synchronization and the read-after-write issue.

Scalability and adaptability

Cloud deployment with Azure, combined with auto-scaling, allows the platform to automatically adjust to fluctuations in traffic, a critical aspect in the racing sector, especially during peak registration times or result consultations. This mechanism ensures that the necessary resources are dynamically allocated to maintain optimal performance.

A detailed article has been published by Microsoft.

A smooth deployment process has been established, with approximately two new versions deployed in production per month. This project has fostered a long-term relationship with MSO, with many developments planned for the future.

Innovations and technical benefits

• Use of new technologies to enhance the infrastructure.
• Decoupling the user experience from the old MySQL infrastructure.
• The ability to run both systems in parallel, ensuring a smooth transition.
• System elasticity to adapt to fluctuating and growing demands.

In conclusion, we successfully stabilized and evolved MSO’s digital ecosystem, meeting the high demands and challenges of the project, while laying the groundwork for future developments.

The platform has been live for several months, stable, and bug-free. The objectives have been met, covering all of the client’s processes. Most importantly, the overall satisfaction of clients, race organizers, and athletes is real.

“At Apptitude, I feel surrounded by brilliant people who quickly grasp our specific business needs. From design to platform deployment, including project monitoring, everything is well-managed and perfectly executed. I would like to thank the entire team for flawlessly completing this major project.” Jérémy Muller, CTO, MSO.swiss.

“The redesign of the mso.swiss platform was an especially challenging and interesting project for Apptitude. Its implementation required the use of a data capture change process and an event bus. These tools made it possible for a PHP-based backoffice system for MySQL to coexist and synchronize with a new Node/React platform built on MongoDB. A completely different tech stack, yet this was achieved without any interruption or redesign of the old system.” Jean Vaucher, Software Architect, Apptitude.