NHL 15

UX DESIGNER

Xbox One

Role: UX Designer

NHL 15 was a huge challenge, as we set out to overhaul the UX for the entire game. I was responsible for shaping that UX, refining game mechanics, interpreting feedback from user testing, and working with gameplay engineers on in-game elements.

Axure RP, Omnigraffle, Quartz Composer, Photoshop, Illustrator, Perforce, Actionscript, Lua, Pen & Paper

Thumb

DESIGN PROBLEM

NHL 15 marked the first time that the game would launch on Xbox One and Playstation 4. Because much of the underlying technology was changing, we used this as an opportunity to re-design the UX for the entire game. The key to the re-design was maintaining depth for expert user personas, while streamlining key flows and providing shortcuts for novice personas.

Information Architecture

Due to years of organic growth, the series accumulated information architecture inconsistencies. For NHL 14 we tackled the main menu; for NHL 15, the entire game was reconsidered and amounted to over 300 screens. Emphasis was put on ensuring logical taxonomies.

Prototyping

Prototyping became a key way to validate designs in high fidelity without involving specialized engineers. I employed tools like Hype and Quartz Composer to prototype animations, interactions, and screens.

Game Mechanics

The NHL series packs a lot of depth in game modes. Some game modes were not surfacing game mechanics as best they could. One of the primary goals of NHL 15’s UI development was to ensure that game mechanics were meaningful and were showcased to the user at appropriate times.

UX Testing Labs

Throughout the NHL 15 journey we engaged the services of EA’s User Experience Testing Labs to gain insight into how customers will play the game. Each game mode had at least three tests: a paper or wireframe think-aloud study, a mock-up or prototype study, and finally an in-game study either 1-on-1 or in a group session.

NHL 15's overarching concept was Hyper-Realism. Lights should have blooms and flares, skates should leave distinct marks in the ice surface, glass should have visible scratches, and player jerseys should flow in the wind. The guiding principle for the UI was Glass set in a pre-game environment. Our tile-based UI mimics the look of glass with edge-lit glows.

PLAY NOW

One of the most commonly-used flows in the game, Play Now was my first stab at aligning the game with our new tile-based UI, removing friction from clumsy interactions, streamlining the flow, and iterating based on feedback.

Play Now

UX Documentation

Early in the design process I tried a version of Play Now where users explicitly selected Home or Away sides before choosing teams, aligning us with the flow that FIFA uses and reducing ambiguity in the team selection process. Additionally, I wanted to improve the couch play experience so I designed screens relating to team settings to allow simultaneous 2-player input.

I re-worked the Play Now flow to allow both team and jersey selection at the same time, while hiding complex game settings behind one extra click from a “Game Overview” screen. This new screen shows just enough information to seem fun and useful without overwhelming new users - they can mash the Select button to get right into game.

UX Testing

The first round of testing for Play Now was done as a paper prototype with mock-ups. We had two key findings: people enjoyed explicitly choosing a side before going on to choose a team and jersey; and our first design for editing lines was causing confusion.

Early mock-up

This early design for editing lines was not kept, although a similar design was re-purposed for the Starting Lines screen where users simply choose which line will start on the ice at the beginning of the game.

Early mock-up

Users much preferred this version, which showed all members of a given type instead of showing players in a five-man unit. We put extra care into designing a quick-swap feature whereby a player can be swapped easily on the current screen from one spot to another.

Final Designs

The final designs present a streamlined flow that was suitable for both offline and online modes. The standard single player case can be button-mashed through, and complex settings are hidden behind a preview panel. Later in the development process, we modified the flow to display both 3D logos and 3D player models to accentuate the feeling of getting closer to gameplay and to reinforce Hyper-Realism.


DROPDOWNS

Halfway through the game’s development, we took a critical look at our widespread use of on-screen navigation widgets. I then set out to prototype a better solution to get buy-in and validate the designs with our UX Testing Labs.

NHL 14

Toggles

Historically, NHL used toggles with breadcrumbs. However, their big weakness is that you can’t see the menu options available until you select them. This means users had to memorize most of the game’s information architecture.

Sketching

These initial sketches show various forms of dropdown menus: attached to the edges of the screen, vertical, horizontal, text-only, image-only, and more.

Sketch

Design Pattern

Here we explored the possibility of switching to a drop-down system. The user would hold down a button to see all of the widget’s available sections, navigate to the desired section, then let go. This greatly improved the visibility of menu options. It had to be designed to work on any screen, so the dimensions and overlay effect were carefully considered.

Quartz Prototype

Because this was a non-trivial and widespread change to the game’s core navigation, I knew it needed a compelling prototype in order to get buy-in and in order to test it before implementation. I took the opportunity to learn Quartz Composer and create some custom patches to enable game controller input, building on the Facebook Origami plug-in. The prototype was an immediate hit and we were able to use it in a user testing session which gave us very positive feedback.

Quartz

Final Designs

The drop-downs ended up being implemented game-wide and well-received in future testing sessions. They never impeded any users from completing their tasks, and revealed improved task efficiencies as well as an improvement in the discoverability of information, especially by new users.


NHL gameplay features a line change and strategy system whereby players can make changes to how their team plays on the fly. We took a look at this system from a UX lens too, revamping its architecture and aesthetics to match the NBC broadcast package.

OVERLAYS

The in-game overlays needed to accommodate some new features made possible by the new generation of consoles. Additionally, we wanted to clean up a confusing information architecture and interaction method that had crept into the overlay system.

Overlays

Architecture & Interactions

I worked closely with gameplay producers and programmers to lay out many different versions of controls and architectures for the overlays. We needed to make sure that they were accessible very quickly and unobtrusively during gameplay, so controller ergonomics were a big factor. Once we had a candidate design, shown below, I prototyped it using Quartz to prove out that the controls were comfortable. The new overlay design is consistent in that each overlay uses two secondary buttons for two secondary controls, plus a single button to operate the primary control and visibility of the overlay.

Revisions

Before shipping the game, we realized that using the A button was interfering with skipping cutscenes. We refactored the controls in such a way that the spatial relationship between the buttons and on-screen elements was maintained. The first design had the Y and A buttons in use; the new design moved to RB and Y.

Revisions

Final Designs

The new overlays have tested well and boast a visual upgrade over previous years. Each feature that uses overlays has consistent interactions, and new features were added to give expert users more control over their game experience.


Box art

Final Words

The biggest win for NHL 15 was the creation of UX documentation to support all of the game's 300+ screens, including: user journeys, information architecture, wireframes, and prototypes. Our internal testing results indicate that critical information should be easier to find for both expert and novice users. Check out an impromptu walkthrough of some of NHL 15's UI below.

"Bravo...you gotta point out the times that they actually do good stuff...This is a good first step."

› 2BC Productions

Position

UX Designer, Electronic Arts

Collaborators

Jordan Girman, Ian Chan, Garrett Knights, Michael Doyle

Website

Check out the game at easports.com

LET'S CHAT

Let's talk shop! Feel free to shoot me an email about what you see here, future work, or anything else you'd like to chat about.

EMAIL ME