EASPORTS FIFA 17-19
FIFA Story Mode UIUX design
FIFA Story Mode UIUX design
ROLE
Lead UX Design
Lead UX Design
CHALLENGE
EASports FIFA has long excelled in conveying football stories through gameplay on the pitch. However, narrating the off-pitch life and daily struggles of real football players presented a unique challenge. This case study explores the UX team's journey in FIFA to create an authentic narrative experience that maintains player immersion, engagement, and challenge across gameplay, cinematics, UI, and loading screens, setting a new benchmark within the AAA Sports Game Genre.
RESULTS
EASports FIFA has long excelled in conveying football stories through gameplay on the pitch. However, narrating the off-pitch life and daily struggles of real football players presented a unique challenge. This case study explores the UX team's journey in FIFA to create an authentic narrative experience that maintains player immersion, engagement, and challenge across gameplay, cinematics, UI, and loading screens, setting a new benchmark within the AAA Sports Game Genre.
RESULTS
The commitment of the UIUX Team to reinvent the storytelling of football, both on and off the pitch, has marked a significant achievement. This innovative approach has made the football experience more accessible and engaging, attracting both new and core players with its narrative-driven design. Insights and frameworks developed for "The Journey" story mode have been successfully applied across other modes and titles in the FIFA series, demonstrating the scalability and effectiveness of these strategies and their substantial return on investment.
Design Challenge
Delving into FIFA's unique landscape reveals specific challenges distinct from other digital products. These challenges, including navigating through FIFA's complex UI screens and myriad menu options, underscore the importance of seamless interaction in delivering an authentic FIFA experience. With 12 game modes and over 500 screens, FIFA stands as a vast football sandbox for millions worldwide.
Design Question
How do we make the navigation of FIFA's UI feel more immersive and emotional, rather than purely functional?
Our focus was on making FIFA's UI navigation immersive and emotionally engaging while balancing functional and emotional purposes in UI design. Creating Design Principles early in the design process helped maintain focus across different project stages, from Pre-Production and Production to Finalizing. We created 3 Principles to help guide the design process: 1. Purposeful Immersion. 2. Contextual Design. 3. UX Frameworks.
Purposeful Immersion
How do we balance the mix between Functional Purposes & Emotional Purposes in UI Design?
The UX team devised tools like the UX Immersion Matrix to balance functional and emotional player experiences. This approach included designing UIs that are functional for tasks such as Player Management as a Football Manager, and to evoke strong emotional responses, enhancing realism and maintaining narrative immersion. We would like to categorize all FIFA UI experiences into 2 Types of Immersion: 1. Functional Immersion. 2. Emotional Immersion
Examples of a Functional & Abstract FIFA UI. The focus of the user is around how to complete various tasks efficiently and effectively as a Manager. All the elements within the screen, from navigation and UI components to information panels and interactions, are crafted to promote flexibility and efficiency of use.
Conversely, we prioritize UI screens that evoke strong emotions, aiming to deliver maximum emotional impact and enhance realism. This approach is akin to techniques used in movies, where UI components are overlaid onto scenes to simulate their presence while preserving the viewer's immersion in the narrative experience.
Contextual Design
By dissecting the narrative flow in The Journey (Story Mode), the team outlined key Journey player experiences such as Training, Matches, Scenes & Decisions, and Progression & Stats. This analysis guided the development of an Adaptive UI Framework, categorized into Light, Medium, and Heavy UI patterns, each tailored to the specific functional and emotional immersion needs of different moments in the player's journey. Ultimately, the design team wants to treat both form (UI) and emotional (Narrative Beats) as essentially ingredients for engaging, memorable experiences in The Journey.
Light UX Framework
Medium UX Framework
These Transitional UI experiences are designed to seamlessly guide players through light managerial tasks while preserving their immersion in the narrative. For instance, the Home Hub serves as a recurring focal point where players frequently return before engaging in another gameplay match. Here, players can experience a seamless continuation of the story, with the UI itself incorporating elements such as Social Media content, match statistics, player progression, and more, all contributing to the immersive narrative experience.
Heavy UX Framework
In contrast, we have Task-Heavy and Management-Driven UI experiences that demand the player's complete focus on accomplishing specific tasks, with less emphasis on the narrative immersion. Examples include activities such as upgrading player traits and conducting in-depth analyses of progression and stat comparisons. These UI interactions prioritize efficiency and functionality over narrative engagement, catering to the managerial aspects of the game.
Game Flow Example
Looking Ahead
The initial investment in a robust UX process and the development of design principles and tools have prepared our UI framework and design system to endure and evolve over time. This groundwork ensures the scalability of our designs, allowing for their application in future game iterations and other game parts.
Additionally, this work has not only impacted the FIFA Franchise but also provided me the opportunity to share our UX Team's insights and design process as a Keynote Speaker at the DesignMatters18 conference, further extending the reach and influence of our innovative approaches to UIUX design in video games.
