Hearthstone

Role: Senior UX/UI Artist


Component library & Prototyping


PC & Mobile Figma Library

To support the Team better I created a Figma Library anyone could use and plug into their file.

This made delivering concepts easier and faster, as well as more consistent and contextual.

UI/UX
Figma

Figma Prototypes

Almost every delivery milestone was full of UI exploration tasks for showing new content.

I got to be very creative with some of them and while certain ideas would be potentially costly to implement, they were still put together quickly in Figma as alternatives to more classic solutions.

UI/UX
Figma

Board Minis


Finding the Right Mini

  • it’s representative of the board

  • has a unique shape

  • it’s fast enough to make en masse both for the thumbnail and Unity implementation

Exploration + Context

These selected ideas represent the range covered with the explorations: from diegetic minis, to more metaphorical ideas, like the frames.

To make sure the ideas were presented contextually, they were mocked up both in the Store and Collection menus.

Concepts + Final Illustration
Figma, Photoshop

3D Model + Prefab

I moved on to create the 3D Model in Maya and a Unity prefab for the Board Mini.

3D Modeling, Texturing, Implementation
Maya, Unity

Final Look

The board underwent one last tweak before releasing – it was making its corners concave instead of convex. A move that made it a bit more similar to a number of previous explorations.

3D Modeling, Texturing, Implementation
Photoshop, Unity

Illustration & Vis Dev


Randomized Bartender Artwork

It was fun getting into Hearthstone’s signature art style and light set up for all of their digitally painted artifacts.

Concepts + Final Illustration
Photoshop

Emotes

Themed emotes were something everyone wanted more of. These are some of the concepts I created while working on the feature in Unity.

They made it easier for me to test on something tangible, without having to wait on artwork.

Concepts
Photoshop

Strikes a.k.a. Finishers


Astral Strike

Strikes were a new feature and they needed content.

The concepts are meant to capture FX in motion. Not an easy task, but a very rewarding one.

Concepts + Final Illustration
Photoshop

3D Model Prefab

Once the Strike container design was locked down, I moved on implement the 3D Model in as a Unity prefab.

The cylindrical shape of the Strike presented a problem with the page flip.

The Strike container was cut and presented as a top half only which maintained the illusion in front of the camera, but still worked with the standardized page flip height.

Implementation
Unity

Zapper Strike

The Zapper is a part of the custom Strike collectible effect in Hearthstone.

I worked closely with an FX Artist to make sure this zapper fit the original concept and looked right when displayed on top of the board.

Concepts + Final Illustration
Photoshop, Unity

Thank you

You’ve made it this far. Please enjoy this Tiny Hearthstone video recorded on my tiny Android phone.