Journal
Introducing meaningful long term player progression for Hearthstone lovers
Introducing meaningful long term player progression for Hearthstone lovers
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.
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.
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.
The Profile is reminiscent of a book bound with string.
As a booklet, the Profile can support multiple pages.
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.
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.
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.
Blizzard Entertainment
UX Design; Visual Design; Animation; UI Implementation
Fiona Yu, Max Ma, Juyoung Oh, Tiffany Chiu
Illustrator; Photoshop; Unity