Teamfight Tactics - Macao Open
Responsive website for TFT's esports event
An engaging platform for the Teamfight Tactics “Macao Open,” providing essential event details, seamless ticket sales, and an interactive schedule for players and fans.
Project Overview
For this case study, I worked on designing the official website for the Teamfight Tactics (TFT) “Macao Open,” an annual esports event set to take place in Macao, China. Teamfight Tactics is a strategy-based auto-battler developed by Riot Games and is part of the larger League of Legends universe. Since its release in 2019, TFT has built a strong global player base, with over 80 million players worldwide, and at its peak, it attracted 10 million daily players . The Macao Open is a key tournament in TFT’s esports calendar, drawing in competitors and fans from around the world, further fueling the game’s competitive scene.
The website’s primary goal was to serve as the central hub for both players and spectators of the event, offering a comprehensive and interactive experience. My task was to design a website that could seamlessly present all relevant information about the event, while also providing a streamlined experience for purchasing tickets, tracking match schedules, and staying updated with player leaderboards.
Design Approach
From the outset, the website was designed to be responsive, ensuring that it worked smoothly on tablets and mobile devices, which was crucial given the global audience and the wide range of devices users would access it from. By maintaining a responsive design, the website offered a consistent user experience across platforms, whether someone was checking match results on their phone or purchasing tickets via their desktop.
The core features of the site were developed to provide easy access to essential information. These included:
• Event Information: A homepage that served as a central hub for all event-related details, effectively promoting the Macao Open even before it started. This page included crucial information such as the venue, date, and highlights of the event.
• Countdown Timer: A live countdown to the release of tickets, building anticipation among fans and driving ticket sales.
• Ticket Purchasing: An intuitive and secure ticketing system, allowing users to reserve their spots at the event. Special attention was given to the user flow to ensure that purchasing tickets was straightforward, minimizing friction points.
• Event Schedule: A detailed, easy-to-navigate schedule listing not just the tournament matches but also any additional side events or meet-and-greets, ensuring that visitors could plan their experience thoroughly.
• Brackets and Leaderboards: The inclusion of up-to-date match brackets and player rankings was essential for fans following their favorite competitors. This allowed for real-time updates, providing a dynamic experience for those actively engaging with the event.
• Account Dashboard: For attendees, a personalized dashboard offered important event-related data, including QR codes for easy check-in, personal ticket information, and event reminders.
Challenges and Solutions
One of the primary challenges of this project was designing for a broad audience, from dedicated players who followed the competitive scene closely to casual fans interested in attending the event. As a result, the UI had to balance detailed information about the matches and players with the needs of users simply looking to purchase tickets or learn more about the event. I also had to consider localization, given the global reach of TFT, ensuring the design was adaptable for different languages and regional requirements.
Furthermore, designing for multiple devices posed challenges related to layout and performance. Ensuring that the site’s various components, such as the live leaderboard and schedule, functioned properly on both desktop and mobile required careful attention to responsive design principles.
Outcome
The website was launched successfully in time for the Macao Open, delivering a seamless and engaging experience for both attendees and spectators. The client was very satisfied with the final product, particularly highlighting the ease of use and the responsiveness across mobile and tablet devices. Ticket sales were strong, and user feedback was overwhelmingly positive, with many praising the intuitive interface and smooth user experience.
For me, this was an exciting opportunity to work on a high-profile project for Teamfight Tactics, one of the biggest games in the world, and to contribute to the rapidly growing esports scene. It was a unique experience to be involved in such a dynamic industry, and it allowed me to further refine my skills while delivering value to both the client and their audience.
