Hero vs Dragon — Card Game Case Study
Design a card game with UX testing
Project Goal: create a fun card game
Heroes vs Dragon is a game designed and prototyped by Team Starlight where I was the designer and prototyper. The players in the game are divided into 4 heroes and 1 dragon. Players are able to control different characters to combat the opponent and assist other players. In the end, only one team could survive.
The prototype is also endorsed by Dylan Field, the CEO of Figma, on Twitter.
Intro
I developed a huge interest in Role-playing games since I was young because I LOVED watching Pokemon and Digimon. When the professor announced a computer game project in class, I immediately proposed an idea to the other members in Starlight Team about developing a Role-playing card game with powerful characters such as Mage, Knight, Hammer and Healer which each character has a few unique skills. Their responses were pretty positive so I used a pencil to draw a few icons that represent each role in card-like rectangles in my notebook.
1st Testing
We agreed to conduct the first usability testing using the cards I drew on the notebook. After the first round, we found out that…
We didn’t know how to play the game
When we were discussing the game, we mainly focused on the game concept. The team didn’t discuss much on how to actually play the game. Since we already have the cards on hand, we started to play the game and as we play, we came up with solid game instructions on how to determine a winning team and how the game is played out each turn. Each and every one of us contributed to how to play the game at that moment.
Card Design
It’s always fun to digitalize the sketches to digital products in Figma. Behind each card design, I designed each card with unique colors and styles from the collective design decisions we made as a group. For example, After the first testing, we found out the dragon is too weak to fight against 4 other players with equivalent skills. Therefore, we decided to buff the dragon with 25 hearts.
2nd Testing
After finalizing the design of the cards, we color-printed them and cut them out (It was very difficult to cut the 80px rounded corners). With the deck of cards, we exchanged the game with another group as our second round of testing. This time, we encountered the problem again —
The opposing team didn’t know how to play the game
It’s the same problem all over again, but this time the other team had trouble understanding what moves each character has and how do the moves work. Quickly after the game exchange with the other group, our team discussed on every single move a character has and what their effects are.
Final Iteration
With 2 iterations of designing and testing, it came to the end of the class. With all the test results and our collective design decisions, we finalized our design and moved on to the final phase — create a game prototype on the platform of choice. Considering my lack of technical background, I decided to go with building a prototype in Figma because I know with Smart-Animate, I can basically build any prototype.
Prototype
Now I have almost everything I need to build the prototype — game concept, character, and card design and, most importantly, game instructions. I started to design a prototype based on how we play the game in the real world. One difference or benefit of having the game digitally is that, instead of calculating the damage in our minds, we can showdown the damages in a dedicated screen to tell the user where the damage is from and how many damages they should bear each turn.
Reflection
Designing a game is fun and it requires a lot of testing to make the game reasonable and enjoyable to play. In my opinion, designing a game is similar to designing a consumer-facing software, it requires extensive user testing if the designers want to have a game that’s easy-to-pick-up and easy-to-understand. I’m glad I had this game design experience in my UX design portfolio because it really helped me to understand UX as a general umbrella that contains every project that is human involved.
Gallery
