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.

navigation

I created these wireframes to assist in figuring out how navigation would work for this screen. We had to make the choice whether to use vertical tabs or horizontal tabs. The screen contents and art style are both information-dense, and so we eventually decided on vertically stacked tabs. This would be consistent with the main game's Season pass screen, and had the added benefit of freeing up some valuable vertical space on mobile devices.

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.