MATCHi - Scaling Up

Background

MATCHi is the world’s largest racket sports platform, connecting millions of players with thousands of venues globally. At its core, MATCHi is a robust booking system that has evolved into a comprehensive platform, offering features like live streaming, passage and light control integrations, and tools for managing competitions.

When I joined MATCHi in 2022, the company was transitioning into its scale-up phase. After years of rapid growth with a lean team, the platform had accrued significant technical and design debt, which in turn lead to bottlenecks. The core system was built on a legacy monolithic Java application, while the player experience relied heavily on a React Native app with a custom-built API. On top of this, several acquisitons of other companies were made with the intention of integrating them into the core product. This setup, while functional, was starting to hinder MATCHi’s ability to scale effectively.

Establishing a Design System

In order to continue scaling, we needed to tackle the growing technical and design debt. Designers and developers were working in silos, leading to inconsistencies in the user experience and inefficiencies in our workflows. To move forward, we needed a shared language that would promote consistency and collaboration across the platform.

A fragmented design leads to a fragmented user experience. To address this, I began setting up a design system to bring clarity and efficiency to our work. Rather than overhauling everything at once, I focused on starting small with a shared color palette and typography system, which we called Core. This included standardized color variables and typographic rules, along with a semantic naming layer like border/light or signal/error to simplify color management. This approach allowed designers to immediately connect their work to the system, laying the groundwork for more significant improvements down the road.

We adopted an iterative approach to developing the design system, adding components and patterns as we built new features outside the monolith. This method let the system grow naturally, aligned with real-world needs. Components were organized into shared (platform-agnostic), web, app, and brand categories, ensuring clarity and reusability. By aligning both design and development around this evolving system, we established a foundation for scaling MATCHi's platform effectively and consistently. We used Storybook within our frontend monorepo to document and showcase the components, making it easy for developers to understand and implement them.

A Shared Payment Experience

MATCHi handles millions of transactions each year, and with a growing user base, we needed a payment solution that could scale with us. The existing flows we're built on a legacy system that was difficult to maintain and stopped us from introducing new features and payment methods.

We rebuilt the payment experience from the ground up, focusing on a seamless, up-to-date and secure checkout process. The goal was to create a shared payment experience that could be used across all platforms, products and markets.

With our new service in place we were able to quickly introduce new payment methods and features, like Apple Pay and Google Pay together with the option to mix our own payment methods, such as value cards, with third-party providers.

The Widget

Expanding into new markets is always tough, especially when you're a marketplace with no venues or players to show for yet. As part of the expansion strategy we came up with the idea for a widget that allows venues to embed core MATCHi features on their own website. This made venues less reliant on our marketplace, while at the same time helping us reach new players.

Building the widget was anything but straight forward. Design-wise we had to pack a lot of features into a small space and make it feel like a natural part of the venue's website. Technically, we had to make sure that the widget was easy to implement, performant and safe to use. We opted for a web component solution that mounts a React app. This allowed us to build the widget in React using our design sytem, while making it easy to implement on any website. All that was required was a <script> tag and the <matchi-widget> element.

The widget supports advanced functionality, such as booking courts and activities across different sports and switching between venues within a chain. These features are configurable through props passed to the web component, enabling customization without added complexity. We also added support for multiple languages and style overrides to give venues the flexibility to match the widget to their brand.

Wrapping Up

Being part of MATCHi’s scale-up journey has been a rewarding experience. From tackling technical and design debt to introducing scalable solutions like the design system, shared payment experience, and widget, I’ve gained valuable insights into scaling a product during a period of rapid growth and what it means to not only grow but to turn that momentum into profitability. These projects not only improved MATCHi’s platform but also laid the groundwork for continued innovation and expansion. I'm excited to see how the platform evolves and proud of the role I played in its journey.