Material Design exploration: NBA scores

The idea

Sketches and screens

Muji has this $1.95 newsprint notebook. I turn it one way to do mobile thumbnails and the other way for desktop ideas.
  • Game list
  • Game Summary
  • Play-by-play
  • Game highlight
  • Team stats

Game Selection

A look at existing solutions

NBA.com has a list view of games and ESPN.com has a grid view.

Sketch

Crazy 8s for game selection. My Mona Lisa.

Picking Material components

List, grid, and card examples from the Google Design Guidelines.

Final Screen

Game Summary

Existing solutions

Sketch

Here’s a set of hieroglyphics.

Material components: hero images and avatars

Keyline, hero image, and avatar examples from the Google Design Guidelines.

Brief digression: images for avatars

You can take the jaggies away but I’ll still have this Wizards jersey on.

Final Screen

Team Stats

Existing solutions

First iteration

Material components: tabs and list controls

Tabs and list controls from the Material Design Guidelines.

Final Screen

Left: Team stats collapsed. Right: Team stats, Chris Bosh stats expanded.

Play-by-play

Existing Solutions

A (very) early iteration

First iterations

Play-by-play iterations.
  1. In the first iteration, only scoring plays are shown, but we display time and the person who made the assist. I added a white outer circle to the player’s avatar for 3-pointers. All these iterations follow the list measurements in the Material Design guidelines. I think it feels crowded because there are tight groups of identical avatars—something you wouldn’t see in, say, a contact list.
  2. Let’s space things out. I added the non-scoring plays back in using the secondary font styling to de-emphasize them. I really like the spacing now. Without looking at the precise time, the extra space gives a sense of time passing between scores.
  3. I swapped the avatars and timestamps. As mentioned in an earlier section, the left keyline is for primary information and the right keyline is for secondary information. Who scored is more interesting than the timestamp.

Material component: snackbar

Snackbar example from the Material Design guidelines

About those iterations…

Time and scores displayed together in an NBA.com play-by-play: http://www.nba.com/games/20140615/MIASAS/gameinfo.html

Final Screen

Single Play

Material component: floating action button

Exploration one: highlight with expert conversation

Exploration two: highlight with user conversation

Some inspiration: Sports Genius and Grantland

http://sports.genius.com/Sports-genius-live-blogging-game-5-of-the-nba-finals-annotated
http://grantland.com/the-triangle/hammer-time-a-breakdown-of-san-antonios-killer-offensive-set/

Exploration three: highlight with annotation

Filler text from Grantland: http://grantland.com/features/nba-finals-preview-heat-spurs-2014/

Takeaways

Resources

--

--

--

Make things, show people, learn more things. @Google

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Francis Cortez

Francis Cortez

Make things, show people, learn more things. @Google

More from Medium

Expansion & Contraction — A realistic path for pushing UX exploration forward

How to Optimize Product Development With Use Cases: Identifying the Criteria of a Good Tool

UI/UX Articles and Interesting Tidbits of the Week

UX IRL Ep. 21 — Modified-Delphi Card Sorting

Episode 21 cover