REBOOT

REBOOT

REBOOT

Roll around as a TV on rollerskates while picking up constant speed as you move

ROLES:

UI/UX Designer, Game Designer, Music Composer

DEV TIME:

ENGINE:

10 Weeks 

Unity

MY ROLES

Speed Channels

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!

MOCKUP #1

MOCKUP #2

MOCKUP #3

  • Colors themed around "no signal" TV screens

  • Too much going on

  • Not easy to read

  • Extremely abstracted

  • 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.

CONTROLS/LOADING SCREEN

INSPIRATION

ControlsLoading.gif

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.

MAIN MENU

ORIGINAL MOCKUP

MainMenu.gif

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

INSPIRATION

HowToPlay.gif

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

tooearlyUI.gif
toolateUI.gif
perfectUI.gif

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

driftUI.gif

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.

CHANGING MUSIC

songUI.gif

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.

COLLECTIBLES

collectablesUI.gif

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.

STICKERZ

Because of the audio system implemented into Reboot that allows for songs to add tracks as the player speeds up, I tried to focus on making a song that could be split up into multiple parts. By starting with fast paced percussion, the main bassline is then introduced on top of a subtle synth. For the higher speeds, an actual kick-snare pattern comes in to give the song a stronger feel of impact.

MUSIC COMPOSER

UI/UX DESIGNER

THE TEAM

RACHEL

BUSSONE

Producer

JAYMEE

FULCHER

Producer

DAKOTA

WILLIAMS

Lead Designer, Level Designer

JOSH

FORCHHEIMER

Lead Designer, Audio Designer, Music Composer

HARRY

GOETZ

Systems Designer, Level Designer

LEONARDO

ROBLES GONZALEZ

UI/UX Designer, General Designer, Music Composer

WALTER

HILL

Lead Programmer

JACOB

BIEDERMAN

Programmer

BEN

STRONG

Programmer

HANNAH

GREINER

Lead Artist

LEANNA

RUSSELL

Environment Artist

Website designed by Leonardo Robles Gonzalez

Website powered by Wix

  • Twitter Social Icon
  • LinkedIn Social Icon
  • SoundCloud Social Icon
  • YouTube Social Icon
  • Itch.io Social Icon