Marvel Secret Wars

Disney Interactive 2014-2015 Unity based mobile game iOS & Android

Project Overview

Marvel Secret Wars is a RTS game where players act as a S.H.I.E.L.D. agent collecting various super heroes from the Marvel universe and engaging in battles against Hydra and other enemies from alternate worlds within the MSW storyline. Players collect heroes, fight within Battle World, heal heroes, build and defend their base, collect resources, etc.

Details

Worked with art direction, producers, game designers and engineers to develop this multi-platform mobile game using Unity and uGui. The UI/UX team was comprised of myself acting as lead and two other senior designers.

My Involvement

• Lead UX/UI
• Managed two senior designers
• Flow Charts
• Wireframes
• Prototyping
• Scoping features and planning
• Information Architecture
• Interaction Design
• UI Style Direction
• UI Style Production
• User Testing
• Pipeline tools in JSX
• Managed outsource team working on icons

Project Process

Features


1. Med-Copter - Hero healing UI

Within Med Copter

Coming from the pre-battle screen

After visual pass

2. Battle Flow

v1

Prototype in after effects

v2

3. Pre-Battle

Wireframe

Alternative exploration

Prototype

Alternative exploration

Final screen with various states

Default view - non PvP

Default view - PvP

If all available slots are full
emphasis is put on the attack button.

Edit Mode - heroes panel slides out

4. Texture Atlas

Heavy use of 9 and 3 scale asset in order to reduce memory consumption.
This atlas alone was sufficient to rebuild all screens for the game in Unity.

5. Iconography

Set the style guide and worked with outsource team.
Icons were duo-toned and exported as desaturated so we could tint them various colours within Unity.

6. Hero Coin

Defined a standard accross all user interfaces to display heroes using
a common interface element. The circle metaphore would also indicate
that an item is draggable.

Various Screens

7. Heads Up Displays

Main Base HUD

Battle Screen HUD

8. Squad Management

Squad Management Wireframe

Squad Management Screen

9. Structure Upgrade Screens

10. Demo of game