NBA App Home Screen

Design Brief

Prior to this project, users opening the NBA app would land on the scores screen. While scores are a useful feature within the app, there was no centralized place to surface other content types that are important both for users and NBA Digital’s business priorities. This screen would also serve as a jumping off point to lead users into other sections of the app, a new way to highlight live content within the app and the foundation for a future design system for apps.

Since this screen was a net new feature, the sky was the limit. We were able to explore a wide breadth of ideas and features before narrowing our focus to the features that would be built in Version 1. This project presented an excellent opportunity as a pilot project to introduce design sprints to the organization. The UX work stream kicked off with a week-long sprint. We learned so much from this sprint and developed new ways of working for future projects.

One of the biggest challenges for this project was the number of stakeholders involved. Meeting the needs of all stakeholders, some of whom had competing needs, presented a large challenge. Involved teams included product, UX, design, ad sales, marketing, editorial, streaming video, engineering, analytics, dev ops and our partners at the League.

Design Sprint

This project was kicked off with a design sprint. Considering the size of this project, the sprint was a full five days long with a few weeks of pre-work to prepare. The primary objective for the project was to present the most relevant and compelling NBA content, story lines, games and promotions to fans via a landing screen for the NBA app on handset and tablet.

Knowing one of the sprint goals was to conduct two rounds of user testing within the sprint, I partnered with another UX architect to create a survey that we posted on WarnerMedia’s intranet to create a pool of internal users. We could pull from this pool for gut check testing. I also conducted in-depth competitive research to be presented at the sprint and collected data on our current app from the analytics team. Together with the product team, I created sprint objectives and desired deliverables which I used to create the sprint agenda.

Sprint Activities

Day 1 - Kick off and empathy mapping

We introduced the sprint and worked with the larger group on defining what success would look like. I shared the competitive research and analytics data with the smaller working group and lead an empathy mapping exercise.

Day 2 - Sketching and ideating

For the morning session I lead a design studio exercise to generate a large amount of ideas in a short amount of time. In the afternoon, the larger group joined the working group to see the ideas and dot vote on favorite directions.

Day 3 - Prototyping and initial testing

On Wednesday, the visual designers created paper prototypes while I worked on the test script. The other UX Architect and I swapped back and forth on moderating the user tests with users we found via the intranet survey.

Day 4 - Debrief and refinement

The working group spent the day debriefing and digesting the information we received from the tests. This was used to refine our designs.

Day 5 - High fidelity prototyping and testing

The design team created high fidelity versions of the refined designs. We partnered with the analytics team to test via a remote user testing site.

Initial User Research

Throughout the course of this project, we were able to test our designs five times through various methods and act on the results. The initial research efforts conducted within the sprint were:

Product Sprint - Internal panel with paper prototypes

We conducted one-on-one interviews which helped the team narrow our focus on the design direction.

Product Sprint - Remote unmoderated survey

We worked with the analytics team on a usability study to obtain general usability and content differentiation feedback on our refined high-fidelity prototype.

Additional Research

My Team personalized module - Remote unmoderated usability study

The app home screen is introducing personalized content to the app. I partnered with a user researcher to create a test plan and prototypes to select a direction for the module and general usability feedback on the options.

Live content slice - Remote unmoderated usability study

Featuring live content of NBA’s streaming brands was a high business priority. We tested the live content slice to discover if users understood it as designed. We also tested names for this section to ensure it would be labelled correctly.

App home screen name - Remote unmoderated survey

The team had a brainstorming session on possible names for this screen to help users accurately understand the page. We conducted a short survey to help us select a name for the screen.

Final Design

As a result of this design we achieved:

• 40% increase in video starts

• 40% increase in video conversions

• Increase in team follows

The result of the design sprint, research and UX work was a modular design featuring content blocks that can be added, removed and moved on the page to accommodate the many different states of the app throughout the NBA season.

I created a timeline for both a normal NBA day and for the season with wireframes to think through how content and a user’s needs change. This design was also created to begin laying the foundation for a design system for the app. As part of this project, I worked with product to create a strategy for future iterations on this screen as well as future screens and builds.

NBA Tentpoles

A key part of any design created at NBA Digital is accounting for the NBA tentpoles. There are six major tentpoles throughout the season: season preview, All Star Weekend, Playoffs, draft, free agency and Summer League.

We had limited development time for tentpoles, so the approach had to be the most efficient use of time. The approach I took to designing for tentpoles was to create modules that were flexible enough to be reused for multiple tentpoles where possible while also solving for the unique needs of each tentpole.