KELLOGG'S MARVEL'S CAPTAIN AMERICA: CIVIL WAR VR

  • Role: System / Level / UX Design

  • Genre: VR Action On-Rail Shooter

  • Engine: Unity

  • Developer: Bully! Entertainment

  • Client: Kellogg's / Marvel

  • Total Dev Time: 2015 - 2016; 6-7 months

  • Download: Android / iOS

This project is a Mobile Google Cardboard VR tie-in for Marvel's Captain America: Civil War. Players take on the role of Captain America, Iron Man, and Black Panther through different scenes of the film in an on-rails-shooter style of action game play. In a cross promotion with Kellogg's, players can unlock special features and extra goodies by scanning various Kellogg's products. 

TASKS / RESPONSIBILITIES

  • Authoring GDDs, priority lists, and asset lists.

  • Creating client-facing presentations and project updates.

  • Managing and adapting project scope throughout the project's life.

  • Wireframe all menus and other UI.

  • Writing copy for all UI and menu elements.

  • Sketches and white boxes of Level Design of each level on a macro and micro scale.

  • Content design of enemy waves; timing, quantity, and variety.

  • Designing the combat mechanics for each character, enemy behaviors and varieties, traversal mechanics, and boss fights.

  • Designing the tutorial and FTUE.

  • Orchestrating and documenting player testing.

CREATING A MENU FOR GAZE BASED INPUT

The single most prevalent problem that I had to solve about this game was that the user didn't have a single button to interact with anything, as the platform was Google Cardboard / Mobile VR. The only way the user had to interact with anything was by looking at objects for a certain amount of time. Our audience also complicated the matter, as the game was primarily going to be discovered from grocery store products, so absolutely anyone could download it, and this was back when VR was beginning to kick off so I had to assume that every user had no experience with VR what-so-ever.

So when it came to making a navigable menu I ran into an interesting problem; All the buttons require the user to stare at it for a certain amount of time to 'click' it but the user has to literally look at it to read what it is and read the context around the button. Conventional menus are not designed with this in mind, you are free to look at and read every aspect of their content without causing a change to where in that navigational structure you are, so I had to invent an entirely new system to solve this problem. (I could have just made a traditional menu and made users deal with it but like how is that a great introduction to VR?)

Furthermore a traditional menu structure could allow for a user to unintentionally navigate to pages that are costly to backtrack through, as bringing up a whole new window or page is itself cognitively expensive and you don't have any idea what is "safe" to look at until you look at it. This idea of visual "safe" space became the driving force behind my new menu design.  It needed to provide a visual safe space with a low cognitive cost for navigating that space, both forward and backward. 

The solution that ended up working was a kind of radial menu with expanding tabs centered around each button and each tab. The next window or page would expand out from the initial selected button and have other buttons navigating forward from that page around the edges. The user has to read through the panels before they can even perceive their buttons, so they receive the context for those buttons, all the while the other UI elements from the previous pages stay visible so that navigating backward is as low cost as possible. To close the menu completely all you have to do is look away from it or open up another. 

In this way the user is creating safe spaces to observe information with a very low risk cognitive cost, with each button choice simply expanding the safe spaces they can observe without losing access to other parts of the menu. Making sure each button had a progress bar to show you were opening it was also incredibly important as we expected to have users that really didn't have any experience with video game UIs. Overall I ended up with a system that made it incredibly easy for anyone to access the game and start having fun. 

DESIGN SAMPLES

UX 1

UX 2

LEVEL