Logo for Grab Game's Knockout League, an energizing boxing game for VR that features an innovative combat system with a variety of uniquely different opponents to fight. As the lead and sole UI/UX designer, I was responsible for designing a UI style that would work with the comical mood of the game while maintaining a fresh and modern image, and making a user experience that was both streamlined and took advantage of the Virtual Reality space. Additional responsibilities included logos for each character, various assets to decorate the in-game environment, marketing materials, and more.
(Designed in Illustrator & Photoshop / Made in Unreal)
Players begin the experience in Doug’s gym, former boxing champion. After selecting a save file, players can select different modes of play or view the fruits of their efforts in trophy form. Doug offers various training exercises to get his students ready to take on the tough and wacky characters of Knockout League.
The pop-up menu can be accessed at the touch of a button at any time to move to any different part of Doug’s gym, easily recalibrate one’s height, or to view how many calories have been burned thus far.
Players can change their grip style via the settings menu.
At the end of each training session, players can view current and past best scores to see their growth.
There is a leaderboard for the competitive types.
Evolution of the flow for KOL's training hub. This was my first time creating UX flows, so I started with a text-based wireframe, then made a new version with the first pass of UI that I designed, and then finally updated it all with to the final version of UI. We originally attempted UI elements made of 3D models but quickly learned that it needlessly ate away at our frame rate. The first UI style iterations I attempted were also admittedly quite ugly, and gave me good motivation to create a better look.
When we decided to pivot from 3D models to 2D planes for the UI, it fell on me to create something fresher and better. With the first iteration, I relied only on iconography, and with the second I added text for greater clarity. Eventually we decided on using blue for the training space for greater readability, and removed the “Training” header as it made the scene too cluttered and clunky.
Design explorations for the pop-up menu, based on the newly established UI look. We initially thought it would be fun for the pop-up menu to be attached to the player’s non-dominant hand, and would spawn when the player raised their hand (controller) to their face. However it was evident that this would be rather annoying, and decided that bringing up the pop-up menu should be done with as little effort as possible.
The final version of the pop-up menu, complete with every function we thought players would want to easily access.
We decided to have the Fight select menu be situated in a film room and appear as though it were being projected on a screen. The concepting of this menu happened side by side with the game’s UI style overhaul, and some of the redesign ideas can be seen in the first mock-up here.
The UX flow for the Fight menu after we had decided on an overall layout. We wanted to keep it as organized and clear as possible, keeping buttons far apart to avoid unintentional button selections, while proudly displaying the character art.
The first version we approved and implemented in-game to test run. Each circuit features three different fighters, each with their own unique attacks and styles. The information button on the top right toggles a display for the player’s match history with the selected fighter.
The final design that now appears in-game, which features unique trophy imagery for each circuit, the Leaderboards button in purple to denote that it brings up a unique menu, and a Cinematic button for the player to rewatch the introductory video of a player they’ve previously fought.
The primary challenge I faced with the Leaderboard menu was fitting all necessary information without making a cluttered mess of tiny text. For this screen, I referenced both fighting game and mobile game leaderboard menus. For the final version of the Leaderboard menu, I incorporated imagery into the buttons and header to take advantage of the available space I could work with.
Select logos I designed for some of the characters from Knockout League. These appear in the game when the characters are introduced before each fight, and in promotional material.
One of my many tasks included designing thematically relevant posters, banners, and other signage to decorate the Doug’s gym and make it come to life.
Achievement iconography.