The Project
Elementokens is a 2D top-down tactics battler akin to XCOM or Fire Emblem. In it, you play a team of wizards battling another team for control of an elemental island. Using Action Points, you move around the board to collect the titular Elementokens to collect spell cards that you can cast. Play goes back and forth between the two teams. The last team standing wins. The game was built in a custom engine over the course of eight months work.​
A diagram of the core gameplay loop
What I Did
​I served primarily as a systems and UX/UI designer, with minor additional narrative and level design responsibilities.
-
​Developed physical and digital prototypes​ for high concept testing.
-
Designed UI elements and behavior such as unit information, spell cards, and menus.​​
-
Designed core gameplay loop centered around spells with elemental typing.
-
Conducted playtests at multiple stages of development.
-
Wrote narrative treatment for overall story and characters.
-
Created art assets for units, icons, and biome tiles.
-
Led discussions during development and pushed for better communication between design and programming teams.
What I Learned
This was the first project that I worked on with programming-focused developers. We were a small team of 7 people, 3 designers, 4 programmers. It took some adjustments to get used to working across disciplines. Communication and organization was a big focus for our group. We held meetings regularly so the design team could could continuously provide updates to the programming team. That way, as we prototyped new features and cut others, the programmers could adjust the engine as needed.
Systems Design
The spells used in combat are themed around four classic elements: fire, water, earth, and wind. When it came to creating these elemental spells, I wanted to give them a level of cohesion. So, I suggested giving each element a soft "theme" that tied the spells of that element together: fire spells have good damage, water spells have AoE effects, earth spells affect the terrain and impede movement, and wind spells have great range. This way, players could link the elements to different play-styles.
​
Another aspect of the spells I helped design was that, originally, when you collected an Elementoken, you had the corresponding spell equipped until you collected a new one. This led to matches where players would get in close and then spam their spells over and over. To encourage movement around the board, I designed the "spell card". When you collect a token, you get a set of "spell cards" for that token's element. When you cast the spell, the card is spent. Thus, you must keep moving around the board to replenish spell cards by collecting refreshing tokens. It added more depth and put a greater emphasis on movement.
First Spell Card Interation
-
Focused on communicating information with vibrant colors and recognizable icons.
-
Left room for descriptive and flavor text.​
-
Numbers for damage, range, and accuracy are front and center.
UX/UI Design
A lot of my time went into prototyping how the UI of the game would look and behave. Action Points is a key resource, so I wanted to make sure players easily knew how much their units had. Because the amount of AP each unit has is only 5, each point could be displayed individually, fading out as they're expended in-game.
​
When designing the spell cards, I wanted to use icons to represent each stat rather than text for a more appealing design. The important stats were damage, range, and accuracy, which I chose to represent with a sword, arrow, and crosshair respectively. I also set a space for the spell's element. It contrasted the numbers with a simple icon rather than more words, which were reserved for the flavor text at the bottom. In the end, we went with simpler icons, and the element display was shifted up to make room for a new AoE stat.
Second Spell Card Iteration
-
​Colors are more unified, card is less visually distracting.
-
Icons are simpler and easier to display in a custom engine using programmer assets.
-
Spell stats are still front and center, the numbers are large and prominent.
Additional Material
