Final Fantasy XIV

Redesigning a game client
Background
Beginning 2021, the massively multiplayer online role-playing video game, Final Fantasy XIV, had seen a surge of new players to the servers. Due to the influx of new players, the company had temporarily suspended new character creation in-game and paused purchases of digital copies of the game. This led to increased queue times. Before the popularity hype and temporary lockdown of servers, I had been fortunate enough to create an account and play.

The current game client had a considerable amount of flaws that could benefit from a new redesign. For new and existing players, this case study was aimed to update, add new features, and create a new game client experience that would improve its usage.

Challenge
Final Fantasy XIV game client has lacked in usability for several years. The company has done very little throughout the years to update the client. Against other clients, it lacks many standard features that help the player experience.

Final Fantasy XIV’s game client does not provide much use for players. The links all redirect to the main site. How might we improve the game client to increase its usability for players new and old?
Objectives
To redesign Final Fantasy XIV's game client that allows players to view and purchase in-game items through the client
(streamline fast check out process and add account management subscription)
Add new features: character class info section and friends list
The new layout out will improve how new updates and patch notes will be presented.
Aim for easy scannability

The redesign goal is to reappropriate the game client’s previous content system and bring new useful features for new and existing players that would help bring more engagement and practical usage. To that end, this is a marked opportunity to improve its usability.
Role
UX UI Designer
  • Researched and examine web store and game client
  • Redesign game client ui to integrate new features to improve usage and engagement
  • Improve usage and engagement
My Role
user research, strategy, interaction design, prototyping, and usability testing
View Web Prototype
Tools
Sketch, Marvel, Miro, Air Table
Scope
Timeline
3 weeks
Year
July 2021— August 2021
Goals
Design Goals
  • Redesign with modern elements, stay true to the brand
  • Design useful responsive for navigational tabs in the game client, no redirection to off site
  • Ease of scannability
  • Structural intuitive to use
Research Goals
  • Identify best practices for organizing information
  • Determine what key information need for each navigation bar section for maximum impact
  • Identify best practices for organizing information for game client
01
Research
Discovery
Before designing out the new game client launcher, I knew it would be necessary to learn more about Final Fantasy XIV players and how they interacted with the game. I also wanted to take in insight from the player base in suggestions of possible improvements to help aid in the new redesign.
A Current look into the Client
Game Client formatted for Windows OS, Playstation, and Steam
(switchable to the client on the right via settings)
Game Client formatted for Mac OS, Linux OS
(game clients prior design for Windows OS)
Through my research, I found there were two different versions of the game client that would be dependent on the operating system the players would use. The tab links shown above all redirect to the main website. Most of the clients remained static and does not offer much functionality. The only features that had interactions appear were the settings page, server status, and the news slider dots.

The design felt dated for many in the space. A friends list and chat messaging system should be standard in most game clients, which is an area they are lacking as of currently. In terms of the design, I wanted to stick to the ethos of the design. Clearly, the client needs much more functionality to keep player engagement moving forward. A game client should be a companion tool for players.

Taken from my notes during the interviews, the site contained a vast amount of information. Though not difficult to navigate through, many, including myself, had found a small learning curve to finding information through the site. The whole redirection felt like a cop out that showcased their news and updates having it funnel to their site because it would be easier on their end to update the site versus the client. To address this, my thought hovered around the content needing to be more digestible in bite size pieces and easy scannability.
Issues
Current issues with the client
  • Tab links redirect to main website
  • One-time password does not serve much purpose today as it use to (discovered through interviews)
  • Minimal updates to design from previous years (found through veteran players during interview process)
  • Lack main standard features other game clients have
Landscape Analysis
I made a feature comparison of the survey of the top popular game clients, including Final Fantasy XIV client, to view how other clients differ. Most of these game clients had similar navigation bar set ups. They all brought differences in layouts and features that provided me insight into how I might approach organizing and designing a more useful game client for Final Fantasy XIV.

