NBA Storefront

Design Brief

The product team was tasked with migrating the payment system for NBA.com to a new payment processor by start of season, October 2019. This presented a fantastic opportunity for us to redesign the purchase flow experience that would handle all web purchases for our streaming video products as well as a new system for users to manage their subscriptions.

The main project goals from the start were to:

• Get users through the purchase flow as efficiently as possible to increase conversion rates

• Provide NBA League Pass subscribers with access to all the information they need to manage their subscription

• Clean up confusion around account and subscription by using consistent presentation and language around these items across the ecosystem

• Hit our business pillars of acquisition, engagement and retention

We collaborated with over ten teams across WarnerMedia for this effort. Throughout this project, we worked closely with the customer service manager on our team to tackle customer service issues from the previous system head on. Through this effort, on the first weekend of sales we were able to reduce the amount of customer service tickets by 47% as compared to the previous year. Additionally, throughout the duration of the season, League Pass subscriptions increased 12% year over or year, and once customers were in the purchase flow, the purchase conversion rate increased by 13% over the previous year.

Analysis Phase

Before we could select a vendor, the team needed to take a look at our current system to understand where we were and where we wanted to go. I began this process by documenting all of our current payment and subscription screens and laying them out in user flows. The team assessed our current flows to identify places we could improve.

Also during this time, I conducted a competitive analysis of our competitors as well as other ecommerce sites to bring back to the team. We had a short list of possible vendors we would be talking to, so I focused much of my analysis on sites that were powered by the vendors so we could interact with their capabilities in the wild.

This concluded with a team working session lead by me where we brainstormed ideas of what this purchase flow and subscription management system could be. We assessed what features were must-haves, should-haves, could-haves and what was out of scope for this phase. This helped us to enter into a vendor selection with a clear idea of what capabilities we would need.

Work Breakdown

After vendor selection was complete, I partnered with the head of NBA Digital’s Technical Operations team to host a work breakdown session. The timeline for our release was very short. Because the work of migrating users from the old payment processor to the new one would be a lengthy process, we needed to break down the UX work into phases with the help of the engineering team. This session helped to open up the communication lines between the web development team and the product team, so we were aligned heading into the UX and design work streams.

While the process was a blended agile / waterfall process, it was a change in how the teams had been working together previously where UX and design work was handed off all at once. This project was a step forward in changing the hand off process between UX, design and engineering toward a more agile process.

User Research

Throughout the length of this project, I worked with our UX researcher on five separate tests that covered various parts of the Storefront system. All of the research was completed through remote unmoderated sessions conducted and analyzed by the researcher.

Through these studies, we were able to make changes to the blackout messaging in the purchase flow to ensure user comprehension. Additionally, we confirmed user understanding of the purchase path on desktop and mobile as well as understanding of the subscription management flows.

The team also tested an idea for purchasing on mobile web that was not received well by users, and because we were able to test it ahead of time, we were able to avoid building something that was confusing to our users.

Churn Prevention - Blackout Messaging

One of the key aspects of the design was a focus on churn prevention. Prior to the start of this project, the NBA Digital research team had conducted a three month-long diary study with NBA League Pass subscriptions focused on why new subscribers churn in the first few months of their subscription. This diary study was an asset to this project as it became apparent from the findings that much of the churn was starting during the purchase flow.

From this research, I was able to identify local and national blackouts as major factors in churn and a huge opportunity for improvement in our sales flow. While the old purchase flow did indicate which teams were blacked out to users, it was not noticed or understood by users which lead to users feeling surprised when a game they wanted to watch was blacked out. National blackouts were especially difficult to communicate as they were not mentioned at all in the purchase flow. In the new purchase flow, the blackout notice is very apparent throughout the process, and while it does add length to the page, after testing this flow, users indicated that they understood the blackout messaging and felt that the flow was transparent and honest.

Churn Prevention - Post-Purchase Messaging

The diary study also indicated that users did not understand how to use NBA League Pass on multiple devices after purchase, especially for users who purchased in one app store and wanted to watch on another platform. To help this, we added onboarding to the end of the purchase path to help users learn how to use their subscription. The product manager and I partnered with the Product Marketing team to align their after-purchase email messaging with the instructions provided at the end of the purchase flow for a consistent experience.

In addition to these churn prevention tactics, the new subscription management system allows users to upgrade, downgrade or change their selected team on their single team subscription. The goal was to provide more flexibility for users to prevent them from cancelling completely if their team’s games were affected by blackouts or cost was a factor.