Electronic Arts Ghost Games / user experience and interface design for the PC and console triple A game Need for Speed Heat.
Flow charts & information architecture
Creation of wireframes, mockups and animations
Prototyping (click prototypes + engine prototypes)
From production till launch: 11 months
Live service: 3 months
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.
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.
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:
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.
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.
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.
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.
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:
- 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.
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:
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.
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.
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.
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.
Need for Speed HeatGame Development User Experience Design
Football EmpireMobile Game development User Experience Design
Park and JoyResponsive Design Webdesign
Ford Online Accessory CatalogueWebdesign, Shop design, Online Catalogue
Henkel OLED JEC ExhibitionOLED interactive screen design, motion design
Might and Magic Heroes OnlineBrowser Game development User Experience Design
Bayer Crop Science – SeedGrowth – ISF Conference 2017Exhibition design