NBA Launchpad Cohort 2023
🏀
NBA Launchpad Cohort 2023 🏀
Sports Data Integration
*Due to Non-Disclosure Agreements, specific details and visuals from this project are omitted to maintain confidentiality.
Product Designer
Role
Company
Client
NBA
Tagboard
Sportradar Partnership Integration for NBA Launchpad
Sportradar is the official data provider of NBA statistics.
For Tagboard's Graphic Editor, our collaboration with Sportradar was a key enhancement, particularly for the NBA Launchpad project aimed at enriching basketball live games.
Working with Sportradar allowed us to integrate their live data directly into our system. This meant that NBA teams and broadcasters could quickly import up-to-date data using API keys. They were then able to efficiently edit their graphics, incorporating detailed data points, team colors, and photos in a smooth and hassle-free manner.
This project could not have been possible without the engineering team, Lance Harper, Griffin Hammer, VP or Engineering Craig Wills, our Product Manager, Jenny Yang and VP of Product and Strategy, Christine Chalk. Thank you to our friends at NBA and Sportradar.
Sportradar’s API Map
Sportradar’s API Map
Map I used to help guide my design direction while back-end engineers gathered more information on API capabilities.
Understanding Parameters
To begin, I utilized the API map provided to understand the types of parameters that are require to make API calls.
It was understood that to access the main data sources, users would only need to input a date or specific season.
This was important to understand because:
Helps determine the user experience and user flow
Selecting a primary feed would determine the additional data users can select from
Selecting Parameters
Graphic Editor, Modal:
Once Sportradar data is selected, users can choose parameters in order to get the data they want. In-Game and Seasonal will offer different types of data to filter from.
Familiarizing myself with the data
The map data just wasn’t enough. Using our test API key, I took it upon myself to explore the available data directly in Postman.
This hands-on exploration was essential for understanding the details of the NBA data, including:
Player statistics
Game outcomes
Team rankings
I worked closely with the PM to learn and familiarize myself with the data structures and content.
I found this to be extremely useful in learning surface level capabilities, and I was able to identify how data could be structured for our users and design a workflow that facilitated easy data selection and previewing.
This process ensured that the final design was user-centric, allowing for the seamless integration of real-time NBA data into user graphics, thereby enhancing the overall user experience in creating engaging, data-driven basketball content.
Example of JSON I reviewed to understand API endpoints retrieved by the parameters selected.
SVP of Product and Strategy, Christine Chalk
“While we may not be the first company to bring live data into a graphic, we are the first company to do it in a way that enables production teams to 3x their content output.”
Designing for scalability
Graphic Editor, Modal:
After selecting Sportradar option to import data, users can select different from a list of sports.
During the design process, it was imperative that the workflow was specific enough to tailor to the NBA and the demands of the project, but adaptive in order to cater to other sports.
Outside of sports using Sportradar, I had to keep in mind that we would add other data integrations. Future integrations would include:
Stats Perform
Genius Sports
Opta Sports
Learning about Sportradar API keys gave me insight as to how others might structure their data, which helped in creating a flow that would (theoretically) easily tailor to other data sport providers.
*Final Design*
Utilizing the API Map and the knowledge obtain learning from the API keys, I was able to come together with front and back-end engineers to create a intuitive and functional way for the users to filter data they need.
Graphic Editor, Modal
Parameter requirements helping make the API calls in real time inside the graphic editor.
*Due to Non-Disclosure Agreements, specific details and visuals from this project are omitted to maintain confidentiality.
Learnings
Navigating the Unknowns with Sportradar’s API
Incorporating Sportradar's API into our project presented a unique challenge of designing amidst uncertainties.
Lack of complete information about the API's capabilities and data structure led to assumptions in our design strategy.
The importance of designing with flexibility in mind, allowing for rapid adaptation as new details emerged.
Pivoting our design approach is necessary to fully leverage of rising product knowledge.
This shift not only improved our product's functionality but also taught us the value of resilience and agility in product design.
Embracing the unknowns and being prepared to pivot based on new information has since become a cornerstone of my design philosophy, ensuring that the solutions we develop are both innovative and fully aligned with the technical framework we operate within.
Tagboard App Marketplace Launch
In addition to the NBA Launchpad, I contributed to the launch of Tagboard's App Marketplace, a groundbreaking initiative designed to expand and enhance real-time content curation and display capabilities. This project revolutionized the way users interact with social media content, making it easier and more dynamic for broadcasters and digital teams.