NBA Product Design

NBA Product Design

The NBA international product group focused on all fans outside the United States—–215 countries across 15 languages to be exact. Starting in 2018, new business objectives focusing on user engagement, DTC conversion and retention meant it was time for a product update. My team and I were brought in first on the mobile apps, then TV, then web. We restructured the architecture of the products and elevated the UX to be in line with other best-in-class sports products. In parallel we explored new ideas for brand application to the UI, motion design language, personalization, content logic, storytelling, ad placements and new features.

In October 2020, at the start of the NBA bubble in Orlando, our work was launched to the world. Deep tracking and analytics provided new insight into how users engaged with various parts of the products, informing future design and business decisions. Our systems laid the foundation for new fan features, streams and stats data that converted to Emmys for the league and a variety of other design awards.

And most importantly, for the first time in more than a decade, the NBA had full control over their product across the world.

Role: Director, Design
Team size: 8 designers

Key contributions:
Product strategy, stakeholder management, project management, requirements and scope generation, brand evolution, motion design, UX / UI design, cross-platform design systems, prototyping and eng documentation.

------

Role: Director, Design
Team size: 8 designers

Key contributions:
Product strategy, stakeholder management, project management, requirements and scope generation, brand evolution, motion design, UX / UI design, cross-platform design systems, prototyping and eng documentation.

------

Role: Director, Design
Team size: 8 designers

Key contributions:
Product strategy, stakeholder management, project management, requirements and scope generation, brand evolution, motion design, UX / UI design, cross-platform design systems, prototyping and eng documentation.

Frame 98
Frame 93
Frame 99
Frame 100

NBA TV Apps

The TV platform allowed us to scale our app design system to 10 foot UI and account for a variety of devices and hardware limitations. An elevated and graceful tvOS experience was immediately offset by a simplistic and limited Roku device, so even within a single platform we had to consider a variety of implications.

Our team had never designed for this platform before, so our first initiative was to do research to educate ourselves. Speaking with other designers who had done this type of work before, reading articles, competitive audits and chatting with engineers were some of the ways we got ourselves up to speed. At the same time as Design was learning how to navigate this new platform, we taught the Product team. Together we asked questions, connected the dots and started to realize the limitations ahead of us.

Once we had enough of a grasp on how to start, we began by working hand-in-hand with Product to define the architecture, launch features, the necessary content and areas of improvement. With some design team members remote across the world, and not everyone having access to the right devices or various living room conditions, we found a way to share, test and critique one another’s work through screenshares and video calls. We designed right on TVs and moved them around rooms to different lighting conditions to stress test our visual system and motion language.

Over the span of 2 months we composed the entirety of the TV platform for tvOS, Android, Roku, Samsung, Xbox and Playstation. It became my favorite platform to design on.

Frame 101
Frame 105
Frame 104

NBA.com

Finally, the web platform was our largest undertaking involving hundreds of screens, 3 technology platforms and dozens of stakeholders. A series of major business changes in 2019 prompted an overhaul of the league’s core domestic products in 2020, unifying the league globally. Given the scale and success of our international product work, we took over the US products and merged them all into a singular system—–both design and tech––that built on what we had already done.

We began our project with a series of working sessions including everyone from associates to SVPs across product, engineering, content, marketing, ad sales, basketball operations, advanced stats and affiliate leagues. We constructed the architecture and technology expectations across whiteboards and hundreds of post-its. Product, design and content paper prototyped concepts for pages as well as priorities for storytelling and personalization.

Our 8 person design team split into 2 to break down and then rebuild the system of the US products. We worked hand-in-hand with Product to define scope and requirements, composed wires, prototypes and extended the visual design system from app and TV. Over the course of 5.5 months both design teams worked in parallel with one another to divide and conquer web, then moved back to our app and TV systems for domestic improvements.

It was the largest undertaking of my career, to that point, and one that also changed the league for the better.

Frame 106
Frame 107

More Projects

© 2023 CASSIE MATIAS

© 2023 CASSIE MATIAS

© 2023 CASSIE MATIAS

© 2023 CASSIE MATIAS

© 2023 CASSIE MATIAS

cassiematias@gmail.com

cassiematias@gmail.com

cassiematias@gmail.com

cassiematias@gmail.com

cassiematias@gmail.com