Back
Brand
Iron Maiden Legacy of the Beast
Project
Compendium
Summary
Navigator games, a studio based in Vancouver B.C. they
work directly with Iron Maiden band to develop Iron Maiden Legacy of the Beast game. The
game
is the #1 rated mobile RPG with high rating (4.7/5) in Google Play and Apple App Store.
Players requested a wiki (dictionary) site where they could find various information
about all characters
and items. This was implemented using WordPress, and loaded inside the game.
Project
The Compendium initiative with goal of easy access and search while players are playing the
game.
I did visual explorations and design. Also, I developed the pages by using WordPress.
Initial meeting
I had a meeting with the game design team and the marketing team to understand project and find out what kind of things players are looking for. The top priority was fast loading time so players can quickly open it inside the game.
Challenge
The biggest challenge was thinking about different users and their interactions: players and in-house maintenance users.
For players (Design)
Fast page load time
Limited images and use text with HTML
Clarity & readability
Accessible depth
Easy to access each screen
In-house maintenance users (Functionality)
Easy to maintain
Anyone can learn fast how to edit content
UI UX direction
The main project goals were to show the long content in an interesting way and make the page load fast inside the game.
Search
Make it easy to use for everyone and everywhere
Accessible Depth
Easy to access the detail what players are looking for
Clarity & Readability
Easy to follow and easy to understand even though its long content
Research
Researched competitor’s games to find out now a day's trendy design for layout, and what kind of layout users prefers (Downloaded competitor’s games, and find their wiki website). Created a deck to wrote down the pros/cons of the website and what kind of thing we can implement in our project. On the side, I started to create SWOT Analysis of RPG games for future projects.
Research Deck
SWOT Analysis
Wireframe
Once I had a solid design direction, I began to produce high & low fidelity mockups, which would then be converted into prototypes with limited functionalities. Used Invision to do flow test and functionality test with the team.
Mobile First
The entire page was mainly designed mobile-first (horizontal size) because the site needed to be loaded inside of the game.
User Interface
The game has its own color scheme, so I did not have many options to choose the color. I tried to balance out the colors with items and images on the page.
Flow Chart
Link all pages on Invision, so the team can test its functionality before building the site with WordPress. Worked closely with game designers to improve screen flow.
Final Works
Worked closely with game designers to update the layout based on the new content.
Technical Goals
For players
Fast page load time
Accessibility (link pages together by icons, so the players don’t have to go back and forth to see the detail of character and abilities)
For in-house users
Easy to maintain
Anyone can learn fast how to edit content
Build structure in WordPress
The site is built by WordPress. The company wants to use a WordPress site because it’s
faster than developing the site with plain HTML.
To increase loading speed, I used 1-2 plugins and
wrote some PHP code.
Started to build the flow chart with the WordPress hierarchy structure.
- Archive > single-post > custom fields
- Categories
Pain Point: someone manually uploads the content on the pages.
The solution
A new game designer joins the team and she is in charge of organizing the contents. She suggested uploading the file automatically instead of doing it manually because there will be more content coming up. I suggested to convert Excel file to CSV file and upload as JSON data source for WordPress. However, because of time restrictions, we decide to use the CSV importer plugin to WordPress.
Continued optimization & maintenance work
Kept tracking users behavior via Google Analytics. Our team does a monthly meeting to discuss results and what are the things we can improve in the next update.
