Hearthstone Journal
Hearthstone

Journal

Introducing meaningful long term player progression for Hearthstone lovers

Overview

Hearthstone is a strategy card game that has been around for several years. Over time the game has introduced new game modes, however players have not been rewarded equally for preferring certain modes over others. The Hearthstone Journal reimagines the old Daily Quest system into a new longer-term player progression system, which includes a battle pass, achievements, revamped quests, and an overhauled profile.

Get it on Google Play Get it on the App Store Download for Desktop
PROJECT GOAL
Introduce long term progression in Hearthstone so players feel celebrated and rewarded for their investment in the game
MY CONTRIBUTION

I was responsible for the end to end UI design and implementation of the Rewards Track and Profile. I created wireframes, mockups, and prototypes. I gave art direction to our 2D artists for final assets, and I implemented frontend visuals and logic in Unity.

A Closer Look at the Visual Metaphors

Hearthstone UI is known for its skeuomorphic visual style, thus every screen bears resemblance to physical objects. The Rewards Track is themed to look like a map scroll on wooden roll holders.

Rewards Track Screen at Level 21

The Profile is reminiscent of a book bound with string.

Profile Page 1 Showing Overview of Player's Game Stats

As a booklet, the Profile can support multiple pages.

Profile Page 2 Showing Class Progress
Desktop and Mobile Version of Rewards Track
Design Process

A Scalable Battle Pass

The Rewards Track needed a robust design to handle changes over time elegantly. It needed to show the player a variable amount of rewards that would reset every expansion (~4 months). It also needed to support a paid side and a free side, which meant a large amount of rewards had to be communicated to the player at once.


Choosing a Navigational Pattern

We evaluated a few navigational patterns before landing on our final direction. Many competitor battle passes use horizontal scrollbars to navigate through the track. While horizontal scrolling feels great on mobile, it can be a terrible experience on desktop if a player does not use a traditional mousewheel. Players who used laptop mouse pads and drawing tablets for their preferred input devices struggled to navigate with a horizontal scrollbar. With this consideration in mind, we opted for a paged navigation to prioritize cross-platform consistency, usability, and accessibility.

Final Paged Navigation
Final Paged Navigation

REDUCING VISUAL OVERLOAD

I created wireframes that explored different amounts of reward nodes on a single page. Early iterations prioritized displaying as many rewards as possible on a single page. The philosophy behind this was to reduce the amount of pages a player would have to click through. However, the higher node count made the track feel overwhelming and individual rewards did not stand out. We then switched to 5 nodes per page, and established a pattern where every 5th node would generally have a special paid reward. This created smaller milestones for players to work toward, without burdening them with too much content.

Fewer Nodes Per Page
More Nodes to Fewer

Client

Blizzard Entertainment

Role

UX Design; Visual Design; Animation; UI Implementation

UI Team

Fiona Yu, Max Ma, Juyoung Oh, Tiffany Chiu

Tools

Illustrator; Photoshop; Unity