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.
