NBA App. An obsession.
ob·ses·sion
noun • an idea or thought that continually preoccupies or intrudes on a person’s mind.
People no longer ask me what I do in my spare time. You need only inquire once and you have all the information you need to answer similar queries.
I often overhear colleagues regaling one another with stories of parties, skiing trips to Tahoe or landing a table at the latest restaurant, located in the coolest part of the city, where much joy and frivolity was had by all. Most of the stories sound pretty damn fun, to be honest but, being lazy, in my forties and married with children, my answer to the post-weekend question is invariably, ‘I watched basketball’.
The thing is, I’ve only been watching basketball for four years. Before that, I was living in Staines, England and would have had no clue who LeBron James was, let alone Steph Curry. Since moving to San Francisco, I have become obsessed. Obviously, I’m not unique in this — far from it. Many people I know watch a lot of basketball but they also seem to have social lives and therefore miss many of the games that my family and I switch between, every night of the week, throughout the season.
I’m an NBA League Pass subscriber. I am more than happy to hand over $200 a year to have access to most of the games. I pay Xfinity (which is, frankly, extortion) to access the blackout games, in order to watch my beloved Warriors.
The reason I am telling you this (and I‘m amazed you’ve got this far) is because, as a League Pass subscriber, I have to use the NBA app… I mean, I think there is some way of adding the League Pass to your Xfinity subscription but that would require me to speak to Xfinity or visit one of their stores — I’m not going to do that. Even then, I’d still need to interact with the app to watch games on-the-go and be able to access all the stats I want. Of course there are other apps for stats, but I want to have it all in one place. I don’t want to have to flit about, between multiple apps, to find the information I want.
I use the NBA app every day, without fail. My wife and sons use the NBA app every day, without fail. Because of this, I obsess. I see things that annoy me. I hunt for stats that I find fascinating but struggle to parse. I see multiple examples of the same component, styled differently, with varying scanning orders and hierarchies, making it a struggle to digest the content. I have to think about who is playing whom when I look at the game cards because my brain won’t parse the vertical layout…
I know, I know… I need to relax, but these are the things that can ruin an experience. If you think of your favorite apps, nine times out of ten, the content is what you enjoy — the design gets out of the way.
Using the NBA app is very much a love / hate relationship. It isn’t all bad. I can see that they are trying to innovate. It is clear that they want to keep the app fresh and cater to the diverse group of users and the evolving season calendar. However, there are parts of the app that leave a lot to be desired. Over the past few years, the app developers have released changes that have resulted in regressions in the experience; it is also common for features to be added, mid-season, that feel like they have been crowbarred in at the last minute.
I’ve always been fascinated in how functionality evolves within an app ecosystem. As a designer that has worked on many projects, in different companies - using varying methodologies and technologies - I notice when things change and where experiences suffer. Don’t get me wrong, I’m not saying I’m better at this than anyone. I’m not! In fact, I have, in the past, been the cause of legacy and lack of consistency. That said, I am always trying to learn from my mistakes.
I thought about doing a teardown of the NBA app, channeling the brilliant Samual Hulick, but I’d never do it justice. Being a designer, I know what it is like to have someone pull your designs apart. Everyone has an opinion, but very few will actually take the time to suggest something better. Quite often, this is because of the scale of the problem or the lack of context as to why something was designed in such a way. The constraints the team faced are often an unknown — whether a minimum viable product was shipped vs the ideal experience. There are so many product features out in the wild that are not the ideal experience but a compromise the team had to make.
Having experienced multiple iterations, updates and regressions in functionality of the NBA app, I thought I’d see if I could apply my experience as a designer and my empathy as a customer (along with that of my family), and try to redesign the app. Wow! Groundbreaking, I hear you say. I know… but I didn’t just want to re-skin it; I wanted to try and create a robust, consistent and scalable design system that could be used across the product ecosystem — starting with the app.
I’m not going to post every iteration of every sketch and screen within this article so here is a link to a public InVision that has most of the process and final screens. This is best viewed on a desktop as inVision apparently doesn’t play nice on mobile devices.
Principles
When considering how to approach this project, I thought about the areas I really wanted to cover. There were three key aspects.
1. Consistency
One of the main gripes I have with the app is the inconsistency. As I have alluded to above, the multiple variations of elements within the app means I often have to remember how each section is structured and re-learn what to do in order to get what I want from a feature. This brings me to the second area…
2. Predictability
Well designed experiences adhere to an underlying system and structure that is consistent. When done well, that system brings with it predictability. Whether it be a typographic baseline that is imperceptible to a user, providing a predictable scanning distance in the content, or a type scale that helps give clear hierarchy. Being predicable in laying out content, especially where stat data is concerned, is essential in order for it to be easily digestible.
3. Reusability
When dealing with a design system, this one should be a given. The reusable aspect is what allows both consistency and predictability to thrive. When, for example, there are multiple versions of a component in an experience, all effectively doing the same thing, but treated slightly differently, a user’s trust immediately diminishes. Quality is questioned and brand perception suffers. This is not to be taken lightly. Whether consciously or not, these small details are often the reason a user abandons an app and downloads an alternative.
These three aspects are part of a whole that, if done well, should help to deliver a cohesive experience that is both intuitive and enjoyable to use.
Process
As with most projects that are 1:1 (replacing what already exists), my process generally starts with an audit of existing functionality. This allows me to get a clear understanding of what I am dealing with— features, content, patterns, interactions and foundational elements (color palette, type scale, etc).
Having completed an audit, I collated the screenshots and added notes to the areas that I wanted to improve or questions I wanted to answer. I then tackled each of the primary areas of the app, screen by screen, trying to systemize elements so they were re-usable and being cognizant of where they were used throughout the product.
I have to say that I didn’t tackle every feature area. The reason for this is that a great many of the secondary views that live in the ‘More’ section are web views that are merely rendered from the website in to the app, providing a second-rate experience. I don’t use these and therefore decided not to tackle them.
I tend to lean heavily on native patterns, from Apple’s HIG and Google’s Material Design, as they inherently help with predictability and consistency. These systems provide ~80% of your app needs. The other 20% is what makes the app yours.
A liberty I took was in the removal of the multi-ads. In fact, I stripped the ads entirely from the majority of the screens and only gave an example of how a single ad unit could be incorporated if, for example, the user was not a League Pass Subscriber. As a LPS, I don’t feel I should be presented with ads that degrade my experience. I have thus far had no interest in the units displayed and therefore would prefer if they were removed. Again, this is a liberty I am able to take as I’m designing the app to how I would like to experience it. I’m not naive enough to believe that the ads don’t generate revenue, but I do know that they can ‘cheapen’ experiences and have a detrimental effect on brand perception. Some brands do ads incredibly well that are, for example, hyper-personalized or integrated elegantly in to an experience. However, if ad impressions are rated higher than quality of experience, the product invariably suffers, as is the case with the NBA app.
A nice-to-have that I had on my list was a Night Mode. This was because I wanted to try theming the design system and because I often use the app in bed to check scores, read news and see what games are coming up. The theming allowed me to hone a palette that I could easily swap between Light and Night versions, but also helped me be more methodical when it came to the visual design.
I removed the My Games functionality. I personally don’t use it and, in researching the feature, I found that it caused confusion with the calendar. This ad and feature cull helped reduce the vertical space and allowed me to focus on the content.
The Scores Tab
The Scores tab is my go-to for upcoming games and the view I use the most. As this is the entry point of the app, there is a lot to talk about, but rather than get bogged down on the use of ads, the page structure, the double nav on Android or ever-changing calls to action, for now, I’m just going to focus on the game cards.
Game Cards
I really struggle with the current, vertical layout of the game card (below, left). In my research, I found that many other sports apps and sites use the same format and therefore assume that substantial testing has gone in to this design decision. However, earlier versions of the app (on my Nexus 5, for example — below, right), used a horizontal layout that made it easier to parse game information. For example, in the case below, at the top of the right screen, I can quickly discern that the Bucks are playing the Pistons in Detroit— ‘Bucks at Pistons’. My youngest son, (who has dyslexia) struggles with the information density of the existing vertical card (below, left) but is quickly able to scan the horizontal variant.
In the vertical card example, multiple reading orders and three, equally weighted, calls to action add noise and prevent me from being able to quickly scan the data. Although not ideal, I find the layout and simplicity of the horizontal card far quicker to scan.
The visual noise and scanning order of the vertical card is exacerbated further on tablet, making it very difficult to use.
Having explored, iterated on and worked through the potential states of the game card (Pregame, Live Game, Hidden Scores and Post Game) I systemized them and produced both vertical and horizontal variants. I tested them with my family and the horizontal version was the clear winner.
I accept that four people is hardly a valid sample size so, until properly validated, I have to assume that the vertical structure, being so prevalent in other apps, is preferred. That said, a setting for user preference would be ideal.
New Design — Games Tab (formerly known as ‘Scores’)
You may have noticed that I have removed the triple call to action buttons (Watch, Listen & Tickets) from each card. I’m not going to go in to the fact that, in the existing app, these CTAs change over the lifecycle of a game, confusing the user. However, I understand the CTAs meant a user could deep link, straight in to a game’s audio or video. Personally, I have always tapped in to a game and selected streams from there. I’m not sure if this is just habit or because I prefer the context-setting. Either way, the removal of the CTAs cleared a great deal of the visual noise and allowed me to explore alternative interactions that could be used to trigger the deep links.
Game Views
With so much data buried under each Game Card, I often dig into stats during the game. This is when I really need the app to be consistent in its presentation. The fact is that the current game views in the app are not consistent at all. They are hard to navigate and there are no constants in the experiences. Type sizes vary dramatically and hierarchy is unclear.
I attempted to systemize each of the elements throughout the Game views and re-use components where possible. I won’t add all the screens — again, they are available to click through, here.
I wanted to keep the scale of each element similarly weighted to ensure that, when re-used, they were able to sit comfortably alongside other content. I also wanted to be able to re-use a lot of the components I had systemized in the Articles, Videos, Standings, Teams and Players sections.
Top Stories & Videos
When looking at the audit of the existing ‘Top Stories’ and ‘Videos’ tabs, the inconsistency was stark. The promos (components that showcase the stories and videos of the day) effectively did the same thing in both sections but were treated differently throughout the app. This inconsistency meant that I was constantly asking why they were so different.
At first, I was unsure whether to merge the two sections but I realized that I like to consume the two types of content differently. If looking for a particular video, I’d rather not hunt for it in the Top Stories section (even though some of the Top Stories in the existing app are, in fact, videos…). That said, I wanted to fundamentally simplify these two sections and design one set of components in order to give a predictable experience across both, as well as allow for reusability throughout the app.
After some exploration, I designed four types of promo that could produce flexible, editorial layouts and scale across phone and tablet. After considering all the potential data points that could exist for each promo, I systemized the four types —
Epic
This is the primary focus of the view, showcasing the top story or video. As with all the variations, this component needed to be flexible to allow for multiple layouts and therefore needed to work in both a horizontal and stacked format.
Standard, Callout and Concise
These vary in size and, when used with Epic, allow for multiple layouts that enable producers to play with the focus of the day’s content. This, in turn, keeps the app feeling fresh. You can also see above that Videos are able to use the same set of components as Articles. Other examples can be found here.
Standings (Data Tables)
The purpose of these tables is to convey a high density of information in an extremely efficient manner. Getting that right is an entirely different article, but there are a few things I’d do differently to help improve consistency and make the tables more approachable.
The fact is, the horizontally scrolling tables are easy to digest and save a lot of room. My problem, and I’m going to sound like a broken record, is that they aren’t used consistently in the existing app. The Player data, for example, has a very different layout to the Team data. As far as I can tell, there is no reason for this but it certainly makes it more difficult to consume. Similarly, the Standings table differs to the Box Score table, even though they should be treated in the same way. The reason can only be that they were designed and built at different times by different teams.
Systemizing these tables was relatively simple, when retaining the scrollable functionality, and meant the experience was consistent and predictable across views, where tables were required.
In the example of the Standings data table, my son had me explore a way of collapsing the wide left column that took up too much space for the horizontal scroll. He suggested that, when you scroll, you don’t need to see the name of the team as the logo can persist.
New Designs— Table Examples
What now…?
I know that was a lot and you probably have more questions than answers… I apologize. It has been a fun process, even though at times it felt like I had two jobs. I still have a lot more I want to tackle — Motion and sound design in the form of an end-to-end prototype experience, for example. Or the tablet versions I neglected to finish. Hopefully, I will get to these soon.
Again, you can access ~200 screens in the (desktop friendly) InVision. If you are as passionate about the NBA as I am, you will understand my obsession. I really want to use the NBA app, but I want to enjoy using it. I don’t want it to feel like a chore. I’m not saying my designs are perfect, by any means. I do hope, however, that they spark some ideas in how to approach the next iteration.
I’ll be continuing work on this and will post subsequent mocks and prototypes to the InVision and on Dribbble.
Thanks
Finally, I wanted to thank my sons. I know this sounds cheesy… however, they helped so much and came up with some great ideas that were incorporated, so I wanted to acknowledge their help. Thanks boys 😘.
— Opinions are my own and not the views of my employer.