Through my research, I identified the top popular game launchers within the gaming industry. The direct competitors were only focus handling a single game. While the indirect competitor client focused on executing several games from the launcher. Exploring each of the launchers, it helped me understand what features would be integral for the redesign moving forward.
Insights & Opportunities
I concluded that both types of client contain similar options of navigational features for managing information: updated info or featured news, friends list, library, shop or marketplace, settings configuration, and account tab that led to the website. League of Legends design showcased many great navigational features that assisted their players in keeping track of rank and updates for the season. Blizzard's battle.net store built a simple store easy to scan through. They made purchasing in-game items such as mounts and managing subscription effortless. This would be worth taking noting of.

The other indirect launchers focused on hosting a marketplace where the games that are purchased would be added to the library and launched from the client. Navigation tabs of other clients contained their own section of information. Also, they provided small tool features such as searchability and filtering that goes a long way to finding something specific. My thoughts forward hovered around bringing design conventions from both aspects of the client styles to creating a more cohesive launcher. Ideally, this would make the launcher and navigation more approachable.
Game Research
Final Fantasy XIV had three expansions prior with a new expansion, Endwalker, set to arrive this November. With each expansion, there were patch releases that followed. Trial accounts had limited access up to the second expansion. Up to the second expansion, players were able to experience a vast amount of content and story. Outside of the storyline, there are many other things that players can partake in: raids, challenges, gatherings, communities, music clubs, etc… In a way, Final Fantasy emulated a virtual second-life feel. I browsed through the store and found costume outfits, mounts, home decor, character change potion, story skips, and many more items that could be purchased. Fashion in the world is found to play a big part in the games ecosystem.

I created an account to understand what the world looked like and who were the players were occupying the space. During my journey of gameplay, I understood what questions to ask to move forward with the interviews. I had worked on this project concurrently while playing the game.
Interviews
In-game, I joined a free company which was a guild or club. I had put out a request to my free company and approached random players in the world to ask who would be open to having me interview to better understand who the players were.

My interview participants on average ranged from 20-30. Interviews were conducted either through Discord or in-game chat. A series of questions were asked to figure out what the demographic of players were, the economy of the game, experience in the MMO and other game genres, thoughts on gameplay, and environment. In the end, I casually asked the participants to speak more freely on issues, thoughts, and improvements by asking more open-ended questions.
Interview Questions
Insights
  • Virtual fashion is important to the player base, players enjoy accessorizing their in-game character
  • Spending money on costumes, mounts, level skips, and more additionals is common in-game
  • Optional items are purchased through the webstore, webstore is bland looking in design
  • Subscriptions management is confusing for first time users
  • Subscriptions management is managed off site, it is known as a mogstation
  • Unclear icon choices for server status in game client
  • Tab section redirection to main site
  • Main site contains a ton of content
Suggestions from participants
  • Integrated quick shop in client would improve the experience
  • Efficiency for checkout
  • Plus if subscriptions could be managed
  • A new layout
  • Tools and small features (search, favorites, etc) need to be applied
  • Friends list and status
  • Add job class info section would help new users
Upon observation, I looked at the research from a macro-level approach. Below addressed what participants value for change in the game client from a broad perspective.
1. Content
Layout and the presentation of the right content for the client would improve its usability. This would help bring more engagement for the client.
2. Store
A vast amount of interviewers had suggested an in-client item shop. This would improve the efficiency of purchasing items.
3. Features
Friend lists, job sections, and subscription management were new features that were suggested. News, patch notes, and more  should be built out further.
User Persona
Based on my research, I created two personas that were reflective of the current player base in Final Fantasy XIV.
02
Information Architecture
Feature Prioritization
After analyzing the data collected from the research done prior, I started to build out a list of the most important features the client should have. I put together a feature roadmap of any features that might be needed for the client to work efficiently as well as meet the goals and objectives of this project.

