UFC Mobile 2 is a fighting game that aims to give the user an authentic UFC action game experience while collecting real-world athlete cards and competing against other players, building camps, and matching up to be on top of the game. For player engagement and retention, the game has events like the Lunar New Year, St. Patrick's Day, and much more. Some events are based on real-life UFC fighting events, like UFC 271 and International Fight Week.
​
I am a UI Artist in this project. I was assigned to create in-game assets like the main menu, iconography, card background design (in-game, we call these Vanity Frames), store assets, onboarding fighters and backgrounds, and map assets. As the game transitioned to a new chapter, I got to work on UI/UX mockups and HUD UI designs and animation.
In-game Main Menu
I've been assigned to create two of the dynamic main menu backgrounds that change every month to celebrate different events and holidays. In the first image, we’re celebrating St. Patrick's Day so I come up with a vibrant green theme that really captures the festive spirit. I also thought it would be cool to add some subtle animations, like rainbow light rays and sparkling particles on the main character, to give the menu a dynamic feel without distracting from the options. However, at the time I worked on this, the animated main menu was not yet a feature of the game.
​
I also designed the Cinco de Mayo celebration background. My aim was to create a colorful and exciting theme, reflecting the joy of the Mexican holiday in the game's interface. I created four variations of the image, and the green version received the most votes. This project is all about keeping things fresh and engaging for players, ensuring that the game's look always feels current and exciting.
UX/UI
Objective: Design a pop-up that's both visually appealing and easy to understand, showing players how their Camp Rating increases when they level up.
Camp Rating Wireframe
Wireframe Details
I received a wireframe from the producer, which served as my blueprint for the mockup creation.
Camp Rating
This rating represents the power of the player's card, which goes up with each level, giving players a sense of progression and achievement.
Camp Rating Mockup
User Experience Focus
My goal was to make sure the pop-up was clear and exciting, and that it fit seamlessly into the game's interface.
Design System
I used existing design system assets to keep the visual style consistent and to make the design process smoother.
​
In the mockup, I aimed to use visual hierarchy to emphasize the level progression and clearly showed the additional Camp Rating points that would be added to their rating badge.​​
​
My approach involved translating the wireframe into a high-fidelity mockup. The end result is a user friendly pop-up that clearly communicates the card's power progression.
The next step is to create an animation mockup and implement it into Unity. I took on the exciting challenge of designing an engaging level increase pop-up animation with three different statuses:
1. Level pop-up with no Camp Rating.
2. Level pop-up with Camp Rating.
3. Level pop-up with Camp Rating and badge progression.
To make these pop-ups stand out, I created animations in Adobe After Effects and then brought them into our Unity-based app. Our team uses an internal tool within Unity that doesn't have a lot of tutorials or resources, so I had to get creative. Here’s how I did it:
Creating the Animations: I started by designing the animations in After Effects, making sure each status had smooth transitions, looked visually appealing and have the right look and feel.
​
Exporting Assets: Next, I exported all the necessary assets and animation sequences from After Effects, making sure they’d work well with Unity.
​
Implementing in Unity: Finally, I used our internal tool to carefully translate the animations into Unity. This required a good understanding of both After Effects and Unity, and a bit of ingenuity to make everything work smoothly.
As part of my role in enhancing the user experience for UFC Mobile 2, I was assigned a wireframe by the producer to create a mockup for the "Level Increase" pop-up feature. This feature is designed to inform players about the enhancement of their chosen card's power, known as the Camp Rating, each time they level up.
Camp Rating Animatics with different statuses (Animated in After Effects and Unity)
Narrative Backgrounds
Fighter Vanities
Iconography (Game Assets)
Marketing Assets
