Role:

- Solo UX Designer

- Solo UI Researcher

Timeline: Summer 2023 (estimated one week time span)

Overview: Super Monkey Ball is a series by Sega games. Banana Blitz is one of the series more known games and has even had an HD remaster. This remaster excited fans of the series. However the UI/UX redesigns disappointed a countless amount of fans. This project was a passion project to redesign this beloved games UI/UX.

Research and Process:

An HD remaster that overlooked UI/UX.

When looking at this game and figuring out how to approach its redesign I wanted to compare this redesigns not to the original games Super Monkey Ball's mother company, Sega, has produced. I looked into games such as Sonic and Pacman to draw inspiration from for this UI/UX redesign.

- Research needed to be company oriented, Sega often has distinct UI/UX trends they follow in all their games, this is something I wanted to stay faithful too.

- Researched old and new UI/UX for this specific monkey ball game looking back at its old design.

- Interviewed fans of the game, asking important questions surrounding color choice and layout aspects.

Before + After Screens:

Bootup Screen:

When reworking the bootup screen the biggest issue many players have is the overwhelming amount of yellow. I wanted to stay on theme and still made yellow a central color but added blue to the background for more contrast. Along with this adding the main mascot for the game, AiAi to the bootup screen helps fill much of the space that the original struggles to cover. Introducing the mascot helps players immerse themselves in the world they will be entering when playing this game.

- Lack of contrast was this screens biggest issue

- Having monochromatic yellow in the original made it difficult to see visuals placed in the background, adding blue lets the user fully enjoy all the graphics that enhance this screen

- Adding AiAi, the mascot helps give the bootup screen more visual impact and life

Main Menu Screen:

The main menu screen faces very similar problems to the bootup page, where the majority of the contrast is lacking because of the yellow background. Aside from this, the black bar placed in the backing of the screen can confuse players as it could be confused for a selection option. I wanted to visually clear this screen up making sure no player would be confused with how this menu navigated.

- The selection option itself appears when the player hovers over a specific option, though it can be a bit hard to see with the multiple visuals for each option on this screen

- Having one visual instead of multiple on the screen instead of multiple makes it easier to guide the eye of users

- Icons are colored and enlarged to create more contrast for the user, making everything easier to see

Options Menu:

The options menu to a lot of fans feels clunky to look at. While it keeps the theme of having sharp edges and shapes like the other screens, the options menu feels like it's much older than the other menus. This is due to the usage of the gray background making the bright yellow on top feel washed out. The goal here was to modernize the screen and make is seem more slick.

- Using a solid black background instead of gray negates the chance of the yellow being washed out and allows for higher contrast and visibility

- Moving the sub-options to the side keeps the continuity of the previously designed screens

- Allowing currency to all be in one section, lets the player associate all items together making them easier to keep track off (ex: stardust, candy and mega evolution stones)

- Using a bolder font helps the player read through this screens options and settings much quicker, saving time

Character Selection Screen:

The character select screen has no clear indication of what character the player is choosing, the slight tinted background on, again, the yellow makes its difficult to clarify what character the user is hovering. This can be countered by removing the yellow background for the contrasted blue one and giving each character more space on the screen. Spacing the characters out gives the eye time to relax and select a character with ease.

- Bubbling the characters allowed for each unique character to have space to fully showcase their dynamic personalities

- Applying green over the hover makes a clear indication of what character the player is looking at with no confusion

- Repurposing the black bar in the background into a final selection still utilizes the original design Sega created

Stage Selection:

The stage selection screen struggles with communicating valuable information to the player such as world selections and a clear stage selection. This screen does not provide the player with a recognizable stage viewer as all the stages blur together with the same green background. The final goal here was the make a selection screen that had all the information a player would need when picking a map to play on.

- The after screens allow players to have a clear world selection screen

- Moving the high score and clear time features make it easier for users to read these numbers

- Keeping the same bubble and green features from the other screens, allow for an easier transition between screens

REFLECTIONS:

Color theory: When redesigning this UI/UX I realized how valuable the knowledge of the color wheel is. Being able to pick and place colors in a way that appeals to the masses is much easier said than done. Studying contrast and shades that can work together was a focus of this project and the skills I developed are much stronger now.

Spacing: Through this project, I also learned closer is not always better, being able to give the users eye time to  register all the information that is on the screen is crucial for a good experience. Knowing when screens should be broken up and when they should be put together is important for user experience. 

Extra Screens: Screens created but not used in the final redesign