Fictional Card Game Tutorial

For this project I had a more in-depth look into Design and Flow of a digital card game, taking notes from Hearthstone, Elder Scrolls Legends and Netrunner.
A slightly more interactive prototype can be found here: https://xd.adobe.com/view/838fb555-e14b-417b-baaf-2091c878d4a8?fullscreen
The idea is that the game should be slim and portable enough to be played by everyone with only a few required assets (Coins, Deck, Scroll).

Huge shoutout to HiNi and Petter Gunnarson for providing artwork for the cards!

Scroll down for breakdowns.

Henrik giang henrikgiang cardgame0
Henrik giang henrikgiang cardgame1

Introduction screen with some context.

Henrik giang henrikgiang cardgame2

Text placement aligned with card stats.

Henrik giang henrikgiang cardgame3
Henrik giang henrikgiang cardgame4

Coins are the main representative of what you can do. Your Faction token face up means you're the one in action. With the tails up (appropiately drawn as an eye) means that you're spectating your opponent.

Henrik giang ip2 prez breakdown3

Assets and fonts used to construct the project. The bold fantasy-esque Henriette font worked well for names. Acumin Pro Condensed allowed for more text, it was boldened in order to read cards better at a distance.

Henrik giang ip2 prez breakdown2

The "flow" of the game. I looked into deck-placement of real card games, usually placed near your dominant hand (right). But I felt the left part of the screen was unused. To get a better feel of "starting a new turn" I placed the draw and info there.

Henrik giang ip2 prez breakdown1

The many slides explaining the steps, I chose to present the ones that I felt mattered the most and presented each space well.

Henrik giang ip2 prez breakdown0

Setting up the prototype, UX-style with transition choices in Adobe XD.
Link to prototype: https://xd.adobe.com/view/838fb555-e14b-417b-baaf-2091c878d4a8?fullscreen