Heroes of The Storm

Crafting a community focused hub for new and existing players alike.

Blizzard Entertainment

Project Overview

Staak asked with creating a community onboarding hub for Blizzard's hugely successful Multiplayer online battle arena title, Heroes of The Storm. The brief was to create the 'go to' destination, curating the very best HOTS content that would serve in equal measure new and existing players.

With such a rich and vibrant array of content both from official channels and the incredibly proactive and engaged community we began about building a content strategy focused around a hybrid of information from credible sources available. This was focused around three key pillars, official Blizzard content, YouTube influencers and community created tooling and apps.

With content now ranging from beginner how-to's, hero guides, advanced gameplay strategies to specialist tools and eSports statistic libraries defining how content would be prioritised, organised and accessed yet still appeal to and meet the needs of a diversely experiences audience became a key challenge.

The abundance of rich artwork for Heroes of the Storm was leveraged to illustrate and highlight key touchpoints for content sections. Curated video content was served via customised YouTube playlists while a powerful, custom built live search facility allowed users to pick out even the most obscure content.

As with any MOBA game, player retention is paramount to its continued success. In collaborating closely with Blizzard we successfully created a user centric hub that not only supports even the newest of players but also provides the resources to support their long term enjoyment of the game as they mature as players.

The community hub was built on top of Blizzard's existing HOTS site framework and pattern library for seamless integration into Blizzard's backend and hosting environments. The framework, a combination of HTML, SCSS, vanilla js libraries and PUG. We created new components where necessary to accomplish the design ambition that were then made part of the core component library.

Tech stack

  • Express
  • JS
  • Pug
  • SCSS