Single Game Tickets

A complete redesign and infrastructure overhaul of the Single Game Tickets page, a key revenue source. The project focused on enhancing user experience, aligning with business goals, and integrating with various services.

Portland Trail BlazersSpring 2024Full-Stack Engineer

Introduction

During my time as a Full-Stack Engineer at the Portland Trail Blazers, I worked on a wide range of projects—from fan-facing experimental digital experiences to creating web systems and elevating internal initiatives through digital solutions.

One significant project was the complete redesign and overhaul of the Portland Trail Blazers' Single Game Tickets page. This page was a major revenue source for the organization, accounting for more than 20% of ticket sales.


Client Overview

This project involved a complete redesign and infrastructure overhaul of the Portland Trail Blazers' Single Game Tickets page, a crucial platform responsible for over 20% of ticket sales. The new web system was built from the ground up, focusing on user experience, business goals, and seamless integration with the NBA's evolving API, resulting in a streamlined, fan-friendly interface that effectively promoted diverse events and ticket options.

Challenge

Despite offering a variety of promotions and diverse events—including celebration and theme nights—the Single Game Tickets webpage failed to effectively present this information to fans. There was also a growing need to guide fans to specific games while providing a clean interface for browsing other games.

Solution Approach

From the outset, this project was a monumental undertaking with numerous interconnected components. The primary challenge was ensuring that both the frontend and backend technical aspects harmonized with the data flow, all while adapting to the evolving landscape of the NBA's new API that I would be implementing.

First, I simplified the goal into three key focuses:

Fans looking for games.

Business objectives

Development experience

This approach allowed me to prioritize functionality and timeline effectively. It also ensured we had the necessary data available and minimized potential technical debt.

Key Features and Considerations

  1. Mobile-Friendly Interface -- After reviewing our Google Analytics data, I discovered that most of our fans accessed the site via mobile devices. Consequently, the interface needed to be optimized for mobile viewing, considering browser compatibility and mobile-specific limitations and optimizations.
  2. Game Dates and Opponents -- A top priority for users was an interface that allowed easy viewing of dates and opponents while offering sophisticated filtering options.
  3. Integration of Special Offers and Events -- A key business requirement was to create a dedicated space for events and special offers on the page. This integration needed to work seamlessly with the existing service drawer, allowing offers to be displayed and accessed through it.
  4. Custom CMS System -- An easy way for internal teams to manage events and offers was crucial. This system would allow them to add, remove, and update content efficiently, ensuring up-to-date information and saving time. It built upon an events feature implemented by the current page's vendor, shifting responsibility away from the business intelligence team.
  5. Multiple Data Sources -- We worked with various data sources, including the NBA Schedule, internal ticket database, and databases housing offers and events. Being strategic with loading speeds, minimizing transformation costs, and optimizing as much as possible while maintaining flexibility was crucial.

Additional Enhancements

  1. QA Environment -- A dedicated page for the internal team to review and verify events and offers content before publication.
  2. Dark Mode -- For fans accessing the page at night, enhancing readability in low-light conditions.
  3. Query Parameters -- Enabling the paid ads team to share specific game views or apply certain filters through URL parameters.

Results

After numerous iterations of game card redesigns, filter bar revamps, and optimizing the display of game-specific information for events and offers, we finalized these designs and features. We also included extra elements to excite fans about the upcoming game.

Development Highlights

NBA API Custom SDK

A wrapper around the NBA API was essential to convert variables and properties into a shared language within the codebase.

QA Environment

A dedicated QA page to preview and verify selected events and offers before publication.

Internal Ticketing Pricing Database

A connection to the database that the business intelligence teams manage via an API, using an ORM like Prisma to fetch properties and data while also parsing incoming information.

Notion CMS Database

To allow for easier management of events and offers, I chose Notion for its clean, simple design, database support with various data types, and powerful API.

Caching System

Implemented a Redis caching layer for improved speed and efficient management. This allows for quick clearing of cached data when internal teams update events and offers.

Interface Enhancements

Game Card Redesign

Game Card Redesign

The game card served as a vital component of the interface, enabling fans to easily view and compare various games at a glance.

Emphasized the game day with larger text, displaying the month and weekday above it and the time below.

Opponent logos appear next to the date information, with light and dark versions for light and dark mode interfaces.

A plus icon was added to the card's top area, which users can click to open the game modal experience.

New Addition: Game Modal Experience

New Addition: Game Modal Experience

The modal experience offers a unique view of a specific game, showcasing events, offers, and other content designed to motivate fans to purchase tickets.

Events are displayed first, featuring creative content and a hyperlinked title.

Next, we have the offers section, which can contain multiple items presented as cards. A specific Game Modal can be opened using the game=[gameId] parameter.

Filter Bar Revamp

Filter Bar Revamp

The filter bar required redesigning to accommodate the new offers and parameter-based states. When a filter is selected, parameters are added to the URL for easy sharing.

Filter labels now include offer information for easier browsing. The Filter Bar is now sticky, allowing users to view games and apply filters simultaneously.

A Dark/Light mode toggle is added for easy theme switching.

Conclusion

This project involved extensive collaboration with various internal teams. We brainstormed and ideated together, sharing perspectives and previews of upcoming features. By coordinating these efforts, we gathered valuable insights on creating the ideal user experience.

While I spent hours debugging, gathering constructive feedback, and preparing for launch day—working late into the night and starting early the next morning—the exciting launch of the Portland Trail Blazers' new Single Game Tickets page was an incredibly valuable and rewarding experience. This project, with its many moving parts and navigated complex legal and business requirements, ultimately resulted in a successful launch that turned heads across the sports industry.