Site Map
To start planning the architecture of the client and where features would fit in, I devised an application map to organize the screens in a way that would be logical and intuitive for our users.
Task Flow
Following the site architecture, I laid out the task flow of a user browsing the shop, managing their subscription, and previewing characters classes/jobs. The flows identify and consider how various tasks are connected throughout the process.
User Flow
The site map and task flow I created assisted in the possible movement navigation through the site in a detailed user flow.
03
Interaction Design
Wireframes
From organizing my features from beyond my initial step up, multiple versions had been tested for different page sections. The tests were run through Zoom, Hangouts, and Discord.

In the original design of the client, the sign in had been integrated into the client's home landing page. From the testing out versions of the home page, I had been made aware from the participants a separate login in prompt page was needed before transitioning over to the homepage. Two different versions were presented with minimal aesthetics, typography, and generous amounts of space.
Login screens
Homepage
For the main home page for the client, I created four versions. From the research, the designs had to accomplish more than just the access button to load into the game. I configured different layouts for the navigation, new features, and friends list.Through the test, some non-vital features were removed from the home screen design. The participants suggested less clutter, which I implemented best I could in the final design. The home screen needed to aim to inform with the right amount of info shown, but not be completely minimal in design that it's bare.
Shop
The design for the shop had to be dependent on placement of the navigation bar and new friends list module. I worked with the top and right side boundary as if there was a menu bar. I designed what I could in the space. The shop needed to represent a condensed version of what the website's online store showcased.
Job Class Character Page
I started with two designs for the character profile page. There seemed to be heavy interest in adding this section into the client from the first two designs. This had resulted in six versions of the design being made to test. Participants had mentioned that this would help them learn more about all other jobs in the game to play. The difficulty that arose was figuring out how to filter through to different class jobs. There were too many options.
Style Guide
04
Iteration
From Wireframes to UI Design
In translating my wireframes into pages, I began by recreating the homepage/ featured page of the game client. With influences from their character designs, I maintained a level of design that matched the ethos. At the sametime, I wanted the design to feel more modern.
UI Design
Prototype
High fidelity prototype
The game client size format was designed around the same size of the ipad 11 pro.  I wanted to give the best experience for users to interact with the client in this format versus a web prototype. A web prototype would have had a negative space around the design of the client.
Old clients for reference
View Web Prototype
Usability Test
The usability test consisted of 5 test subjects. They were tasked to complete shop for an item and checkout. After, the subject were free to explore other pages/sections.

Main concern people had was the background. Most participants favored the checkout process and product pages being well design. Minor clean up on features were suggested. Overall, the feed were fairly positive for the most part.
Key Findings
  • Background needs changing
  • Social window could possibly use a redesign to fit more informtaion
  • Job class filtering system could be improved or refined
05
Reflections
Summary
The release of Endwalker is to be released in November this year of 2021. As of now, there has not been any changes to their current design for the client. If I were to continue this case study, I would research and build out more sections based on what is used the most from the website and implement it to the game client. I would love to tackle in-game UI as another case study in the future.
Learnings
1. Understanding your audience
Jumping into this project, I learned a lot from other players in the world. I felt like I understood my interviewers at a deeper level because of actually playing the game. Simultaneously, my research had been conducted side by side with the gameplay. Interviews provided an abundance of information. I would have been able to write another case study from the research and interview data I had gathered.
2. Sort information
There were a ton of interview recordings and notes I had to sift through. My curiosity for the game had led to a vast amount of information from the interview questions I asked. This process took a little more time than usual. At times, I noticed it would be hard to get players back on track due to the social aspect of wanting to talk about the game. Things I would have done differently for next time would be to refine the interview questions, create a system for sorting information, and set a time limit.
3. Adapting to changes
With Covid-19 still present, I realized projects wouldn’t be plausible to conduct in person. I turned to methods of using discord and zoom. Originally, I was not sure how I would be able to find new players that would be willing to interview or veteran ones. Being resourceful, the in-game club I joined solved that issue. I was able to post on the community board for that.
4. Testing further
I thought back on this project and realized I could have run more research test methods such as A-B testing or card sorting. Secondary research on consumer habits would refine the design of the store even further.