hearthstone: battlegrounds

‍Demiurge Studios partnered with Blizzard Entertainment from 2021 to 2022 to assist in developing features for Hearthstone's new game mode, Battlegrounds. My role on the team involved:

  • Researching, designing, and documenting user flows for new features
  • Creating visual mockups for those features
  • Communicating with the client to receive and implement feedback
  • Implementing art from visual mockups into the game using Unity
  • Creating and maintaining documentation in the client's information base

Here are a few examples of my contributions to the game.

Season Pass

These are screenshots of how the panel appears in-game today.

One of the main features I assisted in developing was a Season Pass and rewards track for Battlegrounds. Accessed from the Battlegrounds hub, the screen contains two tabs. On the missions tab, players are given a pool of 3 missions to complete in any order. Upon completing a mission, an item becomes available for the player to claim on the rewards tab. Some rewards are free, while others required a premium subscription (Season Pass) to claim.

What's the metaphor?

Once we had an understanding of the functionality, the team began brainstorming the visual metaphor for the Season Pass UI and make it interactive. Each team member was tasked with coming up with an idea to pitch. Some factors I considered were that Hearthstone's art style is heavily skeumorphic (resembling physical interfaces). It's also playful and chunky. Lastly, it needed to match the flavor of the world it lives in. My experience as a WoW player helped inform my ideas (the Goblin engineer class in particular).

My contribution was this conveyor belt metaphor. These color wireframes created in Figma allowed me to make quick iterations based on feedback. Ultimately the team chose to keep the metaphor similar to the main game's season pass UI, a scrolling piece of parchment.


Mission boards Visual Exploration

These are some early visual explorations I made of what missions boards might look like. Basic board shapes were quickly produced in Illustrator (right), which were then used as a base for the sketches done in Photoshop (left). Figma was used to add text and icons, allowing for adjustments to be made quickly and easily. I was encouraged to lean heavily on the physical object metaphor. The hanging signs were well received, but it was difficult to fit this much styling into an already information-dense screen. It was eventually scrapped in favor of a more compact style.

I left in the red scribbles as an example of how I typically received art direction and feedback, drawn directly over the image in Figma with accompanying comments. The "wood level" callout refers to a shorthand system we used for the visual fidelity of mockups within our team at Demiurge; dirt, wood, bronze, gold (reserved for special pieces of art), etc.

Missions user flows

I began mapping out the user flow with a simple, text-based chart (left). From there, I took screenshots and made a version with screen wireframes (right). This was the last iteration before implementation, after some new edge cases had been called out in the updated design, signified by the flags with red exclamation marks. All work here was done in Figma.

Side-note: One of my favorite challenges in game development is mapping out user flows. I find them helpful for tracking different scenarios and chasing down edge cases, and engineer counterparts find them to be a helpful reference. When presenting a first draft of these types of charts, engineers and designers have the opportunity to catch inconsistencies that are much harder to conceptualize through written word, and subsequent iteration will temper the design to be more resistant to issues later in development.

the post-match missions flow

The post-match missions flow itself had so many variables that I needed to make breakout charts. As with the missions flow above, it began with a simple flow chart (left), which I fleshed out with a screenshot-and-wireframe version (right). This proved particularly helpful to the engineers, who had to account for all of these possible post-match variables when implementing functionality.

I left in a few annotations in the flow chart (left) which were later addressed in the wireframe flow (right).

Missions Post-Match Prototype

Opens in a new tab.

As evidenced by the many user flows needed to cover this system, we had concerns about how dense the post-match flow would be. My creative director tasked me with prototyping a normal use case and a worst case scenario in Figma. It's more animated than interactive, but it demonstrated how tolerable the flow would be (or not). I was able to make this relatively quickly reusing the wireframes I had been creating to prototype the features involved.


Rewards state wireframes

I realized that the team would need a way to track the several states an item could potentially have. The wireframes I created (above) to attempt to map out every possibility.

These wireframes were based on idea that we would have some double-wide reward templates that would help some items stand out on the track. That idea was later scrapped, and the subsequent mockups (below) accounted for a smaller number of states.

Rewards state visual mockups

And of course, we needed to figure out the visual treatment for the rewards. I painted the item backgrounds, with brown used to denote free rewards, and purple used to denote premium rewards that unlock with the rewards track. The number frame, checks, and dash were made in collaboration with team mates.

These mockups are not meant to reflect functionality, but rather how each state should look in context. The numbers corresponded to a list provided to the developers that described functionality.

These reward backgrounds were prototyped in Illustrator, then brought into a real paint simulation program called Rebelle that I often use for personal artwork. The result is a rough, hand-painted look that matched nicely with the parchment background of the collection manager.

Shop Mockups

battle bash in the shop mockups

Another feature we contributed to was Battle Bash (referred to in early development as Lucky Draw and Prize Bash). I created and presented some options to the client for how we might advertise Battle Bash in the shop with a brand new full-width banner.

I started the explorations with a placeholder Murloc theme (above), and as our contract drew to a close, I created these two Hallow's End mockups for use in upcoming content.

Fun fact, the reason these  Battle Bash items are in magenta is because they hadn't been created yet and required a placeholder. I provided these banners as Photoshop files, using smart object placeholders that could later be swapped out with the finalized prize content later on by the client.

Large Bundles in the Shop mockups

Large bundles were a new thing for Hearthstone's shop UI, and I gladly took on the task of documenting how those should appear. I laid out the different variations of item fans including the "+X More!" ribbon. My team mate designed the large bundle browser UI.

+2 Hero Slots

Some of the newer large bundles featured an item that represented the unlocking of two more hero slots to choose from at the start of a match. I took on the task of visually representing this within a bundle fan. Here are some concepts for the item itself (left), and the final approved design (right).

Some of the newer large bundles featured an unlock of two more hero slots to choose from at the start of a match. I took on the task of visually representing this within a bundle fan. Here are some concepts for the item itself (left), and the final approved design (right).


Pup Bot Emote

Our team also had the pleasure of designing and implementing the emote feature for Battlegrounds. Another team mate worked on that UI/UX, but I did get to design one emoji for Pupbot. This is a 3-frame sprite sheet I added to the the library and animated in Unity.

Default strike mini

Concepts (left) and the final in-game version (right). Letters or numbers are often added to concept sheets to help facilitate discussion.

Strikes were another fun cosmetic that our team had the opportunity to conceptualize. The scroll container represents an effect that would play during the player's final killing blow. A team mate painted the scroll container, on top of which would go an icon to represent the strike. I designed the default version that players use before unlocking unique strikes.

want to see more?