top of page
ezgif.com-optimize.gif

UFC 5 FEATURE DESIGN

About UFC 

UFC is a series of fighting games based on the mixed martial arts promotion Ultimate Fighting Championship (UFC) developed by EA Vancouver and published by EA Sports. 

Since December 2021, I have been working on improvements to existing game features of UFC, including the popular Career mode. I also drove the new feature designs of the UFC 5.

Other works at UFC:

Key Achievements

  • ​Owned and drove the design of over 10 game features from end to end

  • Conducted 5 user studies via interactive prototypes and game builds

  • Introduced new framework to test hypothesis in the early stage of production

  • Standardized the UX workflow from explorations to hand-off and created documentation for internal use

Feature Example - UFC5 Fight Week

The Background

​UFC 4 has many low-session-time players (what we call casual players) who don't stick around long. The data indicated, however, that a number of players will return during the real-life PPV fight week events.

" I remember one time I saw some fights with my cousin; when it ended, I immediately just downloaded UFC and started playing it all over."

- From UFC Casual Player Interview

A new feature, Fight Week, connects the UFC game with live events. It allows players to earn in-game currency by picking the correct winners of the PPV fight events.

how-to-watch-pereira-vs-adesanya-2.webp

The Process

TLDR: Because of a rush project timeline and my late joining date, the process wasn't great. Obviously some parts of solution crafting process are missing. However, I introduced a new framework to move user testing earlier in the production cycle to validate the assumptions and make the design process more iterative.

At the time I joined the team, it was in the middle of the production stage, and the team was eager to start developing wireframes. The average time between receiving the brief and delivering wireframes was only 1-2 week per feature, which, obviously, isn't enough for a comprehensive UX process.

Stage 1: Kick-off meeting

  • With the feature producers, designers, and engineers

  • Understood the feature intention, problems behind and find out any historical data/player research to support the decision

  • Defined the scope and priority of features 

  • Aligned constraints and initial design concepts
     

Why we are doing this feature?

  • Retention rate is relatively low for casual player

  • But big PPV events create big spikes in our game’s DAU

The business goals

  • Increase time of engagement

  • Funnel players into other modes

How to connect the game with PPV fight event event?

The team decided to use reward system for motivating players to engage in these events in UFC game (pick the winners) as well as playing other game modes (complete in-game challenges).

Frame 14.png

DAU spikes on big PPV events

Group 7.png

Stage 2: Explore

Competitor analysis was conducted to explore how other games connect to real world events. We also looked at the real world PPV and other sport events.

Screenshot 2023-05-11 173733.png

Rewards system in various games

Screenshot 2023-05-11 174018.png

Sport event examples

Stage 3: Define goals

After understanding the background from the producers, it was time to form user stories and design goals.

  • As a user, I want to play a entire new game mode with different mechanic (not only fighting), so I can take a break from repetitive gameplay.

  • As a user, I want to take part in the actual real world event in UFC game, so that I will be hyped about the upcoming event.

Design principles:

  • Connect to real world: to notify player the connection between UFC game and PPV fight week event

  • Unique experience: to create a refreshing and unique experience different from typical UFC gameplay

  • Intuitive information: to enable player pick their fight intuitively with the information provided.

Stage 4: Develop

  • Crafted user flow and identify potential touchpoints

  • Visualized various ideas using wireframes

  • Generated prototypes via Figma to test and showcase the detailed interactions

The wireframes on the right show some iterations on the pick fight feature.

Stage 5: Deliver

  • Review with designers, producers, and engineer

  • Iterated the designs based on feedback

  • Crafted handoff documentation with all the states, variations, potential cases, and flows

image 72.png
Screenshot 2023-05-12 165406.png
Thoughts-pana.png

"It doesn't sound right."

 

Yes, I feel you. Even we did understand the reason behind the features, we still feel something missing in the designs. So, during the break from the hassle, I was keen to learn how to improve the process. My top-of-mind problems:

  1. "Is it solving the real problem?" We are uncertain about the solution because of lack of research.
     

  2. The designers (including me) made some assumptions on the designs, as we do not have data / research about our players.

In order to validate the assumptions and answer our questions, we wanted to test the design. While testing usually happens after game development at UFC, I introduced the new framework to have an early testing process and shorten the cycle of iteration. See the UX validation process to learn more about how I pitched the framework to producers and leadership.

Circle back and Refine

As a result of promoting the validation framework, we conducted both low bandwidth user tests with the Figma prototype for rapid feedback and in-depth game build prototype testing partnering with UX researchers to get detailed player sentiment feedback.

Round 1: Figma prototype usability testing

Planned and facilitated the user tests

Goal: To identify possible friction points in the feature
Format: 1/2 hour remote moderated test

Participants: 11 players (mixed knowledge level of the UFC 5 fight week)

Findings

From the tests, we noticed some common usability issues:

  • Every users expect to have the ability to move back up and change results freely, instead of guiding them in the flyout interactions.

  • Selection make sense but navigation back up needs to be added.

  • Users indicate that they would like to refer to the stats outside of the flyout, which is blocking the info panel in this design. 

After the tests, I iterated the designs based on user test findings.

Fight Week Challenges.png

More intuitive visualization of the information

Untitled-1.gif
Fight Week Challenges1.png

Flip over cards instead of flyouts to avoid blocking the information

Round 2: Game build prototype testing

Collaborated with UX researchers to plan the remote the test

Goal: To test the usability and general understanding of the game mode from a non-hardcore player

Format: 1 hour remote moderated test

Participants: 9 Casual players

Positive Findings

  • Most Players can connect the feature with real life PPV events and understand it's a "betting" feature in order to win some rewards in the game.

  • The feature are commonly welcomed and some players showed strong intent to trial play our fights
     

Some players are confused about

  • Players are not sure about what reward/how many points they can win if they are correct about the picks

  • Casual players are confused about some abbreviations like DEC for decision

Further iterations are made with the visual designers. 

2.png

What have I learned?

The show must go on!
There isn't always an ideal process.

As mentioned before, we sort of skipped the Discovery and Define Stage in the first few features.

Group 8.png

There was consensus on the team that this was not the best process due to time constraints and induced some snowball effects in the later stages of production. To avoid a repeat of the same situation, we wanted to investigate the problems and the solutions before the next cycle.

Major problems we spotted and the solutions:

Gaming-pana (1).png

Lack of a fluent understanding of our players

Online document-pana.png

Lack of detailness on hand-off doumentation

Design community-pana.png

Uncertain about the problems we are solving

Work with UXR to set up a data based ideation process

Sometimes assumptions are needed to be made.

Similar to the above, limitations of resources and time might lead to a lack of research and insight into ideation. But sometimes unvalidated assumptions have to be taken into account, especially with a tight production schedule. Make sure you test it later and propose changes if necessary.

We were lucky that get the chance to work with UXR in the later stage of production to validate our assumptions. Hence, proposing changes to improve the experience based on real user feedback.

Yes or no-pana.png

The keys to success are
alignment and communication.

AAA games usually involve a number of stakeholders in decision-making, such as producers, engineers, designers, artists as well as leaderships. In order to achieve buy-in, it is critical to ensure different parties are informed from the beginning.

 

Keeping in touch with various groups helps us, designers understand the constraints, priorities, and requirements of various disciplines. Overall, it simplifies the decision-making process, achieves quicker buy-in, and prevents domino effects.

Team spirit-pana.png
bottom of page