2020 - 2023 // EA SPORTS UFC // PHOTOSHOP + ILLUSTRATOR + FIGMA + AFTER EFFECTS
I was an interface designer on the team working on UFC 5, the fifth installment to the EA Sports UFC franchise. My main focus was on the UI/UX design of various new headliner features, the UI style guide, and art asset creation.
OVERVIEW
UI/UX DESIGN
UI ANIMATIONS
ART ASSETS
KEY CONTRIBUTIONS
FIGHTER SELECT UPDATE
OBJECTIVE
One of the biggest changes of UFC 5 is the move to the Frostbite engine which offers higher fidelity fighter models, and this necessitated a new approach to the Fighter Select screen that can better showcase the new fighter models and integrate new features such as emotes, while keeping feature parity with UFC 4’s Fighter Select screen. Taking inspiration from the character select screens from well known fighting games such as Street Fighter and Injustice, I set about redesigning the UFC 4 Fighter Select screen into a new horizontal layout with a smaller footprint that allows for the fighter models to take more visual prominence, and compared this with the same vertical approach as before.
DESIGN
The team’s feedback was overwhelmingly in favour of the horizontal layout as it felt fresh and modern, and accomplished both the tasks of providing more screen real estate for the fighter models and retaining existing features/elements of the previous iteration of the screen. The next step was to generate detailed mockups of all the potential states, working with producers and engineers to ensure that nothing was missed and that the design remained within technical scope. Once the screen was designed and built, artists from the rendering team had free reign to frame the fighters, play around with the background environment, and introduce fighter emotes.
online career
DESIGN
Online Career is a new (and more casual) PVP mode in UFC 5 where players create their own custom fighters to match up against other players online. This differs from other online modes in the game in that players earn points which can be spent on upgrading their fighters to fit their own custom playstyles. As such, this mode necessitated its own branding to match its more casual nature, while having a robust UI to accommodate the functionality of spending points to upgrade fighters. This includes designing a mode hub that showcases the player’s fighters while retaining ease of usability, and fighter upgrade screens that clearly communicate upgrade options and costs.
fighter upgrade
branding and animation
store / rewards / progression
UFC 5 introduced a new storefront screen where players can purchase customization items and fighters. Given the technical and time constraints at that stage of the development cycle, many existing components and tech were repurposed in support of this new screen. The end result was a fairly robust set of screens that supported all manners of items while being highly scalable to support post-launch initiatives. Also integral to the overall monetization model of UFC 5 are Punch Card (essentially a mini battlepass) and improving the Challenge Board first introduced in UFC 4.
storefront
Punch card / challenge board
additional screens
A sampling of other screens that I’ve worked on in UFC 5.
main menu
career mode hub
fight now mode select
career mode hub - calendar
🙌
If you’ve scrolled this far, thank you for taking the time!
Be sure to check out the UFC 5 Style Guide page as well, which contains more examples of my contributions to UFC 5.