Street Fighter V: Champion Edition - UX/UI Case Study
(2020)
▶ UX Design - UI Design - Visual Design
▶ Illustrator - Photoshop
Introduction
Street Fighter V is a fighting game released in 2016 on PC and the Playstation 4. The game has had multiple updates over the last four years with Street Fighter V: Champion Edition being the latest update.
While the game has been popular it has drawn criticism from fans, with the game's UI and UX among the complaints.
The goal of this case study is to identify opportunities to improve the user experience of Street Fighter V: Champion Edition, and to design an interface that meets those user needs.
Analysis and Research
I began by mapping the user flow of Street Fighter V: Champion Edition and divided the flow into four main components: Offline modes, Online modes, Gameplay, and Settings and Customisation.
From my observations of the interface flow, I identified the following opportunities for improvement:
- The main menu shows 16 selectable options on the one screen which can be overbearing
- Certain online and offline modes shown on the main menu with no clear delineation
- Other online and offline features are buried within multiple menus and are difficult to find (e.g. The game's tutorial can be found in the 'Story' menu)
- While there are multiple ways to search for Ranked and Casual matches, the options for them are in different menus (Ranked/Casual match, Network Match request, Training)
- Users set their online match preferences from the 'Battle Settings' menu is on the main screen before selecting an online gameplay option
- Different replay features are split within different menus. Users can view and save recent replays from the 'Fighter Profile' menu, however replays that have been saved are found in the 'CFN menu' instead
- The friends lists and behaviour kept within the CFN menu and could be made more visible
- There is anecdotal evidence of users having an issue playing online against 'Smurf accounts', experienced players that create new accounts and dominate low-ranking players
In addition to my observations I did some research to find common issues from the Street Fighter V playerbase, and found the following UX centric issues to be among the most common complaints:
- Lack of an online training mode
- Ranked mode doesn't offer players the chance to choose their character from the Character Select screen
- Lack of messaging and voice chat
- Lack of a ping indicator for Battle Lounges
- Unlimited rematches in ranked mode
- There is no indication of how long it will take to find a casual or ranked match
- Lack of a region filter when searching for Battle Lounges
- Lack of a rank filter when searching for Battle Lounges
- The Friends List is unwieldy and difficult to manage
- Lack of an option to preview DLC characters before purchase
While this case study is based on analysis and research, the case study is working under the following assumptions:
- Users see Online and Offline modes with equal value
- Users want a clear delineation between Online and Offline game modes
- The 'Smurf account' issue of experienced players creating new accounts is due to these players not wanting to lose ranking points when learning a new character (Street Fighter V's ranking system is tied to the player profile and not to individual characters)
Planning and Wireframing
Once I had enough information I started designing the following wireframes for an improved user interface.
I set myself the limitation of where possible only working with the current features of the game. However in order to meet user needs and to improve the experience of the game I made exemptions for the following features:
- In-game messaging capabilities
- Changing the online ranking system to apply to individual characters, instead of to player profile
- Addition of a rotating free character trial for players to preview
- Adding online functionality to the game's training mode
Main menu - Key changes
- Main menu options have been simplified into four main categories, with clear delineations between offline modes, online modes and customisations and settings
- Rank is now displayed as a character rank
- Information relevant to the player (Name, character rank, in-game currencies, game invites and messages) is now visible from the top bar and is visible from anywhere in the main menu flow
- Access to a 'Battle Profile' has now been added, make character stats, invites and notifications accessible from anywhere in the main menu flow
- Information on challenge progression is now visible on the main menu*
- Announcements and events are now always visible on the main menu
- Shortcut buttons give users the ability to jump to their preferred game mode with a single button press (These can be re-bindable so users can set their preferred modes)
1. Size and position of the Announcements panel was changed to give more breathing room
2. Progression information on the game's 'Extra Battle' rewards were added to the main menu
3. The 'Battle Profile' section was renamed to 'Player Center'
Offline modes - Key changes
- All offline gameplay modes are in the one place
- Alternate single player modes such as 'Survival' and 'Extra Battle' are more visible here
1. Size and position of the feature are and contextual copy was changed
2. Trial character and Season Pass promotions were bundled into the Announcements panel carousel
3. The 'Challenges' and 'Extra Battle' tracking panels were made visible on the Offline mode menu
Online modes - Key changes
- All online gameplay modes are in the same place now (with the exception of notifications)
- Replay options have been consolidated into its own menu
- The Friends list has been brought forward with friend management options
- Each online mode has an indicator of how many players are online playing that mode
- An option for 'Online training mode' has been added
1. Invite notifications were removed from the 'Battle Lounge' and 'Online Training' buttons
2. Size and position of the feature art was changed
Online matchmaking - Key changes
- The option to jump to training mode while searching for an opponent has been added to the Ranked Match menu
1. The "Player rankings" option was removed from this screen as it is already in the Online menu
Battle Profile - Key changes
- The Battle Profile can be accessed at any time in the flow by pressing the Options/Menu button
- Player statistics, progression tracking, notifications and invites are accessible here
- In addition to high-level character stats users have the option to jump to the detailed 'Online Battle Stats' section for more detail
1. To reduce the amount of elements in this section, components in the Challenges column were moved to the Main Menu 2. A graphic of additional character stats was added to the player stats section
Stage Select - Key changes
- Stage art occupies the whole background for greater visibility
- Thumbnails are now landscape rather than portrait orientation to make stages easier to identify
- Shortcuts added to test and remap buttons
1. A Stage Select timer was added later
2. The world map background was removed to make the stage design more prominent 3. Testing and remapping buttons have been combined into a single shortcut
Character select - Key changes
- Ranked and casual matches now go to character select to allow players to adjust for better match-ups
- Name, region, community group and character rank are displayed for both players
- Displayed character rank changes based on character selected
- A simple summary of the character playstyle is added to give context to newer players
- With character select added to online matches a blind pick option has been added for players who don't want their opponent to know who they picked
- Buttons can now be remapped and tested from the character select menu
V-Skills and V-Triggers - Key changes
- Button inputs for V-Skill and V-Triggers (selectable character abilities) are displayed to help give context to new players
- V-Skill and V-Trigger options are displayed with an animation and description to help users unfamiliar to the game make their decision
Versus Screen - Key changes
- Button inputs for V-Skill and V-Triggers (selectable character abilities) are displayed
UI Design
Once the wireframes were completed I worked on the visual design of the UI.
My approach was to create a sharp and clean design, referencing elements of Street Fighter V's existing visual identity while making sure the interface was flexible enough to accommodate for any potential features that could be added in the future.
The most iconic aspect of the Street Fighter series is it's characters, so I made the characters were the hero of the interface. The intention is that a high detail in-game model model would animate in slow motion while the overlaid menu's clean, sharp shapes highlight the game's existing 'V' motif and allow the character model to shine.
For variety the displayed character will be different each time the main menu is accessed, and the user would have an option to select a favourite display character.
Main Menu
Play Offline
Play Online
Play Online - Friends list
Play Online - Ranked match
Shop
Player Center
Stage Select
Character Select - Select Character
Character Select - Select Costume/Colour
Character Select - Select V-Skill/V-Trigger
Versus Screen
Icon design
Sources and references
- Dead End Thrills (Screenshots)
- Unsplash.com (Stock photos)
- Capcom - Shadaloo Combat Research Institute (Game art assets)
- Streetfighter.com (Game art assets)
- Streetfighter.fandom.com/wiki (Game art assets, screenshots)
- Street Fighter Reddit (r/SF) - SFV Fix Request Poll
- Street Fighter Reddit (r/SF) - Smurf account complaints