Antiem
Revamped the design of a Persona-like JRPG where players battle enemies using parts of their personality, like passion and kindness, as battle stats.
Skills:
Icon Design, Motion Design, Visual Design, Photoshop/Illustrator, Wireframing/Lo-fi Mockups, After Effects/Adobe Animate, Visual QA, Figma/Adobe XD, Sketching, User Testing
Tools:
Adobe Creative Suite
Languages:
Icon Redesigns • Challenges • Testing & Feedback • Screen Redesigns & Motion
ICON REDESIGNS:
After joining the team and doing an evaluation of their needs, one of the tasks I assigned myself was to recreate the game's set of twelve colorful icons. Below is my final design of the twelve.
Final Designs
Each icon represents a personality trait and battle move type/effect:
Passion & Critical Hits and Dark-type Attacks
Reliability & Water Attacks
Versatility & Wind and Lightning Attacks
Adventure & Fire Attacks
Determination & Earth Attacks and Min Hit Damage
Kindness & Party Buffs
Leadership & Dungeon Navigation
Justness & Strength of Sever Attacks
Empathy & Health and Healing Skills
Hope & XP Gained and Light Attacks
Perception & Looting Luck and Snipe Skills
Patience & Stat Increase over Time and Null Attacks
The descriptions for these traits can be found on the game's subreddit r/antiem, but here's an excerpt:
Adventure is the stat of wayfarers and explorers. Associated with fire, and the star sign Aries, it directly increases the maximum damage you can deal with attacks of any element.
An adventurous person will always push themselves beyond their limits, of course! An adventurous person draws their strength from new experiences and never feels quite as powerful as when they have no idea what's going on.
However, a person constantly jetting off towards new experiences may have some problems cultivating what they've already gathered, signifying a lack of reliability. In-game, it can be improved by being willing to put yourself into the unknown, even at personal risk.
What stood out to me when I looked at the existing iconography was the lack of a consistent style, presence/color value and clarity. Some of the icons did not convey either one or both of their meanings clearly and were hard to read when small.
Original Icons
CHALLENGES:
As these icons all represent at least two details about party members and moves, I relied heavily on visual metaphors to communicate this information. The challenge here was to avoid making the icons too complicated.
Below are some of the connections I made for the glyphs:
Water & Reliability: Submerged anchors keep ships from drifting away.
Passion & Critical Attacks: "The close contact required with stabbings could mean more rage, experts say."
Fire & Adventure: A torch, perfect for spelunking.
Empathy vs. Kindness: Two hands vs one. You can try to be kind without considering the needs or wants of the receiver. But, that behavior lacks empathy.
My next design decision was whether the icons should have a gradient. Five out of the twelve icons I received were multicolored--the icon for fire and adventure stood out the most in this regard. My final decision was to opt for monochromatic icons to fit with the cel-shaded characters.
With that decided, my next step was to ensure that all of the icons have (relatively) the same value. I wanted them to look like a cohesive set. This was especially difficult when dealing with the near-white, red and various blue/green icons.
TESTING & USER FEEDBACK:
As I was designing them, to test the consistency and clarity of each icon, I created a questionnaire with questions like the following:
Do any of the colors of the icons seem too similar? If so, which ones?
Do any of these icons seem out of place aesthetically?
Rate each icon based on clarity, color choice and/or general preference, with 1 being the least and 7 being the best.
Assign each of these personality traits to 0-2 icons: Adventure; Determination; Versatility; Reliability; Leadership; Perception; Justness; Passion; Hope; Patience; Kindness; Empathy
Initial Attempts and Sketches Featured in a Questionnaire
Some of the feedback I received that was particularly helpful was that people thought icon #1 for Kindness and Buffs was for Healing due to the heart. This was a fair assumption. While a heart is associated with love and affection generally, in the context of a videogame, hearts do sometimes signify health. Because of this, I replaced the heart with an arrow. The arrow was also a nod to Antiem's presence on Reddit and the upvote/Karma system.
SCREEN REDESIGNS & MOTION:
This is a collection of some of the screens I redesigned for the game. The redesigns are on the right and the original screens are on the left.
Notable updates:
The party HP bars! Because the blue bar represents the player's shield (ego) health, I designed it to be a border along the edge of the player widget. While present, it encased both the player's icon and their actual HP (the red progress bar). Other changes focused on scale, fonts used, enemy state visibility (HP and weaknesses) and compositional flow/rhythm (consistently left to right).