Cover image of Eorzean Pocket Guide showcasing the User Interface

Eorzean Pocket Guide

Overview

Eorzean Pocket Guide is a search tool and information database for the popular video game Final Fantasy XIV. Using this mobile application, users can look at different items and gear within the game, compare statistics, and find the actions and requirements needed for each piece

ROLE
Ideation
UX/UI Designer
Developer
TOOLS
Adobe Xd / Photoshop / After Effects
Mongo DB
Node.js
ASSETS
FFXIV Concept Art
DDXIV REST api
DURATION
2 Months (Jan - Mar 2020)

PROBLEM

When Final Fantasy XIV launched back in 2010, the game was relatively straightforward. Wearable gear and other items were simple to find, and there wasn’t a need to seek out information that the game did not already provide the player. However, upon the release of 3 additional games, and 10 years of constant development and updates, the game has become so large that now there is a lack of communication within the game and to the users as to how to obtain items, armours, and other cosmetics. With over 10,000 collectable gear items, newcomers would have a very difficult time catching up with the various ways to acquire the equipment necessary for progress and aesthetics.

CHALLENGE

How might we organize existing data to help newer players find information and discover new gear sets that the game does not already provide?

SOLUTION

Introducing Eorzean Pocket Guide - a mobile application that allows users to search a variety of different criteria to match their gear needs and find personalize their FFXIV experience.

With this guide application, users can make more informed decisions, and newer players are able to easily access comparison information and complete their in-game goals faster

DESIGN PROCESS

Design Process

EMPATHIZE

Primary & Secondary Research

To better understand the problems faced by this project’s target audience, research was conducted to determine both usability needs and technical requirements for the project. Through research about the online game, it was determined that there were no in-game search functionalities for gear that was not directly tradable, there existed a limited amount of ways to obtain gear, and the existing FFXIV App on the IOS store only allowed users to search the market board for tradable items.

Key Findings

DEFINE

Users

The target users are newcomers and players that have completed at least part of the game. These users understand the game and have developed preferences for their gameplay and personal style or character statistics. A Key differentiator of this group is that they are very experienced with the game itself, and the different methods of gear acquisition, so they will want to see something that feels familiar to their past experiences.

Persona

Persona

User Journey Mapping

User Journey Map

User Journey Without Pocket Guide

User Journey Map 2

User Journey with Pocket Guide

Pain Points

  • User feels like “they don’t know where to start” when it comes to researching new gear
  • User feels like they are missing out on opportunities due to a lack of knowledge and communication
  • There are no existing platforms for users to search obtainment techniques
  • Lack of concise research leaves the user feeling unsatisfied

IDEATION

Wireframing

Wireframes were created in adobe Xd to allow for rapid prototyping and visual information architecture planning. These established a blueprint for how the user flows would document the intended user experience. These low-fidelity designs allowed for the integration of pain point markers and mapping out the ideal user flows on a whiteboard.

Wireframe 1Wireframe 2Wireframe 3Wireframe 4Wireframe 5

PROTOTYPE

Mockups

High-Fidelity mockups allowed for a polished user experience, with images, colours, and finalized user flows and branding. These designs can then be used to create an interactive prototype for further user testings and final iterations. The visual design was created with affordances in mind, so the team utilized existing concept art from the game, and used simple drop down and search fields to allow for a very simple and familiar user interface experience.

Mockup 1Mockup 2Mockup 3Mockup 4

High-Fidelity Prototype

The high fidelity prototype shows the main user interactions, touch points, and choices intended for the user. This showcases examples of the expected user flow and will be used for further user testing. The layout and interactions will allow the team to find any existing problems and make changes based on testing feedback.

User Flow in High Fidelity Mockup

Interactive Prototype

Adobe Xd Prototype

What I learned

With this project, I learned a lot about the design process for a database product, as well as back-end requirements for such a large application. In hindsight, I would have spent more time in the conceptualization stage, and clarified the developer requirements earlier in the process. Next, I would have done more extensive user testing on lower fidelity prototypes.

Next Steps

In the future, I want to re-visit this product when I have more back-end experience. This was an excellent exercise in UX research and designing for dynamic data. Therefore, I would love to execute this from an IOS and Android approach, instead of a web database.