Disney Mirrorverse (2019)

Role: UX & UI Designer
Time Frame: February 2019 – September 2019
Engine: Unity
Platform:
Mobile


Overview

On Dinsey’s Mirrorverse, developed by Kabam, I worked as a UX & UI Designer

My core responsibilities included:

  • Creating UX and UIDDs for the Questboard feature
  • Working with Game Design to determine feature goals
  • Creating user journeys to help guide design
  • Creating UIDDs and UI assets based on established style guide
  • Integrating assets and maintaining atlases
  • Animating screens in-engine using internal tools and NGUI
  • Creating optimization tools and shaders with help from Engineering.
  • Creating interaction and screen transition mocks using Protopie

LUT Shader

TheLUT Shader allows us to recolour assets (UI or textures) using a LUT or gradient map.

This will allow us to:
● Recolour a single UI/texture asset
● Add more depth than a simple tint (gradients with several colour stops)
● Reduce Atlas size
● Improve optimization


Quest Select Menu & UI Redesign

Following discussions with the client, we were asked to provide potential redesign to help mature and modernize the UI, and bring an element of “high fantasy”. We pulled back the detail, saturation, shading, and chunkiness of the UI assets to help push the maturity. Minimalizing the use of colour helped us push key information and create a clearer hierarchy.

The menu uses a consistent primary navigation, toggling between Modes, Acts, and Chapters respectively. Using scrolling pagination helped us fully utilize the small screen real estate, along with giving the user a “page turning” effect that felt true to the IP and gameplay style.


Questboard

Overview

The Questboard is one of the core features for the Unannounced Project. Largely based off of Contest of Champions, it is a node-based map with a predetermined layout, enemies, and a final boss. I was tasked with working with Game Design to help look for areas of improvement within the old system, and to help integrate new features into the design.


Questboard Background

The Questboard is a portal between each enemy encounter. With the vast richness of the IP, we wanted to make the area feel magical, as well as hint toward upcoming content. Building background assets out in 3D, we planned to implement a parallaxing foreground and background, with illustrative elements throughout. To help mitigate distractions from the UI, the background was blurred-ultimately adding to the mystery of “what’s next”


Questboard Info Panel

The Questboard Info Panel is a screen that appears upon tapping any questboard component. It provides context about components, rewards, and is where a user may choose to move to the next node from.


Fractured Towers

Fractured Towers serve as checkpoints throughout the Questboard.


Player Level Up

Player can level up at any point in the core loop. As such, it was important to make a system that highlighted but did not fully interrupt a user. We opted to keep the animated reveals snappy and short, and call attention to any rewards, then providing a contextual breadcrumb/pip to help lead a user to new content at their leisure.


Store Intro Animation

The Store intro needed to be bouncy, fun, and enticing. I prepared a mock for the screen animations in Protopie.