Heroes vs Dragon
ūüźČ

Heroes vs Dragon

Try out the game demo

Dylan tweeted about this game!

Project

Heroes vs Dragon is a class project completed in Informatics 125 Computer Game Design when I was an undergraduate at UC Irvine. It is a board game involving five players in 2 teams: heroes and dragon. 4 players will form a group of Heroes with different abilities and movesets. The goal of the game is to eliminate the other team.

In this project, I led the team through researching, UI designing as well as high-fidelity prototyping.

Goal

  • Decide on the game genre through data and researches.
  • Create a highly detailed flow of the gameplay.
  • Achieving a gameplay satisfaction rate of 60% in the survey for players play the game for the first time.

Research

Every game studio thrives on creating a game that people love to play. It is natural for the team to conduct researches on what game genres are popular before we brainstorm the specifics of the gameplay.

ūüí°

Statista conducted research to discover the popular game genres among players from 18 to 64 years old in 2018. The top 5 genres are:

  1. Action-adventure (41%)
  2. According to Wikipedia, there are 7 subgenres in Action-advanture games.
    • First-person action-adventure
    • Third-person action-adventure
    • Platform-adventure games
    • Isometric platform-adventure
    • Stealth games
    • Survival horror
    • Survival games
  3. Strategy (38%)
  4. In strategy games, there are 11 subgenres.
    • Artillery
    • Auto battler (auto chess)
    • Multiplayer online battle arena (MOBA)
    • Real-time strategy (RTS)
    • MMORTS
    • Real-time tactics (RTT)
    • Tower defense
    • Turn-based strategy (TBS)
    • Turn-based tactics (TBT)
    • Wargames
    • 4X: explore, expand, exploit, and exterminate
  5. Shooters (32%)
  6. Role-Playing (25%)
  7. In role-playing games, there are 6 subgenres
    • Action RPGs
    • First-person party-based RPGs
    • MMORPGs
    • Rogue-like
    • Sandbox RPGs
    • Tactical RPGs
  8. Sports (24%)

ūüí°

In addition, the following table contains the sales number for best selling Nintendo Switch games as of June 2020.

Nintendo Switch Best Selling Games

NO.TitleGenreColumn
1
Mario Kart 8 Deluxe
Kart racing
28.99 million
2
Animal Crossing: New Horizons
Social simulation
26.04 million
3
Super Smash Bros. Ultimate
Fighting
21.10 million
4
The Legend of Zelda: Breath of the Wild
Action-adventure
19.74 million
5
Pokémon Sword and Shield
Role-playing
19.02 million
6
Super Mario Odyssey
Platformer
18.99 million
7
Pokémon: Let's Go, Pikachu! and Let's Go, Eevee!
Role-playing
12.49 million
8
Super Mario Party
Party
12.10 million
9
Splatoon 2
Third-person shooter
11.27 million
10
New Super Mario Bros. U Deluxe
Platformer
8.32 million

Generally speaking, role-playing games are publicly accepted by most people. Some of its subgenres, namely Action RPGs and Tactical RPGs, contain elements from other popular game genres, such as Action-adventure and Strategy.

Although Action-adventure games or Action RPGs, such as The Legend of Zelda: Breath of the Wild, is also a wonderful game to gather inspiration from, the adventure heavily relied on the storytelling skills from the developers and the team would also be required to invest much time in structuring the storyline as well as the relationships between each character.

On the other hand, Tactical RPGs often have only a background story and well-structured game mechanics. Considering the nature of the class project, Tactical RPGs would fit into our project timeline perfectly.

Design

Game Structure

As a design leader, I proposed an idea to the team of a turn-based game where the player can choose characters who have different sets of skills. The objective is to use the skills each turn to defeat the opposing party. The idea is well received and we began to design the flow of the game.

image

The idea is to design a game that is short and interactive. Once the player understands how the game plays, they can choose a character to play as to engage with the game. Each character will come with a different set of skills as well as a different number of hearts. In each turn, the player will need to select a skill to perform in order to support the teammate or attack the opposing team to reduce the number of hearts. When all the players have selected a skill, the turn will come to a Showdown where all the skills perform and the system will calculate the damages done to each individual. In the event of one party runs out of health, the remaining party wins.

