Sideswipe Art / Design
From 2019-2021 I contributed to the development and launch of mobile game from Psyonix. Sideswipe was created with a small team of passionate developers to bring the memorable action and fun of the Rocket League franchise to a broader audience. Sideswipe encapsulates a new approachable format that is a twist on the classic Rocket League gameplay for the mobile platforms. I was fortunate to contribute in various capacities and gain new insight for developing a mobile game on the UE platform.
Below you will find direct examples of my contributions for the overall user interface design, art, and visual direction.
User Interface Design, Wireframes, Art Direction, Visual Design
Clear and Approachable
Sideswipe combines the familiarity of the classic Rocket League Soccar gameplay with a new simplified presentation that expands on the engaging physics based gameplay. Rather than controlling vehicles in a fully accessible 3D space, Sideswipe streamlines gameplay to sideview perspective that allows players to focus more quickly on performing awesome maneuverers and tricks with their team mates.
Surfacing what's Important
Sideswipe highlights each players own progress in a more simplified and approachable way so that the most relevant stats and info are quickly surfaced between each round of gameplay.
Rethinking Boost Mechanics
I worked with the team to adapt a popular ui display element from Rocket League to the SideSwipe format. The challenge was figuring out how to depict boost amount and its overall status during gameplay while keeping the overall presence minimal and clean to avoid screen clutter / cognitive overload.
In Rocket League the players boost amount is persistent in the screen corner and displays both numerical and graph values. This ability is finite and refilled by driving over boost pads scattered throughout each map. This feature is bound to either a controller or key binding. For SideSwipe the mechanic is altered so that boost amount is automatically refilled once a players car is on the ground and is no longer activating the ability. Boost is infinite and does not require the player to manually refill. The added challenge was to solve for displaying the boost amount so that it is not obscured by the player pressing the boost button on the device screen.
Our initial approach identified 3 key points to bring awareness to for the boost state. Near Full, Empty, and Low. We mapped these to colors Green, Yellow, and Red. We also explored different ways to visualize these elements on screen. Our initial solution was using a linear bar graphic to depict these different states. During testing we found this shape was limited in conveying the variable fil states and the animation timings constrained by the overall width / height. We also experimented with a more vertical orientation as well as a triangular shape that matched the player marker footprint, but these still suffered from the initial issues.
We ultimately found the circular shape was able to capture enough attention so that the player had a reasonable amount of time to discern the fill states as it changed. Later during testing we also found adding an indicator for the flip reset helped players discern if that ability was available. This ui was visualized as a small circle within the boost meter that changed from green to white depending on if it was active. Flips are an ability that allows players gain additional momentum and hit the soccar ball with more impact. Flips reset once a player touches a surface.
Quick Chat
Sideswipe introduces a new take on Rocket League's quick chat customization that allows players to choose and display various emotes during gameplay. While traditional text chat is disabled in Sideswipe, players are still able to send messages via quick chat to express emotion and team coordination. Below are examples of the initial set of quick chat visuals I created for launch.
Quick Chat Controls
During development I worked closely with the product design / engineer Robert Garza to help iterate on possible interaction ideas to surface quick chat visuals during gameplay. Robert was able to try various methods of interaction designs and gather feedback in rapid succession. There were a handful of ideas concepted, but we landed on a ui convention that felt easily approachable for new players while also not obscuring core gameplay.
I also explored the idea of enhancing the quick chat presence with animations to add a bit more character to each emote. The idea was to eventually support custom animations in unreal motion graphics editor timeline using basic scale, rotation, alpha, and x/y movements for various elements.
The initial set of quick chat emotes also utilized a single font family (Bourgeois) and simple styling techniques with the hopes of being able to easily recreate the text styling in the editor. The single font choice restriction was initially due to licensing, but it was made apparent that having a singular font family with global character support was the easiest way to plan for localization in the future.
Competitive Play
Continuing with the competitive play tradition of Rocket League, Sideswipe also initially consisted of 3 core game modes that offer ranked progression for players. Below are examples of the initial designs for beta I created that embrace a more full screen immersive approach for mode selection.
A reductive visual design concept for Competitive Play (below) was created to see how far back visuals would be scaled and exploring a more minimal style.
For global launch a more traditional floating button design for play modes was used. This version reduces the full screen visual impact in favor for a more focused and clear presentation. (below)
Competitive Rank Visual Refresh
The initial approach for Sideswipe's competitive ranks were expanded to include two new ranks for each tier, while designing a new top rank "Grand Champion". Since each tier consisted of 5 ranks, a more simplified visual language was used to denote each number instead of the traditional abstract shapes utilized in Rocket League.
Player Customization
Sideswipe maintains a similar level of deep player customization for both in game vehicles as well as 2D player avatar visuals. While the offerings are very similar to Rocket League, the team re configured the way in which these two features are accessed within the game as well as the ui presentation.
Prototype and Concepts
Throughout development of complex features like the Garage we utilized quick prototype mockups and interactive player flows created with Adobe XD to test out ideas and interactions. We preferred creating initial low fidelity ui prototypes to determine the best approach for our goals and intent.
Item Reveal
Below are a few concepts that detailed how I initially approached in game item reveal messaging and visuals.
Avatars
We included avatar customization as a way for players to further expand upon their in game avatar player display. These are primarily used to express identity in menus, goal scores, and end of match celebration.
More to Come Soon!