Super Smash Bros | Llengart Main

Super Smash Bros Ultimate

Redesigning the character customization experience to enhance player engagement and creative freedom in a video game.

Super Smash Bros Ultimate: World of Light

Project Type - Solo

Timeline - 2 1/2 Weeks

Role(s) - UX Designer, UI Designer

Tools - Figma, Photoshop

Platform - Nintendo Switch (Game Console)

The main goal of this case study was to design and improve Super Smash Bros Ultimate's fighter customization options to make the overall player experience more enhanced and customizable.

As the UX and UI Designer, my main goal was to improve the game's fighter customization features and gameplay flow in SSB's World of Light story mode.

Background and Establishing Goals

What is this game? And why did I choose it?

Super Smash Bros. Ultimate: World of Light story mode is a single-player campaign where players battle shadow fighters across several extensive locations and unlock/free Fighters and Spirits (the game's version of assisting fighters) from the control of Galeem, a powerful entity seeking to conquer the universe.

As a long time casual gamer, Super Smash Bros has always been one of my favorite video games.

I've played almost every iteration of SSB since its N64 console debut because I enjoy the franchise’s multiplayer platforming/beat-em-up type of gameplay, as well all the fun Nintendo character crossovers and possibilities.

This case study was inspired by a SSB gaming session I had with a friend who wanted to try out the World of Light campaign. In the story mode, players are allowed to pick their main fighter and their team of spirit fighters before starting battle or challenge. And my friend wanted to change their current fighter's default outfit to a different color for fun.

But in order to do this, they had to go through the following process:

Character Selection Process

1. Main Selection Menu - Go left past Spirits to Select Fighter

2. Loading Screen (PAUSES GAMEPLAY)

3. Fighter Selection Main Screen

4. Fighter Selected - Main Choice to Fight

5. Press Left or Right to flip through Color List OR Click Fighter Avatar for Color List

6. Select Fighter with new Outfit choice

7. Loading Screen

8. Return to Main Selection Menu

Watching my friend play through this part of the game made me realize that waiting through the loading screen and clicking past Spirit selection, just to change one part of their fighter’s outfit, delayed them from getting to battle right away.

On top of that, changing the fighter’s outfits and colors was not easy for my friend. I had to point out to them that they could locate outfit thumbnails and manually change their fighter's appearance by clicking on the fighter image in the selection screen.

Watching them go through the fighter selection process made me realize that while the basics of character selection and customization are present, the process and layout isn’t intuitive and accessible enough for players (especially players newer to games like SSB) to navigate through.

Experience Visions and Success Metrics

Analyzing current gameplay and defining project success

To understand how effective a new Fighter customization feature could be for current SSB Ultimate gameplay, it was important to break down the current gameplay and measure it based on the following factors:

1. Usability

2. Desirability

3. Discoverability/Scalability

4. Feasibility

(L to R) Main Screen - Select Fighter

Choose Fighter and/or Fighter Color

Ready to Fight!

What works

Current selection screens are clear and dynamic,
Players understand how to choose their fighters or Spirits and how to Fight/start their battle.
In Choose Your Fighter, all Fighter characters are laid out clearly in a grid that could be expanded and scalable for future Fighter additions, as the story mode progresses.

1. Main Selection Menu - No FAST SELECTION to get to Fighters

2. Loading Screen (PAUSES GAMEPLAY)

5. Press L or R to flip through Color List OR Click Fighter Avatar for Color List (CONTROLS NOT INTUITIVE)

What could be improved

1. While overall navigation is clear, Players have to click through the Fight and Spirits options FIRST before selecting Fighter. Players also have to wait for main Fighter Selection screen to load before Fighter Selection.

Conclusion: Usability Issue - Scrolling through the Main Screen and waiting for the Selection screen to load in the loading screen disrupts gameplay flow!

2. Newer or casual Players may not realize they could change Outfits by clicking on their Fighter or L on the Switch Controller.

Conclusion: Accessibility Issue - Visual player controls (ex. press L or R for action) for selecting Fighter Outfit are not intuitive and laid out for players.

3. Depending on Fighter selected, Player only allowed to pick select number of Outfits. (Max 8)

Conclusion: Desirability Issue - Limited amount of Outfits don't allow Players freedom to customize.

So based on our experience visions, what are the feature's Success Metrics?
I measured the success of Fighter Outfit customization by:

How adding/customizing Fighter outfits expands on current SSB gameplay.
How successfully Players can navigate and understand how to locate and select new Outfits.
How well Players are able to freely personalize their fighters aka how engaged are Players?

Player Feedback and Research

Defining our target players and citing design influences

To go beyond my personal experiences as a SSB player, I read though SSB online forums and watched a lot of SSB play throughs of SSB on YouTube. I especially focused on how these players played the games (ex. Step by step commentary) and how they responded to the character selection process. (Ex. How did these players react to the loading screens when selecting their fighter character vs. how did they respond selecting their fighter skins/costumes)

Post-research, I noticed that the following players were the perfect target group for a new customization feature:

Examples of Custom Content Outfits made by SSB CC Creators

Example of Community Poll asking players about character customization

1. Players who generally like to personalize their fighters with alternative colors or outfits.

2. Players who are fans of specific Fighters and wanted more representation and outfit expansions for their favorite Fighters. For example, those who want updated skins from Mario’s current games, those who want retro versions of Donkey Kong, and etc.

3. Players who are Modders/The Modding Community aka those who code modifications to freely explore and experiment with customized outfits. (Note: As long as the mods are not offensive and relevant to the Character and SSB gameplay!)

Mii Fighters

Mii Fighters: Settings and Select Outfit Screens

To find inspiration for updating Fighter Customization, I revisited the game's options for the Mii Fighters.

In SSB Ultimate, Mii Fighters (Brawler, Swordsman, and Gunner) AND their respective customizations are immediately unlocked when you start the World of Light campaign. And it is important to note that the Mii Fighter menu screens already have Fighter customization UI in place! For instance, Players are able to access their customized Miis and freely select or edit their Mii Fighters' appearances, move sets, and even voices before battling.

So based on these pre-existing Mii Fighter customization screens, I believe it is possible to repurpose these same menu designs and concepts for all SSB Fighter screens, which could further personalize and enhance the Fighter selection process for all players.

The Main Takeaway:

The game already has customization UI in place, just implement it for ALL fighters!
Rather than creating a completely new customization feature from scratch, reuse the existing Mii Fighter UI as a working template in SSB’s current screens. Reusing existing game material makes it more feasible and easy for the game’s programmers, game artists, and other stakeholders/developers to make adjustments and develop the feature over time.

Flow Chart and Wireframes

For the Flow Chart, I mapped out the player journey of selecting their Fighter character from either the main selection menu (Fighter/Spirit select before battle) or from the side menu on the World of Light Map.

I kept most of the original gameplay screens and added work in progress wireframes into the flow chart to visualize how my wireframes could fit into the existing flow.

I went back and forth with the wireframes and the gameplay flow chart to determine if my wireframes matched or enhanced the existing SSB gameplay.

The following descriptions below highlight significant notes and changes in the wireframes:

Fighter Outfit Menu (Pop Up)

Changes Fighter outfit only, without having to go back and forth to Fighter selection.
Expands customization, while maintaining same UI as outfit selection in Fighter Selection menu.

Fighter Outfit Menu (Expanded)

Inspired by Mii Fighters' Outfit selection
Can select existing Outfits or upload custom Personalized outfits
Goes back to pop up after selection

Final Mockups

SSB Character Home Screen Select Fighter 1.png

New Main Fighter/Spirit Menu Selection Screen

Select Fighter Selection from Main Menu

SSB Character Home Screen Expanded CC.png

Click Outfit Tab, Select new Fighter Color or Expand Outfit Selection

Expanded Menu : Choose more Outfits, Edit Outfits (ex. delete, duplicate, etc,), upload Custom Content, and Select/Confirm Outfit

SSB Character Home Screen Select Fighter 2.png

Selected Outfit from Expanded menu will show up in Pop Up Menu

Return back to Fighter Selection Screen from Main Menu

Side by Side Comparison

Fight Button is now centered, Fighter selection is easily selectable without scrolling through Spirits

Cut out loading screen and character selection and created pop up outfit menu in main screen

New option to select, edit, and upload more fighter outfits in Fighter pop up menu

Differences between the Original SSB Fighter selection screens and the Mockups:

Ability to select Fighter Skins in new menu tab, without loading Choose your Fighter screen - More Options!
Reorganization of Main Fighter and Spirit selection UI to visually distinguish them from each other.
New menu option to expand and add more Fighter Outfits through custom content

Testing for Color Blindness

Blue-Blind/Tritanopia

Red-Blind/Protanopia

Monochromancy/Achromatopsia

Green-Blind/Deuteranopia

In addition to designing the new mockups, I checked the accessibility of my mockup screens by running them through a color blind vision simulator.

I did this because as a designer, I wanted to account for players who may have vision impairments playing the game and ensure that my design choices, from the visual hierarchy to the color choices, were accessible and clear for all players to understand and enjoy.

Additionally, cross-checking my designs in the vision simulator aided me by highlighting which visuals (ex. buttons, text size, etc) were not visible enough or missing in the mockups.

Conclusion

What did I learn? What could be considered for the future?

To revisit the main goal, this proposed feature expands, enhances, and personalizes Fighter customization for SSB Ultimate: World of Light.

This redesigned Fighter Outfit feature creates new Outfit options for players WITHOUT completely changing the existing gameplay screens, so it is feasible for collaborating stakeholders such as the game developers, programmers, and the art teams to make any modifications further down the line.

This overall demonstrates that the process of selecting Fighter outfits could be more enhanced and personalized for both new and seasoned SSB players, while simultaneously maintaining and enhancing the existing gameplay flows.

How did I grow as a UX designer?

Redesigning the UX/UI for Super Smash Bros Ultimate was a really fun personal assignment.

As a fan of the game and as a designer, I enjoyed approaching the game from a UX/game design perspective and understanding what makes the video game experience successful or unsuccessful in a nuanced way.

It was definitely a fun challenge to design for such an established game franchise like Super Smash Bros because I had to be mindful and compromise between what could amp the fun factor for players (aka player wants) and what the business (namely Nintendo developers, producers, designers, etc.) would expect for the game’s long-term success.

This assignment confirms that as a UX designer, I enjoy designing aspects of games that will maximize the most fun and convenience for players and maintain a consistent tone with the rest of the game.

Thoughts for future consideration

If I were to develop this concept further or if I worked on this project with a team, I would definitely keep these future factors in consideration.

1. Budget - Discuss with other producers and stakeholders the monetary budget necessary to create and implement these new features.

2. Time - Being mindful of time/schedule constraints and how new customization will be prioritized and effect the working pipeline.

3. Research and Testing - In order to make necessary adjustments, will need time to fully test out outfit customization with players and gain user insight on what works and what needs to be fixed.