Street Fighter V: Champion Edition - UX/UI Case Study
▶ UX Design - UI Design - Visual Design
▶ Illustrator - Photoshop


1. Introduction

2. Analysis and Research

3. Planning and Wireframing

4. UI Design


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:

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:

While this case study is based on analysis and research, the case study is working under the following assumptions:

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:

Main menu - Key changes

*During the design phase the following changes were made:
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
*During the design phase the following changes were made:
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
*During the design phase the following changes were made:
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
*During the design phase the following changes were made:
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
*During the design phase the following changes were made:
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
*During the design phase the following changes were made:
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


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