NBA —
Redesign + Product Ecosystem

The National Basketball Association is a beloved American institution — as well as one enjoyed around the world.

With international audiences consuming more and more basketball content each year, the NBA looked to focus their efforts on this market - delivering the quality of content and experience usually reserved for domestic audiences.

Our challenge: Create parity between different platforms (iOs, Android, Web) and serve a whole new international audience.

Role
ACD at Ready Set Rocket

Platform
iOs, Android, Web

Timeline
10 months

Team
CD, Account Manager, Product Manager, 3 Product Designers, 5-6 Developers (Poland)

Goals & Strategy
Understanding our "why"

The challenge the NBA brought to us was a longstanding one: how we lessen the disparity between the quality of digital experiences offered to domestic vs. international markets? 

Even with the domestic offerings being superior, they still were not performing well enough to drive subscriptions to NBA League Pass (their premium monthly subscription service).

Unify the system
In doing an audit of all the domestic and international digital apps (mobile and web), we found huge inconsistencies in functionality and experience. Our plan was to create as much parity as possible; one holistic system to work across all devices. 

Create a sense of personalization
Our competitive analysis of other sports apps showed us one big thing the NBA was missing: highly-personalized content for each user through a selection of favorite teams and players. Let's use this opportunity to overhaul the information architecture and focus on curating more personalized content. 

Make premium content worth it
Finally, we had to find a way to entice users to subscribe to NBA League Pass. While the answer was unclear early on, we knew it involved building natural entry points across all digital channels. 

User Experience & Design
Crafting a holistic approach

We took a platform-agnostic approach from the start — borrowing elements from other NBA channels to create a unified style guide that works across platforms.  At the same time, we made sure to acknowledge and prioritize all native patterns and interactions.

img-sketches-1
nba-styleguide

GOOGLE MATERIAL DESIGN GUIDELINES 

Android

Android

nba-itl-android

APPLE HUMAN INTERFACE GUIDELINES

iPhone

iPhone

nba-itl-iphone

DESKTOP AND MOBILE BREAKPOINTS

Responsive Web

Responsive Web

nba-itl-web
img-devices

Design unification

All designs were carefully crafted as part of a unified ecosystem of digtial products. As such, the vast majority of layouts and design patterns are platform-agnostic and designed responsively - allowing them to remain as consistent as possible across all app and web platforms.

Design unification
All designs were carefully crafted as part of a unified ecosystem of digtial products. As such, the vast majority of layouts and design patterns are platform-agnostic and designed responsively - allowing them to remain as consistent as possible across all app and web platforms.

img-phones

Personalization

One thing we noticed in our early competitive audit was how other sports apps allowed for personalization. We kept this common paradigm and added another layer of customization through curated notifications. 


Personalization
One thing we noticed in our early competitive audit was how other sports apps allowed for personalization. We kept this common paradigm and added another layer of customization through curated notifications. 

img-tablet

Streaming content to premium memberships

We strategically placed entry points to upgrade to NBA League Pass throughout the system. Furthermore, we worked with the client to allow a small amount of free streaming content to be offered to the general public.

After a certain number of plays have accumulated, we would ask them to subscribe to NBA League Pass. This lets our users experience a trial period of premium content. 


Streaming content to premium memberships

We strategically placed entry points to upgrade to NBA League Pass throughout the system. Furthermore, we worked with the client to allow a small amount of free streaming content to be offered to the general public.

After a certain number of plays has accumulated, we would ask them to subscribe to NBA League Pass. This let our users experience a trial period of premium content. 

Results and Metrics
How our ideas performed in the wild

After 6 months in-market, we checked met with the NBA to evaluate the results:

We saw downloads in both the App Store and Google Play increased by roughly 25% in the first 6 months, a stark difference from just 12 months prior. As of this post, the Google Play Store has it rated at 4.4 out of 5 with 131k downloads, while the App Store has 2.5k downloads.

During the playoffs in 2017, in-app League Pass subscriptions increased 15% percent than in 2016 - translating into revenue that the NBA wasn't seeing prior. 

Our redesign of the international offerings was so successful, that the internal domestic design team relied on it heavily for the 2018 refresh of their suite of apps. This only helps create even more consistency. 

CONCLUSION + NEXT STEPS

This was one of the agency's largest projects in 2018 and was a great deep-dive into platform best practices, visual design systems, and of course basketball. 


This was one of the agency's largest projects in 2018, and was a great deep-dive into platform best practices, visual design systems, and of course basketball. 

For the next iteration, I would love to see: 

User testing/usability studies
While we held some informal tests within the agency, I would have loved to have our hypotheses validated by some users. 

For the next iteration, I would love to see: 

User testing / usability studies
While we held some informal tests within the agency, I would have loved to have our hypotheses validated by some users. 

Stronger prototyping / QA
Due to the nature of this project, my team's deliverables included an annotations guide for overseas developers - and therefore we weren't present to do any prototyping or QA for our platforms.

Stronger prototyping / QA
Due to the nature of this project, my teams deliverables included an annotations guide for overseas developers - and therefore we weren't present to do any prototyping or QA for our platforms.

Äbeer Khalique 

Product design and creative strategy 
Based in New York City.