NBA Fantasy Suite VR

Duration

Nov 2016
(1.5 weeks)

Team

Brian Nguyen

My Role

Visual Design
Interaction Design
Prototyping

Tools

Unity 3D
HTC Vive

Overview

For many who enjoy playing fantasy sports, it can be tedious to constantly switch between games to check scores while also paying attention to how your team is doing. I prototyped the NBA Fantasy Suite VR to imagine what the viewing experience could be like in immersive space. In VR, one can watch games, check scores, and monitor their fantasy stats in one holistic experience.

Design Challenge

How might we improve the fantasy sports experience in immersive space?

Solution

The NBA Fantasy Suite VR improves the sports watching experience by leveraging the advantages of 3D space for viewing games. Dynamic panels that are placed in a 180° panel allow the user to quickly see all of the information that is relevant to them in the fantasy sports experience. In addition to being able to toggle between games of the day quickly, the user is able to access the stats of their fantasy teams as well.


Design Considerations

Angled Panels Reduce Parallax

Information and games are viewed on flat panels to preserve how users receive information in their current interactions. While the large menu panels are curved to increase immersive interaction, statistics and games are viewed on smaller panels to make it easy for the user to visually jump between each panel. The angle of the panels reduces parallax and allows the users to have a direct line of sight to the information they are receiving.

180° Viewing Area

To minimize user rotation, all content is displayed in a 180° area in front of the user. This gets rid of the need to turn around in order to access information. By reducing excessive movements of the body, NBA Fantasy Suite VR promotes a more relaxed viewing experience.

Curved UI

In the large panels of the UI, there is a slight curvature to maintain the immersive feeling of being "surrounded" by the viewing experience. This curvature is not applied to the smaller game and statistics panels because applying curvature on a small scale would not contribute to having the panels "surround" the user.

Ideation

I began ideation by sketching out the concept of the immersive space in conjunction with the curved UI.

Prototyping

Arranging the Space

Expanding upon my ideation, I began prototyping in Unity by placing elements within an enclosed space to emphasize the immersive effect of the suite. The rationale for placing the elements within an enclosed space over placing the elements in open space was to give the user the feeling of control over all of the elements of the space. Without including boundaries, the vastness of infinite space could be disorienting to the sports viewing experience.

Bird's eye view of the viewing arrangement.

Games Panel

The games panel is displayed on the left hand side and dynamically updates to display what games are being played for the day. The default view shows a maximum of 4 games which can be scrolled through by pressing right on the left trackpad. While more than 4 games may occur within a day, it is unlikely that more than 4 games are being played concurrently. The design accounts for this by placing games that are currently being played first with upcoming games after the games that are live.

Menu Panel

The menu panel is displayed on the right hand side and activates the statistics panels. Where the game panels are arranged in a 2x2 formation to leave space for both team logos, the menu panel options do not need to display as much visual content.

Comparing Player Data

In the Player Data menu selection, the user is able to select up to 5 players and have a head to head comparison of a selected statistic. These statistics are Points, Rebounds, Assists, Steals, and Blocks. This is particularly useful  in fantasy sports where comparing players to make trades with other teams or adding players from the waiver wire is very common.

Bar graph of a five player comparison in Points Per Game.

The database implemented for the design is a SQLite database. After a query is made on the database for the five players and the selected statistic, each bar scales to represent a value. The bars can be toggled to represent one of two options:

  1. A bar value that is a raw value of the selected statistic.
  2. A bar length that is relative to all other bars in the graph, with the highest player in the comparison having a bar of maximum size.