With a very basic idea of all the information I wanted to display on the screen during this particular interaction I started drawing out how the interface could have worked.

I started by straight up copying what the original Final Fantasy Tactics games used just to have a stepping stone to start from. This first version includes a floating menu, which is of course not very mobile friendly.

I then tested out moving the whole action menu to the bottom of the screen.

This just didn’t quite feel right. I tried designing the button inputs for these actions and I also could not quite make them work, I needed to show more information about what these buttons could do but just couldn’t fit it in buttons like these.


Iterating on the last one, I tried moving the inputs to the side in a scrolling menu. While I liked this more than the previous versions, it was clear that this occupied way too much of the screen. It just was not optimal.

I then realised that I didn’t have a reason to create this interface in landscape mode and that I had started developing this GUI in landscape because all the games I looked at were in landscape. As soon as I switched to portrait a lot of the information I wanted to show started making more sense, it made the interface more coherent.

This is where I decided to start actively working on it via illustrator and photoshop. I wasn’t fully satisfied with the sketches but I wanted to get this done quickly so decided to skip some prototyping.