Hearthstone Global Games 2017


Hearthstone esports team is running a new campaign called Global Games starting from 2017. This feature pits country versus country in competitive Hearthstone play. 

Our side of this project will provide a digital home for the Global Games, a nexus for voting for regions' specific team roster, and unify players across the globe to rally behind their national team.

Design Lead - Bruno Porrio 

UX Design- Yuan Wei | Michael Bomani

Art Direction & Visual Concept - Yuan Wei

Interaction Design - Yuan Wei


UX Design,Art Direction & Visual Concept,Interaction Design



  • Main goal of UX pass is to figure out the voting module, and the page will evolve in the future to show brackets.
  • Users can navigate through all 48 Countries, but only vote for one player that belongs to their (battle.net account) Country. Originally esport team wanted user to only see their own country and only after login, which felt like a missed opportunity since the fun part about Global Games is to explore all the teams.
  • Every team will have a pre-selected player that can’t be voted (pro players and famous streamers, for example).
  • Working with eSport team to figure out what kind of material we will have (logo, artwork, video introduction, etc) – that would be reflected in designs.
  • A mobile prototype to prove that the mechanic works on mobile as well.
sketch concept.jpg

02-dESIGN FOR multiple PHASES

Phase 1 : February 24 - March 10

  • Site launches and stays open for the duration of the voting window.
  • Voting is open and here are the 8 nominees.
Phase 1 : Voting

Phase 1 : Voting

Phase 2: March 10 - April 1

  • Voting closes but site is still up
  • Interim phase while votes are counted and plans are made by esports team.
  • Voting is closed and we are tallying up the votes.
Phase 2: Voting Closed

Phase 2: Voting Closed

Phase 3: April 1 - August

  • Games actually begin
  • Round Robin bracket module goes live
  • Matches Schedule & Results
  • Finals have concluded in August
phase 3.3-schedule-groupStage.jpg
Phase 3: Game Process

Phase 3: Game Process


03-Module Design for multiple phases

UI - Timeline Module Design

UI - Timeline Module Design

UI - Match Card Module Design

UI - Match Card Module Design