The online role playing game Final Fantasy XIV has had a particularly good run over the past couple of years. It has experienced significant growth in its player base since its launch in 2013, but one thing that hasn’t grown in popularity is the Mog Station. The Mog Station is the account and subscription dashboard for the game where players do a variety of different tasks. Through player feedback, I set out to see how we could modernize it from both a UI and UX perspective.

 

Site Map (Pre-Redesign)

The big takeaways on my initial audit of the site’s content were:

  • There are multiple sites with completely different purposes and UIs

  • There’s no clear sense of organization in the way things are grouped together

User Research

I gathered data through a few different avenues, but primarily through the Final Fantasy XIV Subreddit as well as a few Discord channels where players of the game tend to congregate. While this does not represent a random sample of players, most of the complaints that I noticed around the Mog Station came from power users rather than new players. I compiled all of the data on to sticky notes by question on the left, and then sorted them on the right.

 
User Research post its.png

Insights

  1. The current layout is cluttered and doesn’t have a clearly defined information architecture.

  2. The UI/ visual design elements are dated

  3. A disproportionate number of responders use the Mog Station primarily to buy things, whether that is a subscription or game.

 
“They’ve added many things over the last 5 years and never re-formatted the website to compensate. We have numerous complaints in the subreddit about difficulty navigating and using the Mogstation due to lack of on-screen information and navigation.”
— Survey Respondent

Wireframing

For now, the wireframes primarily revolved around redesigning specific user flows that bubbled up as problematic in the research. The particular wireframes below are a redesign of the process for buying a collector’s edition of a game.

 

A Redesigned Dashboard

Some of the notable features that I wanted to highlight based on feedback were:

  1. Adding a field for entering a code on one of the first pages the user will see rather than forcing them to look for it

  2. Adding a sense of urgency for subscriptions that are running low on time

  3. Adding selected states so that the user is easily able to tell where they are in the dashboard

 

Original UI

Updated UI