BIGSHOT BRAWLERS - MOCK UI

  • Role: UX Design

  • Genre: Fighting

  • Engine: Unity 3D

  • School: DigiPen Institute of Technology

  • Total Dev Time: 2020; 1ish months

  • Platform: Windows

Bigshot Brawlers was a class assignment while I attended DigiPen and it quickly became one of the things I'm most proud of from my time there. The assignment was to create a main menu for a game that didn't exist, with no restrictions on creativity and style. Given that this was a title fictionally aimed at children, I took inspiration from the dynamic fun actiony styles of games like Super Smash Bros. Ultimate  and Team Sonic Racing with a focus on the UI being fun to look at and interact with. My goal was to make sure there wasn't a static screen within the whole project, that everything you interacted with was loud, in your face, and ready to go, that the user would probably spend at least 30 seconds screwing around in the menu because it was just fun to do so. It was a major learning experience on a technical level as I had not made anything like this before.

press to zoom
press to zoom
press to zoom
press to zoom

TASKS / RESPONSIBILITIES

  • Sketching and blocking out wireframes in Adobe XD

  • Transferring assets from Adobe XD to Photoshop to Unity 3D

  • Animation of UI assets

  • Authoring of all code in C#

  • Constructing the UI within Unity 3D

  • Editing and implementation of all audio assets

  • Perform and record announcer voice audio

PROCESS

First and foremost I did research into games similar to mine in terms of genre and audience (competitive fighting/racing multiplayer games for teenagers), compiling a list of similarities or things that stood out to me that I think I should use for our game. I then went ahead and began sketching wireframes and outlining what the feedback and visual language for each piece of the UI would be. From there it was a matter of going into Adobe XD to recreate the sketches I had made into fully fledged useable wireframes that I could also import to Unity or Photoshop if I needed to tweak any visual assets. I then put the whole thing together in Unity, animating each piece of feedback until I was satisfied.

The overall style was to utilize bold dynamic lines and colors with asymmetrical organization to create a feeling of action and movement within the menu. Since our audience was going to be a bit more open in terms of experience with games, I went ahead with using icons as often as possible to help convey the idea of each function, and made sure each icon used was an animated active participant in contributing to  that action  energy present in the rest of the menu. Finally with the sound design, I didn't want the menu to feel like it was separate from the action so I tried to use action impact sounds as often as possible to convey that feeling of physicality that you would get from the game and used an announcer voice for the big main buttons to hype you up for the game.