SKYLANDERS: LOST ISLANDS

UI LEAD ARTIST - Mobile (2012-2013)

Skylanders: Lost Islands was a kingdom-building app done the Skylands way. We created a new rendering pipeline, spent months researching and perfecting the game's various cycles of use, and wrapped it in a UI that fused the tone of Skylanders with the needs of a mobile app.

I created the visual style for the UI, built out many of the original screens, and produced icons and animations used throughout. After launch, I stayed on for a year to refine and expand these systems, and create weekly promotional ads for special events and in-game sales.

Lost Islands presents a top-down isometric view of your islands, along with all of your structures and Skylanders.

Across the top UI bar are major statistics, with further depth for each accessible by tapping its purple button. In the bottom left is the Quest Scroll, providing specific activities to complete. The purple banner in the bottom right expands to present a main menu of management controls (Build, Move, Options, Social, and Skylander Toy Link)

Here, a player can link a physical Skylander figure with the game, which unlocks their availability for quests and other activities.

Once a code is input, the Skylander appears in a burst of light and energy.

The UI's Quest Scroll presents activities for players' Skylanders to perform.

In this diorama view, the animated Skylander looks on.

Crops are a vital part of the Lost Islands cycle - they provide energy Skylanders will need on their adventures.

This menu shows a plant, its elemental alignment (highlighted on certain days of the week for a harvest bonus), the length of growth time, the energy that can be harvested, plus the cost to plant it.

From the Social Menu, a player can link their game with accounts on Facebook or Activision's Activate network. The system let players and their friends help each others' islands by sending and receiving Kudos (a form of useful in-game currency).

In their travels, players encounter much that begs for their attention. We handle this with color-coded message balloons containing an icon. A spiky orange balloon indicates interaction has a need attached; a green balloon means an associated gain. When an activity is in progress, the balloon turns a neutral blue.

< PREVIOUS PROJECT

NEXT PROJECT >