Box Office Champs
Fantasy Sports for Movie Fans
​
So you’re not into the sports balls—why should you be denied the fun of fantasy games?
Box Office Champs is a unique offering for that small niche of the populace that obsesses over the weekly and seasonal numbers at the box office. It’s a game where winning is not measured by touchdowns, goals or home runs, but by the millions of dollars your chosen movies earn domestically at movie theaters.
There are three primary games:
-
A quarterly “Blockbuster” game, where players choose and rank the 10 movies they believe will earn the most money over the course of the “season.”
-
A weekly “Top Five” game where the exact weekend figure of five movies must be predicted.
-
A custom “League” game where a small group of players draft exclusive rights to a movie for a set period of time of their choosing.
Journey Map
​
The journey of a Box Office Champs user can take multiple paths, depending on their specific game play interests. The following flow diagram details the journey from account creation to joining the simpler games (Top Five or Blockbuster) or delving into the more complex League play, where users can either create a brand new league or join an existing one.
​
Design System
Color, Type and Brand Identity
​
A crisp palette of two complementary colors provide contrast between emphasized objects (blue) and action elements (red). As the primary color, blue serves as the overall brand identity in the logo and logotypes, while red doubles as the main color for individual game logos.
Grid & Layout
​
Utilizing a basic 12-column grid for ultimate flexibility, the Box Office Champs page layouts accommodate both tabular content and game-play elements that can be easily scanned and digested. Rows and columns are built to wrap and stack coherently in mobile views.
Atomic Components
​​
Basic buttons, tabs, tables and form elements represent a small portion of the UI in the interface.
​
At the molecule and organism level, navigation bars, page headers and movie cards make up the majority of the interactive elements of the game pages.
Molecules and organism all adjust for clean mobile views.
Final Designs
​
Movie Cards
​
​The majority of the Box Office Champs interface and game play is populated by the “movie card”.
Each specific game has different incarnations to best suit its needs of interactivity and data representation, and furthermore each game’s movie cards have multiple stages over the course of the season.
Shown below are all stages of the Blockbuster game movie card (both desktop and mobile views), from zero state (no movie chosen) through release and on to final scoring at the end of the season (including a detailed breakdown of the math).
League Home
​
Tabular data is the focus of the League home pages, providing a snapshot of current standings, recent box office results, and upcoming releases.
Team Pages
​
Team pages display the roster of a specific team, detailing both the cumulative running score of a team as well as the individual numbers movie by movie.
Draft Board
​
Draft day is the highlight of any fantasy league. The Box Office Champs live draft board highlights the current movie that is up for bid and lists the current roster and remaining budgets of all teams participating.
