Ubisoft Massive Games / user experience and interface design for the PC and console triple A game Avatar - Frontiers of Pandora.
Leading the UX department. Creation of flow charts & information architecture. wireframes, mockups and animations Prototyping (click prototypes + engine prototypes) Accessibility & UXR testing
From Production till Dev Beta:
11 months
It was a great honour and privilege to develop a video game based on James Cameron's famous hit film "Avatar - Frontiers of Pandora". In cooperation with Disney and James Cameron's company Lightstorm, Massive Entertainment developed the triple A game "Avatar - Frontiers of Pandora", where we created a separate path from that of the movies by having a separate part of Pandora that we're on, separate narrative, regions and experience that could become famous and attractive on their own and not as a product of hand-me-downs from the movies.
But first, lets get into the mood. Here is the Avatar - Frontiers of Pandora Gameplay Trailer:
At Massive Ubisoft I was the Lead UX Designer and led a team of four UX designers. It was especially important to establish a good workflow within the development cycle. To achieve confidence in the results of the UX design and to establish a very good collaboration between the different departments like gameplay design, (technical) art, software engineers, audio, QA, UXR (User Experience Research), analytics and accessibility. Similar to the development of Need for Speed Heat & Excalibur, I was involved in almost all features. For Avatar-Frontiers of Pandora, my focus was additionally very much on the elaboration of a UX styleguide, in creating the asset libraries, as well as the creation and use of template frameworks. I also integrated the human centered design aspect early on by including accessibility in the concept phase, as well as the UXR Testing Lab and the Analytics Team. I also used the atomic design approach for the libraries and documentation and was involved in the recruitment of a UX designer, who I also trained alongside the other UX designers and supported their development process.
In the following I would like to go into more detail about the work processes and my lead function and show some feature examples based on my methodologies.
One of my main tasks was to integrate the vision and goals of UX in the best possible sense into the workflow and work processes, both internally and externally at Massive Entertainment. It was important for me to integrate UX into the idea/concept development process at an early stage and to make it transparent for the other departments and directors. Internally, the focus will be on flow chart development, wireframing and prototyping. In order to implement this in the most efficient and effective way, I defined UX frameworks. These consisted in particular of setting up asset libraries and templates so that we in the team could apply them quickly and consistently to our work. In addition, the creation and maintenance of the style guide was an important task for me. To define clear rules to not only maintain consistency, but also to ensure clear handovers between UI design and art. The libraries, templates and style guide are strongly oriented towards the atomic design approach. If you want to know more about this, you can have a look at my reference to Need for Speed Unbound, where I go deeper into this method.
Here I only briefly describe what the Atomic design approach is:
Atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces
Molecules are relatively simple groups of UX elements functioning together as a unit.
Organisms are relatively complex UX components composed of groups of molecules and/or atoms and/or other organisms.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
Pages are specific instances of templates that show what a the UX looks like with real representative content in place.
Furthermore, it is important for me to build up a good prototype mentality, especially in the Snowdrop Engine. To be able to test the design considerations internally and externally (UXR) as early and as quickly as possible. In this respect, the close cooperation and exchange with the UXR and the Analytics Team (Game Inteligent Team at Ubisoft) is also very valuable in order to share important insights.
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.
The assets were created in Adobe XD and created as components. These have different states. Thus we could divide the assets in the screens and adapt them accordingly. If the main instance had to be adjusted, this was directly changed on all other screens in real time. On the other hand, clear templates with action and safe title were defined, which could be used as basic templates. Furthermore, a clear grid system was defined. Since we use free cursors in Avatar - Frontiers of Pandora, it was defined that the main information should be in the centre and long cursor paths (screen corners) should be avoided:
We had regular syncs with the UXR and Analytics Team and conduct a lot of on-site testing in our UXR testing labs.
As with the previous development and testing of Need for Speed Heat and Unbound, 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.
Close cooperation with gameplay design and creative direction. Wireframes were used to quickly define which interactions and information were displayed. So players recognise a clear structure and understand their belonging, thus creating cognitive patterns. Through layouting we determine how the information is displayed.
The user is at the centre of all our ideas and designs. And in order to check and confirm these, user testings were conducted at regular intervals in Massive's user research lab. The feedback and the resulting findings were integrated or adapted into our concepts. During the tests, not only (finished) game builds were used, but also simple click prototypes. Depending on what needed to be tested and what kind of insights we wanted to gather.
Testing Lab at Massive Entertainment
Analytics mockup shot (slides from presentation after each other)
The HUD design will organise the layout and placement of information in the HUD and set rules for primary and secondary display of information's. All detailed designs specifications will be owned and covered by the Features themselves.
The aim is that the player feels completely immersed in the experience of our game Avatar-Frontiers of Pandora, and nothing takes them out of the experience, like for example a static HUD displaying tons of information. Diegetic elements are a powerful tool to create immersion and enhance the narrative experience for the player, therefore we aim for a mix of a traditional HUD and diegetic elements to find the most effective way to balance immersion and clarity of information. The player should as little as possible get distracted or feel overwhelmed because of unclear or too much HUD information, as this ultimately leads to them losing concentration and focus on the goals.
We will allow the player to turn off HUD entirely, so we need to make sure they still get feedback on their actions, through other means.
Players should always know where they are, where they can go and what actions they have performed successfully.
We will have 3 different Queuing Systems: Events, Log and Critical
Minimal HUD notifications.
We will not have permanent notifications on screen which only disappear when the player has done an action
Except for server notifications - they are permanent until is cleared
For example: If the player unlocks new Skills or Proficiencies, the notification will not stay on screen until the player has opened the menus, instead we will have reminders in the menus what is new
Notifications from the same time will be combined and show and updates in the already existing notification
For example: If the player unlocks multiple recipes to the same time they will not get multiple notifications instead they see one with a list of unlocked recipes
We will check if player don't use certain features they will get notifications for and if they have not used for x-amount of time they will get a Cicero reminder with a note how to turn off or minimize notifications, like: You didn't craft for a while, did you know you can turn off HUD notifications in Settings Menu?
This way we remind on features but also give a helpful hint if player are not interested and acknowledge the players behavior
Mockup HUD breakdown of elements
With this softmarking and detection system, we combine two mechanics - communicate to the player of WHERE is the enemy and WHAT is the Enemies status. This UI is only designed to show the player where the enemy is (spatial awareness). It also gives direct feedback on the action the player is taking and whether it is attracting the NPC's attention (Pre-Combat). When in combat, the Tag stays and as soon the player hits the Enemy, his Health bar will appear to show the impact of damage of the players weapon and his toughness (bars).
When the player hides or is out of sight for the NPC, the Tag shows its deescaltion feedback. Depending on the last state: Pre-combat or combat, the health bar disappears and the tag drowns to the white state again.
Combat state is also shown, when a NPC is in investigation mode and searching for the player/alarmed.
That system should give players opportunities to act and react. The player can tag enemies by aiming at the player or using Master Hunter Senses (MHS). If a player is being detected, that icon morph into the dection icon.
Avatar - Frontiers of Pandora is not a stealth game, and our design forces the player character to eventually fight the RDA.
Plus this soft marking system would also help to improve the visibility of NPCs in size (soldiers) and contrast (camouflage patterns)
As a player, I will experience a variety of quests that include the action/adventure Main Campaign, and quests related to each of the factions which build relatedness with the Na’vi and believability of the world. These rangefrom big epic moments as well as smaller character moments that make Pandora a place I want to live and protect. I can play all quests on my own or with a group of my friends and both are a great experience for all of us.
The Quest System is the frame in which players evolve in our game. It delivers large parts of our narrative experience and also governs how these moments are handled in Coop.
Provide a consistent frame for player activities and rewards, that players understand and use to maximize their own enjoyment.
Set clear and logical rules for how playing quest in Coop works. In particular, how the state of one's own game is affected by the action of others in their world, or their own actions in someone else's world. We want to support as many scenarios as possible: group of players who want to do all the game together, group that want to play some quests together but still enjoy solo sessions, and also players that want to enjoy the story by themselves but are fine playing with others as long as they don't get any spoiler.
Set-up a system allowing players to interact with the world and its inhabitants, and to engage with narrative content.
UX Goals
Quest Log on HUD
Final Visual Quality Quest Screen
Quest Log on HUD (on Direhorse)
Quest Log on HUD (on Ikran)
As Massive, we delivered on our promise, on an extraordinary experience, where the player experience the world of pandora, by seperating a path from the movies by letting players experience a seperate part of Pandora , narrative, regions and experience that is attractive on their own.
It was very well received by the press, media and players. Thus, the metacritic scores reached: 75 rating for Xbox and 73 for PS5. And more importantly, the community responded very positively to Avatar-Frontiers of Pandora.
Players praise the varied, visually impressive and exciting journey through Pandora. They really enjoy discovering this world and being fascinated by it.
The features such as cooking, crafting, harvesting and flying with the Ikran were seen and accepted very positively. The explorative part in the main and side quests was very well received, as well as the destruction of the RDA facilities that pollute the earth of Pandora with their factories.
Other positive aspects are the breathtaking landscapes, atmospheric soundtrack, varied gameplay, flawless controls, the game world motivates exploration, just to name a few.
The world and universe of Pandora has been successfully expanded with Avatar: Frontiers of Pandora.
For me, this time has shaped me extremely, broadened my horizons, promoted my career, and completed me as a person and as a UX designer. So I will always look back on this special time with fondness. As a team we shaped the UX department, integrated new workflows, integrated library systems to work more efficiently, defined uniformity of tools and strengthened collaboration with other departments. We have also incorporated collaboration with UXR, game intelligence and accessibility as an essential part of our UX designs and hypotheses. I thank Massive and Ubisoft for giving me their trust in UX design, for giving me the opportunities to develop myself, for encouraging me that every voice counts and that you are part of a bigger whole. I am thankful that I was given a lot of responsibility and leadership in my role. Proud to have worked on Avatar-Frontiers of Pandora. Proud to have worked with such great people and colleagues throughout the company.
Marc joined a UX team in dire need of leadership and shaped the team into a strong, cohesive unit.
As the UX Lead, he focused on getting the team to adopt a common workflow and structure. This helped the team be effective and improved the quality of the work.
Marc also made sure the team was not siloed and that we had regular syncs with our User Research and Accessibility teams. This helped the UX team as well as the other teams and allowed us to tackle important topics that could have been missed otherwise.
Communication improved greatly in all directions, to stakeholders, to other parts of the UX/UI team, to the gameplay teams and to the narrative teams. This really put the UX team in a good position to be able to work effectively on all parts of the game.
Any UX team would be lucky to have Marc as their Lead!
Joost Peters
Senior UX Designer at Massive Entertainment
Selected Works
PredecessorGame Development User Experience Design
Avatar - Frontiers of PandoraGame Development User Experience Design
Need for Speed UnboundGame Development User Experience Design
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 – ISF Conference 2017Exhibition design
Skull and BonesGame Development User Interface Design
Palmer Hargreaves Website redesignResponsive Design Webdesign
SMS Siemag LED animation Metec 2011Exhibition design
Bericht aus Berlin und WahldesignMotion Graphics