Breathing life into players' Collections
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.
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.
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.
TRAINING GROUNDS: An area where Mercenaries can be assigned to slots to gain experience passively.
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.
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.
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.
Blizzard Entertainment
UX Design; Visual Design; Animation; UI Implementation
Lorenzo Minaca; Jerry Mascho; Chris Hayes; Max Ma
Illustrator; Photoshop; Unity; Proto.io; After Effects