FIRE EMBLEM ENGAGE - UI REDESIGN
Fire Emblem Engage is a turn-based strategy RPG for Nintendo Switch. It has a plethora of unique mechanics, from the introduction of the "Engage" mechanic, as well as the class and skill system. However, I found the User Interface to be difficult to navigate, and based the work of my User Interface on the following question.
​
"Fire Emblem Engage’s UI is difficult and misleading to navigate. It is hard to find certain options in the menu and things will often be found under titles that you may not associate with the option you are trying to find."
With this, I decided that most of the User Interface would be redesigned not on the basis of aesthetic, but on functionality, and making the menu easier to navigate. I took the Pause Menu, what I believe to be the greatest offender of this, in the effort to streamline the process of the player finding the option they're looking for.
RESPONSIBITIES
-
Create a report based on the core issue within Fire Emblem Engage, divising solutions and garnering player feedback.
-
Put UI critiques through a Post-It Investigation to help garner critique.
-
Create Flow Charts to determine the process of accessing the menu within Miro.
-
Create wireframes with multiple iterations within Adobe XD.
-
Turn these wireframes into a fully functioning prototype with controller binding to simulate an experience similar to that of which you would find on the Nintendo Switch.
-
Transfer this prototype into Unreal Engine, taking further player feedback into it's functionality.
​
PROGRAMS
-
Adobe XD
-
Photoshop
-
Miro
-
Unreal Engine
GAMEPLAY SHOWCASE - UNREAL ENGINE
PROTOTYPE - SHOWCASE
PLAYER PERSONAS
In creating the User Interface, I made sure to account for three kinds of players so that I could inspire any improvements and iterations to the UI based around how different players play the game.
-
A player who is not especially versed in strategy games, they have issues attempting to understand the deep plethora of mechanics that come with Fire Emblem Engage.
-
They struggle a lot with the game, often needing to quit and restart battles, in order to grind or procure better items.
-
They often miss new support conversations, to equip new skills, and to make use of the once-per-battle availability of the functions at the Somniel.
-
A player who is a fan of strategic gameplay, they play the game on Classic Mode on a higher difficulty.
-
They often experiment with different builds, classes, and weapons, with them finding the most enjoyment of the game in the battle system.
-
They are interested in the new "Engage" mechanic, and use that as a basis for many of their builds.
-
A twenty-two year old balancing a busy schedule who infrequently plays on casual mode on a lower difficulty.
-
They often spend time on the Somniel, interacting with allies and using the Somniel’s functions to grind supports.
-
They spend time after battle often talking to allies to gain bond fragments, adopting animals for the pure customisation of the Somniel, and gathering fruit to give to Sommie.
-
In battle, they often put units together by supports they wish to grind over strategy.
POST-IT INVESTIGATION
To help create a basis of what changes I would bring to the User Interface, I did a Post-It Investigation where I documented problems that came with Fire Emblem Engage's UI from a functionality standpoint, and then divised a solution that would help stifle the problem. Below you can see the solutions I divised to help this come to fruition.
​
Having broken down the problems into different parts of the game, I deduced that the most noticable problems lay in the Pause Menu, and decided to use it as point of reference for my UI redesign.
RESEARCH - INFLUENCES
In order to create a functioning menu, I took inspiration from other games that provided a visual representation of how I plan to solve some of the problems I've been having.
-
Elden Ring's pause menu showed me an example of a pause menu with both text labels and icons that relate to the text label. This allows the player to be easily guided to the option they wish to find with a visual aid, while not having to make assumptions as to what an icon means because of the text label, due to the difficulty of creating a universal icon for an option.
-
I researched into a previous game in the Fire Emblem series, "Fire Emblem Warriors: Three Hopes" for inspiration on how to format menus. I took inspiration from the support menu in how it shows two easily navigatable rows of information while not struggling with visibility. It also conveys more information to the player that Fire Emblem Engage lacks without creating unnessecary distractions in the Interface, as the support bar is contained in the "C, B & A" ranks of the supports.
WIREFRAMES
SCAMPS
FEEDBACK FORM
-
I created a feedback form to gague feedback on changes that I could then iterate. Feedback consisted of some errors with hover states not appearing to the desire for quicker animations.
-
I created a feedback form to gague feedback on changes that I could then iterate. Feedback consisted of some errors with hover states not appearing to the desire for quicker animations, as well as some parts of the UI not lining up correctly, but otherwise being praised for it's style and presentation.
STYLE GUIDE
