Final Fight Remix
Redesign
Read More ↓
Final Fight is a series of beat 'em up video games by Japanese publisher Capcom, which began with the arcade release of Final Fight in 1989. It is considered a classic brawler in the arcade game genre with stylish visuals and theming for its time.
Role
User Research
Interface Design
Prototyping
Tools
Procreate
Adobe Photoshop
Adobe Illustrator
Adobe XD
Duration
2 months
Team
Self-Directed
The Problem
In the original arcade game, players do not have many affordances to use weapons strategically. The character selection screen lacks character itself, and the game’s item drop mechanic does not consider accessibility needs.
Final Fight Arcade Game (1989)
The Goal
Remix a classic fighting game without losing the soul of the game. Add distinct affordances for more strategic play and customization to make the game more accessible.
Step 1. Research
To better understand the types of players who would be interested in a Final Fight remix game, I used personas to better inform my later design decisions.
I conducted a competitive analysis by researching similar games in the fighting genre and took extensive notes on the interface elements I’d be redesigning.
Step 2. Ideation
I sketched out low-fidelity wireframes in Procreate to brainstorm what new screens and UI elements could look like based on the What if we… questions and ideas.
1. Make the character select screen more useful to the player?
How Might We…
Solutions:
Added playable characters’ backstory and abilities
Displayed each character’s unique fighting style
See Figure 1.
Figure 1. Character select screen
How Might We…
2. Display collectable items without cluttering the screen?
Solutions:
Added a small inventory bar that grew larger every time the player collected an item
See Figure 2.
Figure 2. Collected item inventory HUD
How Might We…
3. Show item drops in a more accessible way?
Solutions:
Enlarged all items on screen
Include item labels on top of all items on screen
See Figure 3.
Figure 3. Quick item menu option 1
Step 3. Mockups
I designed these mockups in Adobe XD, using Photoshop and Illustrator for more detailed elements. Through XD’s prototype feature, I also animated the screens; in Figure 6-6.1, a player selects a character and then can select the character’s color customization.
Step 4. Usability Testing
From user testing, I found a few issues with the current mockup designs, such as inconsistent written and visual information on the character select screen and unclear instructions/steps on the options menu screen.
Key Takeaways
User wasn’t sure that the options screen saved his changes to the controls
User didn’t understand the accessibility option description and wanted to see what the option would do in game
Audio screen was not completely clear; user wasn’t sure if music slider adjusted music or the volume of music and wasn’t sure what master volume entailed
Character bios and pictures depict the characters differently, giving information about their fighting skill and also lore. There was inconsistent valuable information for the characters
Double selection for the character, selecting to see their fighting style and selecting their color
Odd controls - tap through or keypad switch
Results
As a result, small but significant changes were made to the mockups, focusing on clear and consistent display of information as well as general readability to help the player’s experience.
Figure 8. Character select screen
Figure 8.1. Character color customization screen
Final Fight Remix was an individual final project in the NYU course UI/UX for Games taught by Brian Carr. The project was completed in about 1.5-2 months.