ELECTRONIC ARTS
CRITERION

Define Player Experiences for Need for Speed Unbound

Details.

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

Responsibilities.

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

Duration.

From Pre-production till Dev Alpha: 13 months

Position: Senior Experience Designer

Excalibur was my second Need for Speed Project, but in development with another studio. Criterion Games has received the license for the Need for Speed franchise. This meant that it was especially important to establish a good workflow within the development cycle. To achieve trust in ux design findings in order to establish a very good cooperation between the various departments, such as gameplay design, (technical) art, software engineers, audio, QA and User Research. Similar as in the development of Need for Speed Heat, I was involved in almost all features. What stood out this time, however, was the atomic design approach. I was also heavily involved in recruiting and was able to recruit two UX designers for Criterion, whom I trained and assisted as their development manager. Another aspect was the focus on creating a dedicated style guide early on, which mainly documents important information in the area of UX design and art. Another focus was to do UXR testing and to gather feedback at an early stage.
In the following I would like to briefly explain the atomic design methodology and show a few feature examples that are based on this methodology.

ATOMIC DESIGN METHODOLOGY

Disclaimer: Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

Atoms Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces
Molecules molecules are relatively simple groups of UX elements functioning together as a unit.
Organisms Organisms are relatively complex UX components composed of groups of molecules and/or atoms and/or other organisms.
Templates Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
Pages Pages are specific instances of templates that show what a the UX looks like with real representative content in place. 

FEATURE CASE: GARAGE

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 and Criterion.

Brief.

The initial idea and concept for the Garage were to not only be closely linked to the campaign narrative, but will also represent the front end. This means that game modes like campaign (solo mode), online game mode (lobby matchmaking) or autolog will be available from the garage. This means that the garage will continue to represent the typical Need for Speed functions such as car customisation or character customisation, as well as the collection and selection of the different car classes that are available. The material used here corresponds to the original design concept and idea, which was adapted in the course of development.
The main focus remains of the racer fantasy of customising and upgrading their cars to their liking, as well as buying or selling new cars. A new big focus is on the signature style area such as player banners or car body kits, which represent completely new features of Need for Speed Unbound. Player banners can be individualised by the player himself and are visible to other players and can be accessed from other players throughout the game. It will also be possible to upgrade your garage to unlock new items.
As with the other menus in the game, the player should be able to access all areas easily. All information and functions of the game should be accessible and lead to all relevant areas of the game. The architecture should be easy to understand and the information should be clearly grouped for the player. This way, the player should be able to quickly and intuitively find his way around the tab structure. It should provide the player with all relevant information about the features, options and allow a good introduction.
Once the accessibility and usability has been created and approved, the menu should have a special aesthetic look, where the garage as well as its interior is especially represented by the division of 3D objects and the visual hierarchy of the UI, matching the art direction of Need for Speed Unbound. The different stages and camera perspectives create a special visual experience and excitement and make the interaction fun.

Design.
Wireframe and prototype iteration.

Close cooperation with gameplay design and creative direction. 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 move within the garage. This animation flow and logic was created in a rapid Unity prototype:

Unity Prototype:

Atomic Design approach for Garage content.

         ATOMS

Typography.

We based our font sizes on 56PX (not PT) being our minimum size font for a 4K screen, we scale up the font by 25% each time. With a minimum font of 56PX, this meets the accessibility standards set by EA. 
What are PX and PT?
Pt is for print, px is for displays, but it doesn't change with browser settings so use em/rem.

For Need for Speed Unbound we will use DIN Pro Condensed for Item information, UI elements such as Button prompts, Tabs, Filters but also for Body Text.
As a second font, we use Eursotyle for Art designs like Brand names, Header alternatives, Rarity etc.

Colours.

Brand and UI Palette

Atomic Design on Grid System.

To demonstrate the atomic design methodology I use the grid framework as an example, which is used for the item selection within the garage in different categories/areas.

     MOLECULES

Molecules are relatively simple groups of UX elements
functioning together as a unit.

      ORGANISM

Organisms are relatively complex UX components composed of groups of molecules and/or atoms and/or other organisms.

     TEMPLATES

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

          PAGES

Pages are specific instances of templates that show what a the UX looks like with real representative content in place.

Player Banner Wireframe and Mockup.

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:

Due to the pandemic, we were unable to conduct on-site testing in our UXR testing labs. Therefore, many testing sessions were conducted remotely.
As with the previous development and testing of Need for Speed Heat, 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 and UX Styleguide.

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 and documentated those into an UX and Art Styleguide, 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 artists and designers from other departments have the possibility to create wireframes and art asstes with the help of this library and thus visualize their design concepts quickly.

