ELECTRONIC ARTS
GHOST

Define Player Experiences for Need for Speed Heat

Details.

Electronic Arts Ghost Games / user experience and interface design for the PC and console triple A game Need for Speed Heat.

Responsibilities.

Flow charts & information architecture
Creation of wireframes, mockups and animations
Prototyping (click prototypes + engine prototypes)
UXR testing

Duration.

From production till launch: 11 months
Live service: 3 months

Position: Senior Experience Designer

As a Lead Senior Experience Designer and Manager I was involved in all features of Need for Speed Heat. My main tasks were to lead and manage the UI/UX Design team consisting of 2 Designers, attend leadership meetings and evaluate/review work alongside other stakeholders. I also had a hand in the improvement of workflows within the company, especially between Gameplay Design, UX, Art and Engineering. Further responsibilities include the creation of style guides, flow charts & information architecture, wireframing, mockups, prototyping and documentation of features. I also work very closely with the UXR department where we organize testing sessions and evaluate the data and feedback together.

FEATURE CASE: MAIN MENU

Disclaimer: Some work and processes may not be further elaborated here for NDA legal reasons. The goal here is to give you a first impression of my work and working methods. With permission of Electronic Arts. For further information, please contact me. All works are the intellectual property of Electronic Arts Ghost and Criterion.

Brief.

The goal should be to create a main menu, which players can reach easily and at any time. In this menu all information and features of the game should be accessible and should lead to all relevant areas of the game. The architecture should be easy to understand and the information should be clearly grouped for the user. So the player should be able to find his way quickly and intuitively in the tab structure. It should provide the player with all the relevant information of the features and allow a good entry level. Large tiles with a clear descriptions are displayed in the foreground, in front of the 3D object and illuminated backgrounds. These provide a clear visual hierarchy, so the player knows where those tiles lead to. Once the accessibility and usability has been created and approved, the menu should have a special aesthetic look, where the car is displayed as a 3D object with illuminated background graphics, matching the art direction of Need for Speed Heat. The different stages and camera perspectives create a special visual experience and excitement and make the interaction fun.

Menu architecture.

Design.
Wireframe and prototype iteration.

Close cooperation with gameplay design and producing. Wireframes were used to quickly define which interactions and information were displayed in which tab category. So players recognise a clear structure and understand their belonging, thus creating cognitive patterns. Through layouting we determine how the camera should behave towards the 3D object (car). This animation flow and logic was created in a rapid Unity prototype:

Unity Prototype:

Workflow and testing.

After the design was agreed and approved by the gameplay, art direction, cinematic and lighting team and software engineers, the wireframes and user flows were passed on to art to achieve the visual quality. We stuck to a workflow that I defined for the feature team:

An important aspect was to test early with our core target group. So I worked very closely with the UXR department where we organize testing sessions and evaluate the data and feedback together. Working in a lean UX approach for Wireframes and Prototypes are: focusing on speed, focus on functionality, being able to make changes on an iteration level and convey ideas as quickly as possible. It is all about efficiency.
Build up theories and hypothesis to quickly test and check if it is valid or invalid. Test by the whole team and/or core audience to collect feedback in order to iterate on this feedback.

Documentation.

All information, such as design research and goals, information architecture, user journey, wireframes, UI, animations, mockups were documented in our project documentation tool confluence. So that everyone in the team can access this information. Furthermore, as for all wireframes, I have created a library of components, so that we can work more efficiently and faster in the same framework. With this we can keep a consistency of the screens and frameworks. So other designers from other departments (e.g. gameplay) have the possibility to create wireframes with the help of this library of assets and thus visualize their design concepts quickly.

FINAL WORK:

FEATURE CASE: PLAYER LIST

Vision.

Create a vibrant and long-lasting Need for Speed community!
Have a technically stable connected experience that players can trust.
Focus on the social experience, where players have fun with friends, but also make new friends.
This will be done in the  following ways:
- We show a non-interactive, on-screen list containing the full player ID + VoIP icon indicating the players who are talking: VoIP player list
- We always have a full player list 2 button-presses away, where players can organise their parties, see who is online and have access to a player specific interation panel (PIP) where players have more interactions like view profile, invite to party or crew and much more.

Multiplayer Structure.

Our multiplayer experience is based on a strong foundation composed of the game modes (both structured and unstructured) that grab and hold players with their fun mechanics and exciting second-to-second engagement.

We then use the social, community, progression and meta-game systems as the main motivation loops that keep players comming back and replaying the game modes over and over again.

Multiplayer Events Flow.

Multiplayer Events Flow.

Multiplayer Structure Diagram.

Multiplayer Player Journey.

Brief Player List and Player Interaction Panel.

