Heaven or Hell: Duel 1, Let's Rock!!!
Heaven or Hell: Duel 1, Let's Rock!!!
Frame Buddy
UX/UI Design

Every Frame Counts

Design Overview:

Fighting games are some of the most difficult but rewarding genres of video games any player experiences. From understanding crucial fundamentals to applying moves and properly responding to attacks, the fighting game genre naturally has a dedicated group of players that strive to improve their gameplay the more they enjoy their game. No matter the type of move used in fighting games, whether it comes in the form of a basic attack, a fancy super, or a unique move pertaining to a character, it all contains frame data, which serves as the foundation for the properties of the move.


Defining the Problem:

 • What's needed for this app?
 • Why would they need this app?
 • How would this be beneficial?
 • Can the user have an easier time navigating data?
 • What's the best way to break down terminology for newcomers?

Whiff Punish the Problem

Fighting game players may know what certain moves can do, but there are also more nuances involving the certain properties of moves, and naturally the player would go find the specifics of certain attacks and how positive or negative the condition of it can be. Frame data is readily available online, but seeking this information comes through a variety of issues. For this project, we gathered six different users who have prior experience with playing fighting games, varying in experience with playing fighting games. We asked them what were some of the inconvnenient aspects when it comes to finding frame data and retaining that information:

Image Title
Image Title
Image Title



The Client

Fighting game players.

Core Team & Tasks

Tan Nguyen ( UX Designer )
Kurt Pham ( Lead UX Designer )

The Challenge

Fighting game players are not having the most optimal approach to accessing & utilizing frame data from a variety of games that would not only serve to be crucial but to also be a convenient asset in improving their gameplay experience with further knowledge.


The Objective

Create a mobile app to aid fighting game players so they can use the Frame Buddy application to access desired frame data, movelists, matchup information, & other relevant information with ease along with organizing & retrieving data from external sources.



Bauman Wordpress Portfolio Theme



A Concise Frame Data App to Assist Players

Fighting games are some of the most difficult but rewarding genres of video games any player experiences. From understanding crucial fundamentals to applying moves and properly responding to attacks, the fighting game genre naturally has a dedicated group of players that strive to improve their gameplay the more they enjoy their game. No matter the type of move used in fighting games, whether it comes in the form of a basic attack, a fancy super, or a unique move pertaining to a character, it all contains frame data, which serves as the foundation for the properties of the move. What we aim to achieve with this project is to provide an extra layer of convenience for the players with vivid, clear information that is concise and easy to navigate through.



User Personas

Three particular users stood out during the testing process, as these three users had specific goals, frustrations, and backgrounds that assisted us on producing the app to be fine tuned towards users that would be the ideal target user base we would like to utilize this app:

Roles & Responsibilities

As the sole designer of this project, I have quite a lot that I need to consider when producing the designs for this app. Some prevalent factors are:

 • Providing convenience for the user to find relevant information
 • Having all the relevant info the user wants in one app
 • Keepin information contained yet visibly clear for the user
 • Giving the user the option to add specific data to the library
 • Allowing the user to navigate data within the character page

The other teammate that worked on this with me is Kurt Pham, who acted as the guiding mentor through the design process. With that mentioned, that's essentially the team we have for producing this app.



Image Title
Image Title
Image Title

The Premiere Fighting Game Mobile Application

Frame Buddy is a pivotal application that will give you the much needed edge to enhance your character's fundamentals!













Character movelists. Character frames. Combos & tips. All on your phone, from a vast library of fighting games.

Frame Buddy is designed to give you the fastest access to a phletora of information. Know when to respond to moves, & whiff punish your opponents!


Bauman Wordpress Portfolio Theme


Bauman Wordpress Portfolio Theme

Bauman Wordpress Portfolio Theme




Promotional Banner & Landing Screen

These visuals were produced to further enhance the brand identity of Frame Buddy



Bauman Wordpress Portfolio Theme
Image Title

App Usage Results

The users have tested out this prototype and have given feedback that reflects how Frame Buddy looks, functions, and displays core elements and information. As a result, the feedback provided about this has been relatively positive, with a lot of components alleviating the issues most users have found, with this wireframe having:

 • Addressed the issue of containing information to one app
 • Character frame data, matchups, combos & tips
 • The convenience saves the user from having to Alt-Tab
 • Reduced time to navigate through in-game menus on older titles
 • Displayed information for the user without feeling overwhelmed






What I've Learned & Personal Thoughts

Having the opportunity to design the UI & UX of Frame Buddy further strengthened my thought process and have a clearer approach to alleviating user pains. Reflecting back on this, despite receiving postiive feedback, there were a couple comments that the users expressed that they wish Frame Buddy would have touched up on furthermore. The main key points that the users wished to see further implemented and/or improved were:


Simplifying Termnilogy Used

Just as in the world of UX, you don't want to overwhelm newcomers with jargon that only experienced individuals know.

Further Elaboration on Matchups

The users wanted more information regarding the matchups of certain characters against one another.

Keeping in Consideration of the Users

A mix of new & experienced players used this app. A fine balance should be achieved at all times to not make it appear one side is preferred over another



As an avid fighting game fan myself, this has definitely given me a greater understanding, appreciation, and, in the case of UI/UX, the essentian fundamentals that goes into having the user engaged throughout the learning process of picking up and seeking data for a difficult genre of video games. With Frame Buddy, the users were definitely pleased to what the app has to offer and how it can serve assistance as a convenient way for players to better understand the fighting games and characters that they play and to create an even more engaging experience during big tournaments and events.

Improving Mandarake Improving Mandarake Improving Mandarake