FINAL WORK:

PLAYER SELF EXPRESSION:

FEATURE CASE: MULTIPLAYER ARCHITECTURE

Vision.

An important pillar of Need for Speed games is always to connect the players in the best way and to give them the possibility to play together - even across platforms: cross-play! An opportunity to inject our social creativity into our online capability to finally realise the promise of Need for Speed and deliver genre-defining social play.
Our vision for the core experience: Genre-leading social gameplay that brings players together for playful competition and co-opetition!

Foundation: Need for Speed Analytics.

BEHAVIOURS.

• 38% of players have never tried online
• 61% choose “Play Solo” vs 39% “Play Online”
• 62% of races in “Play Online” are started in Solo mode
• On  average, there are between 1 and 4 players available on a server to invite to a race

ANALYSIS.

Overall, player behaviour doesn’t match the design – the default is “Play Online,” with all activities playable within a shared world, yet the majority of measured play is solo.
Solo players in online play have low engagement in social play, yet are “taking up slots.” This is exacerbated by the Night/Day server split, with the overall result that it is hard for like-minded players to engage in social play together.

PRODUCT TARGETS.

QUALITY TARGET.
A - Sets a new standard within the genre

LEVEL OF INVESTMENT.
Social play is a key part of Need for Speed Unbound’s strategy to broaden the Need for Speed audience, both as a way to attract a younger audience and as a motivational draw (“Accomplished Allies” are Need for Speed Unbound’s second target segment).

We expect to invest significantly here, but believe we can take inspiration from our past to mitigate risk. Freedrive “co-opetition” play is therefore the focus, taking its cues from Burnout Paradise. The impact of AI cops on this type of play is a key area for discovery, whilst Public Events and higher-intensity modal play are also ripe for exploration.

PvP racing, Autolog asynch play and Crews are expected features, unlikely to stand out without major innovation. As a result, we will manage out investment here, leaning towards an evolution from Need for Speed Heat.

Brief.

Players can choose between playing campaign or playing multiplayer after the initial onboarding experience. Campaign is a solo (but connected)  experience while online becomes a dedicated social space. This split offers the player a clear choice about what they want to play.

Given that our campaign and online play are separate we need to split our systems between them appropriately. All areas of the game will have access to a set of shared systems and some shared content. Each mode will have some unique systems that are only appropriate in that mode.

The design for the multiplayer architecture is described below. This was adapted in the course of development and was not fully implemented in the final version.

Front end flow.

“Players are given a clear choice up-front of what and how they want to play.”
The front end flow splits the game into distinct “doors,” presenting players with a clear choice at the start of their session. Each option is described clearly so that players can make an informed decision. A benefit of this front end flow is that it is expandable: new “doors” can be added post-launch if required.

The material used here corresponds to the original design concept and idea, which was adapted in the course of development. Multiplayer (lobby) and solo campagne were separated from each other as a menu.

Title Menu.

Garage Menu.

Party Management.

“It is easy for like-minded players, whether friends or strangers, to find each other and play together.”
It should be simple to form a party of friends that can last throughout a multiplayer session. 
Players should be able to see their friends’ online status and join a party, even from within Campaign, so party management must be available throughout the game.
Furthermore, the default way to play in Freedrive is in a party, so solo players are automatically match-made into a party on joining Freedrive (prioritising joining Friends and Crew members).

Information Architecture, Wireframe and Prototyping.

Based on this matchmaking vision, the information architecture was created as a player journey flow with the help of Miro Boards. This allowed us to create a simple and seamless matchmaking process. This served as a foundation to create wireframes for the lobby (garage), exit into freedrive and matchmaking flows (invite process using the party widget and the player interaction panel). I quickly put the wireframe interaction and logic structure into Unity and had them tested by an UXR testing session to make iterative improvements based on the feedback. Once the design was understood and positively received by players, I passed the wireframes and prototype to the art department for mock ups, and summarised the information in our style guide.

The material used here corresponds to the original design concept and idea, which was adapted in the course of development.

Unity Prototype:

KIND ’’ WORDS

I had the pleasure to work with Marc twice - once at Electronic Arts and recently at Ubisoft Massive Entertainment. Marc was the UX lead on the same project as me and supported a team of 4-5 UX Designers as creative and organizational lead. He worked closely with our Game-, Progression and AI Design Leads as well as the UI team.
I experienced Marc as extremely pro-active and solution oriented. His positive mindset paired with his friendly and calm attitude was a great match for the team. This was a huge benefit especially during the more difficult pandemic times in which he took good care of his team as their lead.
I wish him all the best for his new adventure and hope our path will cross again for a third time in the future.

Lisa Kretschmer
Senior Game Producer