Overview

Hearthstone Mercenaries is a game mode where players build a team of six Mercenaries to take on Bounties and level up through combat. The Mercenary Village is the central hub within Mercenaries where a player begins their journey. As a player grows their Collection, their Village evolves to reflect their progress in the game. The Village also allows players to navigate to all of the features that make up the game mode.

PROJECT GOAL

Create a compelling visual representation of the player’s investment in Mercenaries.

MY CONTRIBUTION

I designed the end to end UI of the Village, including the Campfire, Travel Point, Workshop, and Training Grounds. I created flow diagrams, wireframes and prototypes. I gave art direction on final assets, and implemented the frontend visuals and logic in Unity.

A Closer Look at the Systems

CAMPFIRE: A collection of task chains from each Mercenary that contain light story and dialogue.

WORKSHOP: Additional goals to provide players with direction in their gameplay. Completing Workshop goals unlock new or upgraded buildings in the Village.

UI of the Workshop, where players can build new buildings

TRAINING GROUNDS: An area where Mercenaries can be assigned to slots to gain experience passively.

Design Process

The Villagers

One of the challenges of this feature was finding the right layout for the Village. It needed to display 9 buildings and 6 Mercenaries on a single screen so that navigation wouldn't feel clumsy.

Historically, characters in Hearthstone have only ever been depicted laying against flat surfaces from a top-down perspective. Some of the classic Hearthstone-y representations I looked to were cards, gameplay ovals, hero arches, and round portraits. My initial layouts had the Mercenaries laying flat against a surface with buildings around them, however it was impossible to fit everything in one screen. I had to rethink the paradigm & dimensions entirely for the Village to work.

Collection Card

Gameplay Oval

Hero Arch

Round Portrait

Taking inspiration from board games, I added standees to the oval representation of the Mercenaries so that they could stand upright instead of lay flat. This allowed us to position the Mercenaries within a 3D Village and apply depth to feel evocative of a playset. I tuned the layout to ensure that buildings would be a reasonable tap size for mobile devices and we were able to move forward on our direction. What seemed like an impossible task was finally achievable now that we had perspective and depth to work with.

The Mercenary Village links out to various other features in the game mode

Showcase

A Big Reveal

I had the honor of revealing the features of Hearthstone Mercenaries in a gameplay showcase that was live streamed on Twitch and Youtube. One of the most amazing things about this was that the Village was recreated as a real set to walk around in. It was incredible to go from designing the Village for months in secrecy to actually be standing in it.

Client

Blizzard Entertainment

Role

UX Design; Visual Design; Animation; UI Implementation

Members

Lorenzo Minaca; Jerry Mascho; Chris Hayes; Max Ma

Tools

Illustrator; Photoshop; Unity; Proto.io; After Effects