SKYLANDERS: SUPERCHARGERS

UI ARTIST - Xbox One (2015)

Developed from 2013 to 2015, SuperChargers sought to reinvent the UI of Skylanders games. For menu screens, we created a look based around enchanted ephemera - living magical cards and paper - which would float and bob, reacting to what happened around them. In managing and customizing vehicles, this approach focused on blueprints.

I drove this style development, creating the images below, patterns and color language for our cards, animated mockups of transitions, and many final assets. I also designed and animated the gameplay HUD and other related systems. If you'd like to read more about designing process for the HUD, check out this article.

This design summarizes a player's performance against a number of objectives, and awards points toward their overall Portal Master Rank. The stars above each card fill with light in proportion to their completion, and brilliantly flare to full brightness once achieved.

Created as a final visual proof of style, and guide for implementation.

The carousel of cards across the bottom center provide access to deeper information about your current gameplay, team, and collection. The card in the top right shows your current active objective.

Created as a final visual proof of style, and guide for implementation.

The Blueprint system allows the player to view and customize their current vehicle. Here they see its elemental alignment, what type of terrain it's meant for, and bar graphs of its capabilities.

The Blueprint system also allows players to assign collectable Mods to their vehicle. These mods start as white diagrams, which become full color once collected.

Selecting a Mod updates the vehicle's Stat bars in the top right, demonstrating which capabilities will be boosted or impacted.

This modal HUD reflects a Skylander or Vehicle (depending on if the player is on foot or riding).

- For Skylanders, it shows health, XP, currency, and name, wrapped around a 2D portrait.
- For Vehicles: armor and collected Gearbits, around a dynamically animated 3D view of the driving Skylander.

I designed and animated this HUD, and created all 2D character/vehicle portraits.

In the Upgrades screen, the player can increase the level of their vehicle's armor or attack. The interface allows for left/right selection.

I also created the large curved meters as 2D assets.

For 95% of production, this was the game's logo, created to match preceding franchise logos, but with the subtitle in metallic rose gold.

At this point, the game name was "Super Chargers", to refer to the vehicles. Later, it would be finalized as "SuperChargers", to refer to the new Skylanders who get the most performance from the vehicles.

At one point, we planned to produce a sub-series of games centered around vehicle activities. Each would live under the Super Chargers brand, with its own unique logo treatment for the activity.

An early concept for the game's Map, imagining it as a collage of scraps from other maps. These scraps, made by different cultures and explorers, would be linked together by handwritten notes and cord.

A second concept, similar to what we shipped, where the map is a single enchanted work. Each island differs in color, contour, and detail, with a single bold iconic identifier as a unique landmark.

< PREVIOUS PROJECT

NEXT PROJECT >