Drew Hesler

A Design Portfolio

Reach me

FFXIV Hotbar Case Study

Figma Prototype
Mod Prototype

Introduction

The MMOG (Massively Multiplayer Online Game) is an innovation in video games. The idea of a massive world filled with players connecting with each other over the Internet is something that seemed straight out of science fiction to the average person during most of the 20th century. Borne out of the games that would run on university mainframes1, it eventually grew to the point where some of the biggest games in the world are included in the MMO genre, with some of the largest titles being within the subgenre of MMOs that is the MMORPG. Games such as RuneScape and World of Warcraft involve thousands of players coordinating and socializing within their worlds, doing both great and terrible things.

As it stands, I am a player of one of these MMORPGs. Final Fantasy XIV is an MMORPG that has existed for over ten years, with 5 expansion packs as of this writing. With a little over 1.4 million players, it is the 5th most played MMORPG in the world2. The story of how it came to be so successful is one of legend, but that’s a story for another day.

When I play, I noticed a set of behavior involving how I interact with the hot bar. As a user experience designer, my curiosity was piqued and as such I set out to investigate.

Research

As a player of Final Fantasy XIV, my research technically began before I even had this project in my mind. To preface, the hotbar is a UI element in an MMORPG like World of Warcraft or Final Fantasy XIV that allows users to access actions quickly and easily. In Final Fantasy XIV, a user will typically fill a hotbar with actions they use in combat for a specific class or job. FFXIV uses a job system inspired by the series that it comes from wherein a player character can have multiple different roles. Individual hotbars can be shared or not shared within a set. In addition to skills used in combat and crafting, users can assign job changes, emotes, and macros.

For my own actions, my computer at the time was an LG Gram computer, not great but not the worst. Given how the laptop was set up, I found that I was grouping related actions together. For example, the Monk class at the time had three different forms, and a trio of linked actions within each set. My hotbar at the time looked like it did in Figure 1, and the organizing principle was that the less I used an action, the farther left it would be; e.g. the hotbar action corresponding to the 1 key would be the easiest to press, while the action corresponding to the 0th key would be less used.

Fig. 1

But my own perspective wasn’t enough. I needed to know how other players interacted and set up their hotbars. To this end and after much deliberation, I put together a survey to gather other user experiences within the game. The questions were developed partially with ChatGPT, and then curated by myself.

Link To Survey

Questions I asked included:

  • Can you describe your typical gameplay session? How frequently do you find yourself having to switch between different actions or abilities?
  • How do you manage your hotbar layout? Do you organize actions based on their frequency of use or by their type (e.g., offensive abilities, defensive abilities, utility skills)?
  • Have you experienced any instances where the control scheme led to errors or unintended actions during gameplay? If so, how did you adapt or mitigate these issues?

The survey was filled out by an audience of 3 people, enough to collect good data on the issues I talked about. I also incorporated things I have heard from other people while playing, and an amount of my own experiences that I had noticed in my game.

For my personas and their user journeys, I adopted a procedure wherein the personas was more associated with the character they play, rather than the person behind them. My personas are more focused on playstyle and technology rather than biographical and life details, so the personas are detailed in a way that focuses on that.

In my research for my user testing, I had issues with figuring out a way to implement the feature so that I could test it while not having access to the official channels wherein without pushing out a product that I couldn’t iterate over. For this reason, I explored game mods as a way to implement a beta version of my changes without having access to the internal workings of the company. To this end, I downloaded TexTools and FFXIVLauncher and installed them on my computer.

Wireframes

Prototyping

To begin my prototyping process, I made a sketch of the designs that I planned out. In Figure 3, I detailed the steps that I imagined the user stepping through. To understand this, I want to take you through the mechanism that I theorized would utilize the new feature that I have devised.

This “autosort” would, upon a single click, sort the hot bar according to parameters set in the settings menu. If a user wanted to put their most used actions near the beginning of the hotbar, clicking the arrows arranged in a circlular patterns would do so. I chose the icon based on the “refresh” icon, as this functions as a reset.

Fig. 4

The process of prototyping the interface in Figma involved a ton of work, more work than any other UX project I have ever done, mostly because I did not have access to the bespoke internal design systems. As a result, much of it was created in Figma, by hand. I also used Microsoft Paint, Paint3D, Inkscape (a free alternative to Adobe inDesign) to painstakingly recreate the UI. It took a long time to recreate these wireframes, but I think that the effort was worth it.

Testing

One of the unique parts of this case study is the lack of ways to test it easily. Unlike mobile and web applications, there are few methods through which I could test whether or not my prototype worked. I theorized that mods, which are modifications to the game that change or alter the game, would help me do this. This is not strictly on board with the terms of service, but there is a code. However, in researching mods, I found that I am not able to create or test anything for this mod in terms of altering controls.

Acknowledgements

For their assistance and consultancy in the course of this project, I’d like to thank Grayson Clark, Christian Solorzano, Ruby Thelot, and Lucila Landerreche. I am extremely grateful for the advice and direction; when I didn’t know how to do something, your input was extremely important. For being my mentor in life and in all things, I’d like to thank Sheryl Roessler. You’ve been with me since middle school, and I appreciate all the guidance, even if it takes me some time to follow it. Finally, I’d like to thank my parents, who provide a safety and sanity to this world so I can keep going.

Bibliography

  1. Castronova E. Synthetic Worlds : The Business and Culture of Online Games. Chicago : University of Chicago Press; 2005. Accessed February 6, 2025. https://archive.org/details/syntheticworlds00edwa/page/10/mode/2up ↩︎
  2. FINAL FANTASY XIV: A Realm Reborn – MMO Populations & Player Counts. mmo-population.com. Accessed February 6, 2025. https://mmo-population.com/r/ffxiv ↩︎