Finalized Flow

image

Similar to designing a mobile application, the gameplay flow needs to guide the user to learn about the system. The instructions and hints need to be clear, accessible, and easy to understand.

After a few brainstorm sessions, I led the team to create a detailed flow for the entire gameplay from the start to the end. In each step from the game structure flow, I broke down and specified what visual elements or events needed to be presented to the user. This will also work as a work breakdown structure for task assigning in the design phase.

After a few test runs, we decided to have the characters being Mage, a magic user; Knight, a physical attacker; Healer, a healing companion; Hammer, a tank who can take damages for teammates; and lastly, Dragon, a powerful rival. We also decided on how many hearts a character will start the game with. To balance the gameplay and make it fair to both teams, the human team (Knight, Mage, Healer, and Hammer) will each have 3-5 hears. The opposing team (Dragon) will have about 20 hearts since Dragon is fighting 4 other players by themselves. It was also taken into consideration that Dragon's attack will not eliminate one player in one turn.

The skills would have 3 categories. Attack can cause damages to the opponents. Normally it can only have one target. Defend would benefit players for receiving less damage depends on how the characters. Special is a skill that varies per character. Special skills can either cause damages or support teammates.

At the beginning of each turn, the player would be asked to choose one of 3 skills for the character. Once every player has selected a skill, the system will calculate the damages or healing and present it to the players. At the end of each turn, the system will show how many hearts a character has left. The turn will repeat once all the members of a team run out of hearts. The remaining team wins.

Wireframe

Before creating the high-fidelity design, I sketched on notepads with my team. I visualized the art direction that was in my mind and exactly how I wanted to present the player with explanations of the character and skills.

image
image

image

Paper Prototype

Before creating an interactive prototype, I suggested conducting several playtests with other classmates using physical cards. To prepare to test for the game, I printed a deck of cards so we didn't have to spend time prototyping and finalize our designs (the cards were later gifted to Dylan Field when we met at Config).

image
image
image
image

In the first playtesting, we found 4 teams of 5 students in the class and asked them to play the game after explaining what the game instructions are. They were asked to play the game until one party becomes the winner. There were no occasions where the two opposing teams had a tie. While the players are playing, I asked each of my teammates to observe one different player in each game and spot if there were any hiccups when understanding the character or choosing the moves for the character. In addition to observing the player, I was also observing if the gameplay is fair to the two opposing teams.

ūüí°

After playing the game, we interviewed the players in one-to-one sessions.

Here are some of the questions we asked:

  • What character did you play?
  • Were you intrigued and interested by the story of the characters?
  • Were you intrigued and interested by the description of the skills?
  • Were the skills and hearts are balanced for a fair gameplay?
  • Did you find the gameplay instruction clear and easy to understand?
  • Did you find the character design to be unique and engaging?
  • Did you get confused or hesitated when playing the game? If so, in which part of the game?
  • How would you rate the game out of 10?

This is the result:

image
image
image
image

ūüí°

Takeaways

  • Instruction needs to be more concise and clearer.
  • Add flavor to the background story of the characters.
  • Add flavor to skills of the characters.
  • Characters need a redesign to make them more distinguishable from each other.
  • Some part of the gameplay needs improvements.
  • We have achieved a satisfaction rate of 80.9% from the players.

To further investigate what was the player experience issue in the gameplay, we asked the interviewees to elaborate on their answers. I found the following gameplay issues:

  • The character Mage and Healer shares a similar movesets. The only difference is Mage has fewer hearts.
  • Since the Dragon is fighting solo, it was hard for the Dragon player to win the game because the skills are much weaker when there are 4 targets.
  • It was not clear what the first thing they should do is when they start the game.

To overcome the issue found in the paper prototype, I assigned the character story and skill descriptions to the team members who are good at writing. I also assigned the task of redesigning Mage and Healer to another teammate.

ūüí°

I took the lead to improve the gameplay issues based on the feedback.

  • Mage's Attack skill will cause 2 heart damages and the damage can not be blocked by the Defend move. The special attack will both cause damages and heal the teammates. To balance the game, Mage will only have 3 hearts at the beginning of the game.
  • Healer's Attack will cause only 1 heart damage but Healer will have 5 hearts at the beginning of the game.
  • Dragon will have 20 hearts at the beginning of the game. The Attack skill will cause 3 heart damages and the Special skill will target all members of the opposing team.
  • In the game prototype, there will be a clear heads-up instruction for the player to guide them from the start to the end.

