Material Design Exploration: NBA for Android
If the online design community is any indicator, we can undeniably get a feel of a love/hate relationship with Material Design. This could be due to a general sense of failed promises, lack of consistency across Google’s very own products or fragmented adoption of latest Android OS.
Whichever the case, I personally found myself divided on the subject. While I did find Material Design inspiring from a visual perspective, I also found the UX lacking in some instances.
With that in mind, I needed a hand-on experience (re)designing an app using the official guidelines in order to shape a more informed opinion on the matter.
Overview
This is an exercise centered purely on the visual aspect of the official NBA app for Android. The reason for that is simple:
I’m obviously unaffiliated to the NBA in any way — I cannot be certain of the repercussions that even the most minor of tweaks can have on usability for a global user base. I therefore assumed the exact same data points throughout the app despite the clear temptations to reduce clutter at times.
My objective was to test whether an app as complex as this one (in terms of variety of data visualization) could be significantly upgraded through visuals only.
In other words: I wanted to assess whether developers looking for visual improvements could easily adapt their existing Android products to the Material Design guidelines.
In this post, I will first walk you through the static redesign all while explaining my reasoning behind those decisions, to then conclude with a video representing the dynamic interactions of the concept.
Visual Identity
If there’s one big positive with Material Design that I need to point out, it’s the extensive documentation that Google provides to designers. This helps us design with the required visual consistency across all sections of a product, without necessarily going through complete redesigns.
My first step in this exercise was therefore to define that visual continuity, starting with the colors and icons:
As you can see, I opted for filled vs. hollow icons to make things more in line with the Material guidelines as opposed to iOS. This is also because of my personal opinion that with respect to navigation drawers specifically (overload of options) — Filled icons usually require less cognitive work.
Adding to that a lighter background of white vs. dark blue, this decision was a personal no-brainer.
As for colors, I’ve tried multiple options to finally decide on the most vibrant mix to ensure the enhancement of the NBA brand. For instance, going for a lighter red as shown in the left option didn’t work well when contrasted with the other shades of blue (light or dark), in the sense that it looked more “orange” than red.
Latest
The opening screen of the Android version is the “Latest” section of the app, representing the latest headlines. Users also have access to “Trending” and “News” displayed separately in different tabs.
I personally find this annoying considering the fact that those 3 mentioned sections actually display information in the same format: Videos or Articles.
I therefore went for the more vigorous approach of combining them into the “Latest” section for a more simplified navigation — Also taking visual cues from the iOS version that adopts this approach.
A common pattern I adopted throughout the design is the use of cards for displaying content:
A card collection is coplanar, or a layout of cards on the same plane. Cards are a convenient means of displaying content composed of different elements. They provide context and an entry point to more robust information and views, and their content and quantity can vary greatly.
I also took the liberty of adding the discreet action of sharing on cards depending on the context. You’ll notice this action is absent from the “Trending” section.
The reasoning behind that is that unlike “Headlines” and “News” where cards act as containers for more information within the native app; clicking on any content within “Trending” redirects users to the NBA website on both iOS and Android.
Games
The Games section of the app typically displays daily results, with each result representing an entry point for more detailed information about the game in question.
Curiously enough, the CTA on the current version (Watch and Highlights) lead users to the same game information page. I therefore decided to entirely remove them and stick to the whole card as the game container.
I also needed to considerably adjust the calendar view to make it more usable by removing the need for endless vertical scrolling within a dialog.
I finally attempted to make the game info section visually more consistent with the previously defined color schemes, in addition to opting for a list view instead of cards:
A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn’t have many actions.
Videos
The Videos section is meant for users to quickly access homogeneous content in a specific hub within the app, either by scrolling or searching.
I again opted for the use of cards and adjusted the menu view to fit the Material guidelines:
Stats & Players
The Stats section represented a minor challenge in the way it is currently designed:
Unlike iOS, on Android, swiping horizontally within a tab must switch tabs — it’s a key expected behavior. Outside of tabs, swipe is often for carousels or to dismiss elements from a collection, such as removing an item from a list. It’s uncommon to offer horizontal scrolling on Android; snapping to page boundaries is more common.
While the current design doesn’t necessarily go against traditional Android interface rules, I found the double use of tabs unnecessary. I therefore switched back the “Daily” and “Season” options to a more traditional menu:
In that particular view, cards again act as containers for more robust information — Player Details in this case:
While there’s nothing relevant in terms of redesign here, I’d just like to point out the following: I was tempted at one point to opt for more pronounced color filters for the cover picture, that would emphasize the specific team branding of players.
However, I quickly came back to my senses and realized that it would run the common risk of clashing with the players’ jerseys colors, which already act as subtle hints to a team’s identity.
Teams
The Teams section provides users with a quick overview of the latest information surrounding their favorite rosters. Again, I had to assume the exact same data entries before jumping into the redesign, despite my temptation to have a more minimalistic interpretation.
I found that the Videos and Rosters sections didn’t need much facelift, and therefore restricted myself to only making them more consistent with the rest of the design.
The Schedule tab however was problematic in a visual sense. Small font sizes, clutter of information and counterintuitive navigation contributed to that.
Despite my best attempts at keeping it as a tab, I ultimately went for the simpler option of making it accessible in a new page.
Standings
The final screen I worked on was the Standings section, for which I only proceeded by adjusting the overall visuals clarity.
Interactions/Animations
Material Design is also about beautiful animations that reinforce user behaviors. It was without a doubt a fun experience to prototype the main interactions of the design to get a better feel of the in-app interactions.
I made the following video to better communicate the whole concept:
Main Takeaways
As a final note, a guide is simply a guide, not the undisputed rule. Material Design being easily adaptable, my personal belief is that it’s only a matter of time before it gains mainstream adoption with developers on Android.
We’re also already seeing some of the Material Design characteristics being applied on iOS and other non-app areas, mainly because of its bold visuals and adaptive layouts.
For a design framework relatively early in its infancy, us designers are bound to eventually deviate a bit from the guidelines by giving ourselves more flexibility — The same way it has happened with iOS over the years.
Finally, we’ve even started to witness overall UX improvements such as the recently introduced bottom-bar navigation to the official guidelines.
Disclaimer: I do not wok for or represent the NBA. I’m just a product designer who enjoys tackling new challenges. I’d love to hear your feedback in case I missed some ideas, as I’m sure I have.
If you like what you just read, please recommend 💚 this post so that others might stumble upon it. To see more of my work, you can go on edsab.com
