Roll around as a TV on rollerskates while picking up constant speed as you move
UI/UX Designer, Game Designer, Music Composer
Condensing information while keeping it clear.
Reboot's core gameplay loop revolves around "speed channels" and their respective "speed surfaces". Speed channels dictate the player's top speed, and each speed channel correlates to a different threshold of speed. At the start of the game, the player only has access to the first speed channel and can only reach speeds inside that speed channel. By finding speed surfaces that correlate to the color of their current speed channel (or any channels they've unlocked) and passing through them successfully, they unlock the next speed channel and thus increase their current and top speed.
When I joined the Reboot team, the only visualization relating to speed channels given to the player was through the color of the sparks on their skates. While this was a start, it only conveyed what their highest speed channel unlocked was and not which one they were currently in or how close they were to moving into the next channel. My main job was to add in UI that conveyed everything the player needed to know about speed channels without overwhelming them - their current channel, their speed within that channel, channels they have unlocked, and how many channels they have remaining. The first step in that process was to create mockups, of which I created three!
Colors themed around "no signal" TV screens
Too much going on
Not easy to read
Themed around TV volume
Less readable than Mockup #2 but more thematic
Colors are harder to distinguish from each other
Simple and readable
Emphasizes the player's current speed channel
Information is not obvious to newer players
And the winner is... Mockup #2!
Mockup #2 was chosen over the other two since it was the one that conveyed the needed information in the cleanest way possible. The one downside is that the information isn't immediately obvious to newer players, but the "CH 0X" in the top left corner helps connect the mechanics to the context of "channels" in a more direct fashion.
Menus & Screens
Using Reboot's simple aesthetic for readability.
When designing the UI for Reboot, I wanted to make sure it was cohesive with the game's theme, and thankfully Reboot's theme is extremely simple: you're a TV on roller skates going fast. I decided to lean heavily into the old CRT TV aesthetic when designing the UI, taking a lot of inspiration from the very blocky, pixelated visuals that were commonplace with those televisions. Due to the lack of visual freedom possible at the times of those TVs being new, this design approach was done to make best use of their limitations with an emphasis on readability. This translates well into Reboot, where all the information can both be simple to read and be thematically on-point with the game's context.
In order to get the game to work autonomously, my first priority with menus and screens was to make a controls screen to ensure that the player has a resource to learn how to play the game. By using white as a neutral color to define the controller's outline, each button was given its own color to add a level of association between the button and what it does. Lines were also drawn between the button and its respective action to make it even more clear. Buttons that have an action are also visually different from those that don't, with the former using blocky horizontal lines and the latter following the thin outlines of the controller. This layout was then plugged into the level loading screen to ensure that players have the opportunity to see it at least once before getting into the gameplay.
For the main menu, I wanted to stray a little bit away from the CRT inspired design since it was a bit too cold to be the first thing the player sees. I also wanted to show off the main character of the game in the main menu with colors respective of the speed channels to really represent the game as best as possible. As for the buttons, I used the SourceCode Pro font when they aren't selected to give the menu a cleaner look while still retaining a computer-y look. When the buttons are selected, a black bar scrolls over the text and changes it to VT323, which looks like the CRT theme in the other menus. When a button is selected, the black bar spans the entire screen, making the transition from this white background to the other menus with black backgrounds a lot smoother.
HOW TO PLAY SCREEN
While the controls screen let players know what each button does, it only did so in isolation and not with regards to the game as a whole. Players can understand that X is used to "boost", but they had no way of knowing that boosting can only happen on top of speed surfaces. To remedy this, I concepted and programmed a How To Play screen that briefly describes every important aspect of the game. For any action that is related to the controls, the controller layout is shown with the related button highlighted. I also highlighted the important parts of each point to emphasize certain parts of each mechanic. Each point also has a related video to showcase the mechanic along with a white noise transition when a new option is selected to get the player's attention in a thematic way.
Other Gameplay UI
Adding necessary clarity to every single mechanic.
With more time passing into Reboot's development, naturally more mechanics and features were added into the game. While all of this contributes to a more complete and robust gameplay experience, more and more UI needed to be implemented to ensure that players could understand what was going on. Even with the addition of the How To Play screen and the controls displayed in the loading screen and pause menu, testing proved that players were having difficulty with knowing whether they were doing things correctly. I implemented all of the following additions to Reboot's UI to tackle this issue so players can enjoy the game without needing any outside information on what to do!
SPEED SURFACE BOOSTING
During testing, players often had trouble understanding how to properly boost on speed surfaces. To fix this, an indicator above the player's head was added to tell the player not only what to do with the speed surface, but also if they succeed or fail at boosting. An "( X )" appears above their head when entering the speed surface. If they press and hold the X button on the controller, a meter will begin to fill that shows how much speed they will gain from the boost. When they reach the glowing strip at the end of the surface, the meter then reads "RELEASE", telling the player to let go of X. Releasing too early (top gif) or too late (middle gif) means they have failed the boost, but releasing at the right time (bottom gif) results in a successful boost, accompanied by a positive word randomly picked from a custom array!
This addition made testing Reboot a lot smoother and hands-off. Several testers even said that this change not only made the game more fun to play but also more enjoyable to watch!
Drifting became a necessary mechanic in order to navigate the level, but testers had a hard time aiming their drift properly. My solution was simple: add an arrow pointing to where the player will go while drifting. This addition becomes almost necessary at higher speeds, and testing proved that players loved this simple little arrow.
Reboot also has multiple music tracks that change based on the speed channel you are moving in, and players can swap between channels at any time during gameplay. I added in UI that "fast forwards" or "rewinds" through the music tracks with the song's text being scrambled while transitioning! It also displays nothing if you haven't unlocked the song.
Like previously mentioned, you need to unlock songs to play them and that is done by picking up collectibles found in the level. When picked up, a banner shows up in the middle of the screen to ensure players see it. The animation for the banner appearing and disappearing is based off of old TVs turning on and off, with some white noise as the background.