The party system is the usual system that players used for connecting with friends, sending friend and game invites or join other players game. Within NFS we can have up to 8 player parties. The main focus of online gameplay in NFS Heat is our 16 players servers which is called AllDrive in NFS.

The players section has 3 main areas + 2 if cross-play is enabled:
- party
- friends
- server (In-Game)
- EA friends (Cross-Play)
- invites (Cross-Play)

A tab system is used to navigate between the sections.
Player list (main menu version) can be opened as an overlay from any menu or sub-menu in the main menu, by pressing the left stick button. This is signaled by a button prompt that is visible throughout all the menus and sub-menus of the Main Menu, in the top-right corner, part of the player profile widget.

From the player list, a main menu version of the Player Interaction Panel can also be opened. 

Player list structure.

Player interaction panel

Documentation and presentation.

All relevant design decisions were documented in confluence and a separate design paper. The cross-play feature was particularly important in the documentation, as this was sent to external partners such as Microsoft and Sony for compliance purposes. This documentation went into great depth of mechanics and functionality and describes all relevant topics, such as technical architecture of the servers, terminology, complete player experience flow of the feature, all relevant player list and player interaction panel mechanics and flows as well as telemetry requirements and mitigation design. The result was a very detailed and comprehensive guideline, which we have used internally as well as for our external partners. Since the Ghost/Criterion team was the first at Electronic Arts who implemented cross-play into a game, the development was also accompanied by a film documentary. In the documentary I introduce the user experience area as the main responsible designer. You can see the documentation here:

Final player list and player interaction panel in game.

HEAD UP DISPLAY: ART DIRECTION AND USER EXPERIENCE.

Goal:

Provide the player with reactive feedback, that supports player intensions and rewards their actions.
Provide a refreshing tone for Need for Speed, that aligns to core player feedback including positive, negative & warning states.

Colour palette

Typeface

Font sizes (HD Resolution)

The UI is an extension of your vehicle, so follows the same theme of the cars vibrant pop against the more urban/gritty backgrounds.
The HUD has a clean foot print that contextually delivers feedback with vibrant highlights for key moments, all brought to life through rewarding motion. Backgrounds within the menu will bring the urban/gritty feel, whilst anchoring the UI screens around the player’s own upgraded vehicle will help to immerse the player and create a showcase for their vehicle & achievements. Menu items will be clean with clear choice & page hierarchy.
Additional lighting overlays & global VFX will add life and intrigue to the UI menu screens.

Creating a franchise visual signature gives NFS a distinct visual identity, in a similar vein to Battlefield’s flare/fire.
Reflected across the game through key art, menu screen backgrounds, illuminated AR & HUD elements.
A versatile visual signature that wraps around our hero car assets and brings motion and intrigue to the game.

GOAL: The player feels rewarded by their interactions across a variety of immersive features, that delight in their reaction to player input.
TONE: We are unapologetic, we are maverick. Nothing holds us back.
EXPRESSION: Creativity in Need for Speed is unconstrained, explosive and without limits.

HUD Footprint

Goal:

Provide solid foundations that consider gameplay feedback and the overall player experience as a whole.
Every feature should be aware of its place and priority in relation to everything else.

Speedometer

Critical Damage

Glitch Effect Speedometer

Glitch Effect Minimap

Glitch Effect Minimap

POST MORTEM.

In summary: Electronic Arts Ghost did a very good job in Need for Speed Heat. We were able to record better successes than NfS Payback did. We have managed to bring Need for Speed back into the higher Metacritic scores. It got a 74 rating for Xbox and 72 for PS4. And more importantly, the community responded very positively to Need for Speed Heat.

Positive aspects of the game were: players enjoy both the gameplay and the narrative. The car handling is fun and there is a wide variety of race
types and events for players to take part in and day/night cycle is appreciated by players and gives the game depth and a strategic element. On the other hand, there is room for improvement: progression is balanced, but losing rep feels too punishing and night races are visually noisy and hard to navigate. The cops are seen as hard to deal with initially. Some players felt frustrated by cops throughout the full 10 hours and it is unclear how to repair damaged vehicles.

The Rating of the user interface scored very high on a player UXR and survey: 8.0 (where 1 is very poor and 10 is excellent). Finally, a lot of praise for the UI: clean, slick, functional and the menu screens look amazing.

KIND ’’ WORDS

I met Marc halfway through production production of Need for Speed Heat. I was impressed by his ability to immediately get to work contributing to the UX design of the project, working across multiple teams distributed throughout EA worldwide. His designs are always very well presented and documented and he is able to quickly make changes,iterations and even full-on redesigns when the situation calls for it.
His strive for structure and consistency in a somewhat chaotic design process was a great contribution to the final product.
His commitment to quality carries through from the biggest flashiest features down to the most basic component and that is something I really appreciate and admire in the people I work with.

Erik Fagerholt
UX/Creative Director, To the Sky