Hearthstone Expansion: landing page Update

Hearthstone launched seventh expansion Kobolds & Catacombs on December 7, 2017. From our research for previous expansion, the Power of story and lore is the key to the user engagement. This time, the website tells the story of a dungeon run, inspired by D&D. From entering dungeons, exploring maps to a series of treasure chests spread across the page. Animation triggered by scrolling, and use multiple layers to give the effect that players are stepping into the dungeon.

Design Lead - Bruno Porrio 

UX Strategy, Interaction Design, Art Direction, visual concept - Yuan Wei

UI Design & Title Animation - Shane Mielke 


UX Strategy, Interaction Design, Art Direction, visual concept


01-Analytics and Research

Before the project started, our research team did a case study for our last expansion (Knights of the Frozen Throne) landing page design. Our team have already make a progress to reshape the style to the next level ( compares with the old expansion pages, such as Karazhan). We have made more immersive pages for expansions/adventures. The following step is to collect viewers’ feedbacks through user interview and user test.

research overview.jpg

02- UX / Content structure

Page flow.jpg
sketch concept.jpg

03- ideate Highlight