High Fidelity Design

Using the finalized flow as a work breakdown structure, I assigned screens for the other team members to design. As the design lead, I design the Show Skill Tree and Reveal All Skills Each Character Choose screens where we used the most assets. Once the team all agreed on the design direction I went with, I created simplified design guidelines for the game UI where I specified the colors, buttons, fonts, and icons.

image
image
image

To maximize productivity, each member received about 2 screens to design over 4 days. Once everyone finished designing, I was in charge of synthesizing the screens and unify the design language. Here are some key screens.

image
image
image
image
image
image

Prototype

While the team was brainstorming the ideas to improve the game based on the feedback, I started to prototype the game in Figma. The workload was heavy because there were hundreds of interactions that needed to be linked and configured. Naturally, I brought a teammate, Justin Lock, to help me with the prototyping.

image

To make the gaming experience as smooth as possible in an interactive prototype, I took advantage of the Smart Animate feature in Figma.

When prototyping I had, in my mind, a vision of what I want to appear next after a user's interaction. Smart Animate allows the software to find the reused components and move the position of components from one frame to another.

image

Another important aspect of creating an interactive prototype is to decide the overlay of the object. In this interaction where the game shows all the Healer cards to the player with both front and back. All the card images were grouped behind the Healer character card front shown in the first frame. From the transition among the three frames, the Smart Animate algorithm will find the difference in distances of each object and move them accordingly.

image

Impact

Months after completing the computer game design course, I received a scholarship from Figma to attend Config, Figma's first design conference held in San Francisco. All the attendees received a beta invite to the Community feature where designers can publish their design source files to the public. After publishing the Heroes vs Dragon on Community, Dylan Field discovered the game demo and tweeted about my game on Twitter. At the conference, I spoke to Dylan about my inspiration for the game and how I decided to use Figma as a platform to prototype a game rather than programming.

In November 2020, I was reached out by a Japanese based game developer to create a user interface for a mobile novel game called Shibamaru (Available on App Store and Play Store).

Reflection

Lessons Learned

At the beginning of the project, I had a vision of a role-playing game where we, as game developers, can let our imagination run wild and create characters with special powers. Because of the time limitation and our lack of game programming skills, I took the lead of designing prototyping the game all in Figma, which led me to learn so many proficient Figma practices to further advance my product design skillsets. I took the disadvantages of having mostly designers on the team and turned it into an ingredient of success.

What I learned the most from the project, besides prototyping skills in Figma, is how to manage a team as a lead designer. I learned to break down tasks and assign screens to others to design. I was able to unify the design language by creating a design guideline. As a more experienced designer, I instructed the team members on how to conduct usability testing and how to create low and high-fidelity designs in Figma.

Research

When conducting the survey, I made a mistake by setting up the questions to be answered with Yes or No which makes the survey result relatively arbitrary. If I get the chance to redo the survey, I would use a scale from 1 to 5 and dig through the usability issues by asking why and how.

Future of the Project

If I was given more time and resources, I would love to create a full game prototype in Figma instead of a demo with only one scenario. It would take days or even weeks to create every single scenario for the prototype but it would throw my abilities to think thoroughly and to manage a project with enormous scope to a test. I would also love to recruit people with more advanced illustration skills to create custom game visuals. Once the project is completed, it would be the first prototype project in the history of Figma to feature a full-length video game. The project would not only have a stunning headline but also set a great example showcasing the powerful Smart Animate feature for thousands of designers to learn and practice.

The concept of a design system also interests me as a designer because product design is the fruit of collaboration work. A design system is a single source of truth that is essential to a successful design project. In this project, I touched a bit on creating a mini design system. In the future and if I get a chance to participate in a project with a larger scope, I would be interested in creating a more realized design system with an atomic design system model.

Heroes vs Dragon is a milestone project in my career as a product designer. It helped me establish skills such as game design, project management, team management, and, most importantly, user experience design, and research. It is not a perfect project, but I am proud of what I accomplished and how successful it turned out to be.